/* ============================================================================
   Connect Back Office — lightweight admin shell
   Replaces the Phoenix theme (theme.min.css / phoenix.js / app.js) with a
   small custom layer on top of Bootstrap 5.3.
   ========================================================================== */

/* Palette derived from the Connect logo: azure primary, navy support, orange accent dot */
:root {
    --admin-brand: #0d76ba;          /* logo azure, deepened for AA contrast on white */
    --admin-brand-bright: #1aa7e8;   /* logo's light azure */
    --admin-navy: #2b3990;           /* logo's deep end */
    --admin-accent: #f26522;         /* logo's orange dot */
    --admin-brand-soft: rgba(26, 167, 232, .12);
    --admin-sidebar-width: 260px;
    --admin-sidebar-width-collapsed: 76px;
    /* Drives both the topbar and the sidebar brand block, so they stay aligned. */
    --admin-topbar-height: 3rem;
    --admin-sidebar-bg: #ffffff;
    --admin-sidebar-border: #e3e6ed;
    --admin-content-bg: #f4f7fb;
    --admin-nav-color: #3e465b;
    --admin-nav-hover-bg: rgba(26, 167, 232, .09);
    --admin-btn-bg: #0d76ba;
    --admin-btn-hover: #0b649e;
    --admin-radius-lg: 1rem;
    --admin-radius: .75rem;
    --admin-radius-sm: .625rem;
}

[data-bs-theme="dark"] {
    --admin-brand: #38b6f1;
    --admin-brand-soft: rgba(56, 182, 241, .16);
    --admin-sidebar-bg: #131a26;
    --admin-sidebar-border: #273245;
    --admin-content-bg: #0d1320;
    --admin-nav-color: #cbd0dd;
    --admin-nav-hover-bg: rgba(56, 182, 241, .12);
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--admin-content-bg);
}

h1, h2, h3, h4, h5, h6, .btn, .badge {
    letter-spacing: -.01em;
}

/* ----------------------------------------------------------------------------
   Shell layout
---------------------------------------------------------------------------- */
.admin-shell {
    min-height: 100dvh;
}

.admin-main {
    margin-left: var(--admin-sidebar-width);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease-out;
}

.admin-content {
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem 2rem;
    max-width: 100%;
}

.admin-footer {
    padding: .75rem 1.5rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--admin-sidebar-border);
    display: flex;
    justify-content: space-between;
}

html.sidebar-collapsed .admin-main {
    margin-left: var(--admin-sidebar-width-collapsed);
}

@media (max-width: 991.98px) {
    .admin-main,
    html.sidebar-collapsed .admin-main {
        margin-left: 0;
    }

    .admin-content {
        padding: 1rem .875rem 1.5rem;
    }
}

/* ----------------------------------------------------------------------------
   Sidebar
---------------------------------------------------------------------------- */
.admin-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--admin-sidebar-width);
    background: var(--admin-sidebar-custom-bg, var(--admin-sidebar-bg));
    border-right: none;
    box-shadow: 12px 0 32px -24px rgba(16, 24, 40, .18);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .2s ease-out, transform .2s ease-out;
}

[data-bs-theme="dark"] .admin-sidebar {
    box-shadow: 1px 0 0 var(--admin-sidebar-border);
}

.admin-sidebar-brand {
    height: var(--admin-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.125rem;
    flex-shrink: 0;
}

.admin-sidebar-brand a {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--admin-sidebar-brand-color, var(--admin-brand));
    text-decoration: none;
    white-space: nowrap;
}

.admin-brand-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
}

.admin-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.admin-brand-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-brand-text small {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--admin-sidebar-muted, var(--bs-secondary-color));
}

.brand-logo {
    height: 1.75rem;
    width: auto;
    flex-shrink: 0;
}

.brand-logo-lg {
    height: 4.5rem;
    width: auto;
}

.admin-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem .625rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav-section + .admin-nav-section {
    margin-top: .625rem;
}

/* Foldable modules: the heading is a nav row with the module's icon and toggles the module; the links show only
   while it is open, indented under it. The heading is highlighted while the current page is one of its links. */
.admin-nav-section.is-foldable + .admin-nav-section,
.admin-nav-section + .admin-nav-section.is-foldable {
    margin-top: 2px;
}

.admin-nav-section-label {
    flex-grow: 1;
}

.admin-nav-section-toggle.is-active {
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

/* Closed with the current page inside it: show where you are without opening it. */
.admin-nav-section:not(.open) .admin-nav-section-toggle.is-active {
    background: var(--admin-sidebar-active, var(--admin-brand-soft));
}

.admin-nav-section-caret {
    margin-left: auto;
    font-size: .625rem !important;
    transition: transform .15s ease-out;
}

.admin-nav-section:not(.open) .admin-nav-section-caret {
    transform: rotate(-90deg);
}

.admin-nav-section-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.admin-nav-section.is-foldable:not(.open) .admin-nav-section-items {
    display: none;
}

.admin-nav-section.is-foldable .admin-nav-section-items > .admin-nav-link,
.admin-nav-section.is-foldable .admin-nav-section-items > .admin-nav-group > .admin-nav-link {
    padding-left: 2rem;
    font-weight: 500;
}

.admin-nav-section.is-foldable .admin-nav-section-items .admin-nav-link i {
    font-size: .8125rem;
}

.admin-nav-section.is-foldable .admin-nav-group-items .admin-nav-link {
    padding-left: 3.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .admin-nav-section-caret { transition: none; }
}

.admin-nav-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--admin-sidebar-muted, var(--bs-secondary-color));
    margin: .5rem .75rem .25rem;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6rem .75rem;
    border-radius: var(--admin-radius);
    color: var(--admin-sidebar-fg, var(--admin-nav-color));
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    min-height: 44px;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.admin-nav-link i {
    width: 1.25rem;
    text-align: center;
    font-size: .875rem;
    flex-shrink: 0;
}

.admin-nav-link:hover {
    background: var(--admin-sidebar-hover, var(--admin-nav-hover-bg));
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-nav-link.active {
    position: relative;
    background: var(--admin-sidebar-active, var(--admin-brand-soft));
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-nav-section .admin-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    bottom: .5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-sidebar-footer {
    padding: .5rem .5rem .625rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-top: 1px solid var(--admin-sidebar-border);
    background: var(--admin-sidebar-custom-bg, var(--admin-sidebar-bg));
}

/* Footer shortcuts are secondary to the main nav, so they read more compact:
   smaller text and icons, tighter rows, and a muted resting color. */
.admin-footer-link {
    min-height: 38px;
    padding: .4rem .625rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--admin-sidebar-muted, var(--bs-secondary-color));
}

.admin-footer-link i {
    font-size: .8125rem;
    opacity: .85;
}

.admin-footer-link:hover {
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-footer-link.active {
    font-weight: 600;
}

/* Chat link carries an unread badge; the label should take the remaining width so the count
   sits flush-right on the row. */
.chat-nav-link {
    position: relative;
}

.chat-nav-link span:not(.chat-nav-badge):not(.visually-hidden) {
    flex-grow: 1;
}

.chat-nav-badge {
    font-size: .625rem;
    line-height: 1;
    padding: .25em .5em;
    flex-shrink: 0;
}

/* Collapsed (icons-only) sidebar: the label is hidden, so pin the badge to the icon corner. */
@media (min-width: 992px) {
    html.sidebar-collapsed .chat-nav-badge {
        position: absolute;
        top: .25rem;
        right: .25rem;
        padding: .2em .4em;
    }
}

/* The minimize control sits at the very bottom, separated from the account
   shortcuts (Chat, Profile & Settings) by a hairline divider. */
.admin-sidebar-minimize {
    margin-top: .375rem;
    padding-top: .5rem;
    border-top: 1px solid var(--admin-sidebar-border);
    border-radius: 0;
}

.admin-sidebar-minimize:hover {
    background: transparent;
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

/* Collapsible nav groups */
.admin-nav-group-toggle {
    position: relative;
}

.admin-nav-caret {
    margin-left: auto;
    font-size: .65rem !important;
    transition: transform .15s ease-out;
}

.admin-nav-group.open .admin-nav-caret {
    transform: rotate(90deg);
}

.admin-nav-group-items {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.admin-nav-group.open .admin-nav-group-items {
    display: flex;
}

.admin-nav-group-items .admin-nav-link {
    padding-left: 1.75rem;
    font-weight: 500;
}

.admin-nav-group-items .admin-nav-link i {
    font-size: .75rem;
}

@media (prefers-reduced-motion: reduce) {
    .admin-nav-caret {
        transition: none;
    }
}

/* Desktop collapsed state: icons only */
@media (min-width: 992px) {
    html.sidebar-collapsed .admin-sidebar {
        width: var(--admin-sidebar-width-collapsed);
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-link span,
    html.sidebar-collapsed .admin-sidebar .admin-nav-label,
    html.sidebar-collapsed .admin-sidebar-brand a span {
        display: none;
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-section.is-foldable .admin-nav-section-items {
        display: flex;
        margin-top: 0;
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-section-toggle {
        display: none;
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-section.is-foldable .admin-nav-section-items .admin-nav-link,
    html.sidebar-collapsed .admin-sidebar .admin-nav-section.is-foldable .admin-nav-group-items .admin-nav-link {
        padding-left: .625rem;
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-section + .admin-nav-section {
        margin-top: .375rem;
        padding-top: .375rem;
        border-top: 1px solid var(--admin-sidebar-border);
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-link {
        justify-content: center;
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-caret {
        display: none;
    }

    html.sidebar-collapsed .admin-nav-group-items .admin-nav-link {
        padding-left: .625rem;
    }
}

/* Mobile: sidebar slides over the content */
.admin-sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        width: min(85vw, var(--admin-sidebar-width));
    }

    html.sidebar-open .admin-sidebar {
        transform: translateX(0);
        box-shadow: 0 0 2rem rgba(0, 0, 0, .35);
    }

    html.sidebar-open .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 1039;
    }

    html.sidebar-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar, .admin-main {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   Topbar
---------------------------------------------------------------------------- */
.admin-topbar {
    height: var(--admin-topbar-height);
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: 0 1rem;
    background: color-mix(in srgb, var(--admin-topbar-bg, var(--admin-sidebar-bg)) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--admin-topbar-fg, inherit);
    border-bottom: none;
    box-shadow: 0 12px 32px -24px rgba(16, 24, 40, .25);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Topbar controls inherit the bar's foreground so any navbar color stays readable.
   Buttons must be forced: bootstrap's .btn sets its own color, breaking inheritance. */
.admin-topbar .btn,
.admin-topbar .admin-topbar-brand {
    color: inherit;
}

.admin-topbar .text-600 {
    color: color-mix(in srgb, currentColor 75%, transparent) !important;
}

.admin-topbar .btn-icon {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* Compact controls to match the bar's reduced height. Every .btn-icon in this header IS a bar
   control - the sidebar toggle, theme toggle, bell and messages buttons. The dropdown panels they
   open use .btn-link / .btn-phoenix-secondary instead, so they are unaffected and keep normal
   reading sizes; scoping this to direct children only would miss the theme toggle, which sits in
   the bar's ms-auto wrapper rather than directly on the header.
   min-width/min-height rather than width, because that is what .btn-icon sets. */
.admin-topbar .btn-icon {
    min-width: 1.75rem;
    min-height: 1.75rem;
    font-size: .8125rem;
}

/* Account button: avatar chip, display name and chevron. .fs--1 is !important, so this must be too. */
.admin-topbar .dropdown > .btn .avatar-initials {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .625rem;
}

.admin-topbar .dropdown > .btn .fs--1 {
    font-size: .75rem !important;
}

.admin-topbar .dropdown > .btn .fs--2 {
    font-size: .625rem !important;
}

.admin-topbar .brand-logo {
    height: 1.375rem;
}

[data-bs-theme="dark"] .admin-topbar {
    box-shadow: 0 1px 0 var(--admin-sidebar-border);
}

.admin-topbar-brand {
    font-weight: 800;
    color: var(--admin-brand);
    text-decoration: none;
    font-size: .8125rem;
}

/* Theme toggle shows the icon of the theme you'd switch TO */
[data-bs-theme="light"] .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: none; }

/* ----------------------------------------------------------------------------
   Reconnection toast (blazor.web.js toggles the components-reconnect-* classes)
---------------------------------------------------------------------------- */
#components-reconnect-modal {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10050;
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: 2rem;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    font-size: .875rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* ----------------------------------------------------------------------------
   Phoenix compatibility utilities (small shim so existing pages keep working)
---------------------------------------------------------------------------- */
.fs-0 { font-size: 1rem !important; }
.fs--1 { font-size: .8rem !important; }
.fs--2 { font-size: .694rem !important; }

.text-brand { color: var(--admin-brand) !important; }
.bg-brand { background-color: var(--admin-brand) !important; }

.text-600 { color: var(--bs-secondary-color) !important; }
.text-900, .text-black { color: var(--bs-body-color) !important; }

.bg-soft { background-color: var(--bs-tertiary-bg) !important; }

.flex-between-end {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ms-7 { margin-left: 3.5rem !important; }
.me-7 { margin-right: 3.5rem !important; }
.py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Bootstrap primary follows the brand (Blazorise Color.Primary buttons, etc.) */
.btn-primary {
    --bs-btn-bg: var(--admin-btn-bg);
    --bs-btn-border-color: var(--admin-btn-bg);
    --bs-btn-hover-bg: var(--admin-btn-hover);
    --bs-btn-hover-border-color: var(--admin-btn-hover);
    --bs-btn-active-bg: var(--admin-btn-hover);
    --bs-btn-active-border-color: var(--admin-btn-hover);
    --bs-btn-disabled-bg: var(--admin-btn-bg);
    --bs-btn-disabled-border-color: var(--admin-btn-bg);
}

.badge-accent {
    background-color: var(--admin-accent) !important;
    color: #fff;
}

/* Every button takes the theme's primary colour (Site Settings), in three weights, so a page reads as one brand:
   - primary: solid (above) - the main action;
   - outline: brand text and border, tinted on hover - secondary actions (grey/outline buttons, Blazorise
     Color.Secondary Outline, btn-phoenix-secondary);
   - tonal: a soft brand tint with brand text, solid on hover (solid Color.Secondary, btn-phoenix-primary);
   - ghost: brand text only, tinted on hover - Cancel (Color.Light) and link buttons.
   Danger and success keep red and green: there the colour carries meaning. Flat colours only. */
.btn-phoenix-secondary,
.btn-outline-secondary,
.btn-outline-primary {
    --bs-btn-color: var(--admin-brand);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--admin-brand) 45%, transparent);
    --bs-btn-hover-color: var(--admin-brand);
    --bs-btn-hover-bg: var(--admin-brand-soft);
    --bs-btn-hover-border-color: var(--admin-brand);
    --bs-btn-active-color: var(--admin-brand);
    --bs-btn-active-bg: var(--admin-brand-soft);
    --bs-btn-active-border-color: var(--admin-brand);
    --bs-btn-disabled-color: var(--admin-brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--admin-brand) 30%, transparent);
    border: var(--bs-btn-border-width, 1px) solid var(--bs-btn-border-color);
}

.btn-secondary,
.btn-phoenix-primary {
    --bs-btn-color: var(--admin-brand);
    --bs-btn-bg: var(--admin-brand-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--admin-btn-bg);
    --bs-btn-hover-border-color: var(--admin-btn-bg);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--admin-btn-hover);
    --bs-btn-active-border-color: var(--admin-btn-hover);
    --bs-btn-disabled-color: var(--admin-brand);
    --bs-btn-disabled-bg: var(--admin-brand-soft);
    --bs-btn-disabled-border-color: transparent;
}

.btn-light,
.btn-link {
    --bs-btn-color: var(--admin-brand);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--admin-btn-hover);
    --bs-btn-hover-bg: var(--admin-brand-soft);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--admin-btn-hover);
    --bs-btn-active-bg: var(--admin-brand-soft);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--admin-brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Inline text links styled as buttons (p-0) stay plain links: no tint box around the words. */
.btn-link.p-0,
.btn-link.px-0 {
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
}

/* Keyboard focus ring in the brand colour for every button. */
.btn:focus-visible {
    outline: 2px solid var(--admin-brand);
    outline-offset: 2px;
    box-shadow: none;
}

.badge-phoenix {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 2rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
    line-height: 1.5;
}

.badge-phoenix-success { color: #1c6c09; background: #d9fbd0; border-color: #bee8b4; }
.badge-phoenix-secondary { color: #31374a; background: #e3e6ed; border-color: #cbd0dd; }
.badge-phoenix-warning { color: #9d5228; background: #ffefca; border-color: #ffcc85; }
.badge-phoenix-info { color: #005585; background: #c7ebff; border-color: #96d9ff; }
.badge-phoenix-primary { color: #003a75; background: #d6e8ff; border-color: #9fc8ff; }

[data-bs-theme="dark"] .badge-phoenix-success { color: #90d67f; background: #142f0d; border-color: #1c6c09; }
[data-bs-theme="dark"] .badge-phoenix-secondary { color: #cbd0dd; background: #222834; border-color: #3e465b; }
[data-bs-theme="dark"] .badge-phoenix-warning { color: #ffcc85; background: #33200b; border-color: #9d5228; }
[data-bs-theme="dark"] .badge-phoenix-info { color: #96d9ff; background: #002b44; border-color: #005585; }
[data-bs-theme="dark"] .badge-phoenix-primary { color: #9fc8ff; background: #001f3d; border-color: #003a75; }

/* ----------------------------------------------------------------------------
   Components
---------------------------------------------------------------------------- */
.card {
    border-radius: var(--admin-radius-lg);
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -28px rgba(16, 24, 40, .18);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    padding: .875rem 1.25rem;
    font-weight: 700;
}

.btn {
    border-radius: var(--admin-radius-sm);
}

.btn.rounded-pill {
    border-radius: 50rem;
}

.form-control, .form-select {
    border-radius: var(--admin-radius-sm);
}

.offcanvas {
    border: none;
}

.dropdown-menu {
    border-radius: var(--admin-radius);
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    box-shadow: 0 16px 40px -20px rgba(16, 24, 40, .3);
    overflow: hidden;
}

.card-header h6 {
    font-weight: 700;
}

/* Data tables: quieter header, comfortable rows */
.table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    font-weight: 700;
    border-bottom-width: 1px;
}

.table > :not(caption) > * > * {
    padding: .625rem .75rem;
}

.breadcrumb {
    font-size: .8rem;
}

.modal-content {
    border-radius: var(--admin-radius-lg);
    border: none;
    box-shadow: 0 24px 64px -24px rgba(16, 24, 40, .35);
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    font-weight: 700;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    background: transparent;
    gap: .5rem;
}

/* Forms: clear labels, brand focus ring, comfortable inputs */
.form-label {
    font-weight: 600;
    font-size: .8rem;
    margin-bottom: .35rem;
}

.form-control, .form-select {
    padding: .5rem .75rem;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--admin-brand);
    box-shadow: 0 0 0 .2rem var(--admin-brand-soft);
}

.form-check-input:checked {
    background-color: var(--admin-btn-bg);
    border-color: var(--admin-btn-bg);
}

.field-help, .form-text {
    font-size: .75rem;
}

.btn-icon {
    padding: 0;
    border-radius: 2rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.btn-icon:hover {
    background: var(--bs-secondary-bg);
}

.btn-icon-sm {
    min-width: 1.75rem;
    min-height: 1.75rem;
}

.avatar-initials {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--admin-btn-bg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.avatar-initials-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.4rem;
}

.avatar-initials-md {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
}

.avatar-initials img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-upload {
    position: relative;
    display: inline-block;
}

.avatar-upload-btn {
    position: absolute;
    right: -.25rem;
    bottom: -.25rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    color: var(--admin-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .15);
}

.avatar-upload-btn:hover {
    background: var(--admin-nav-hover-bg);
}

.notification-dropdown {
    width: min(22rem, calc(100vw - 2rem));
}

/* Scrollable body so a long list stays inside the dropdown instead of running off-screen. */
.notification-list {
    max-height: min(24rem, 60vh);
    overflow-y: auto;
}

/* Let items wrap (dropdown-item forces nowrap by default) and reserve room for the unread bar. */
.notification-item {
    white-space: normal;
    border-left: 3px solid transparent;
}

/* Unread rows get a subtle tint + accent bar so they read as "new" without relying on bold alone. */
.notification-item-unread {
    background-color: var(--bs-tertiary-bg);
    border-left-color: var(--admin-btn-bg);
}

/* Clamp the message to three lines rather than a hard one-line truncate, so it stays readable. */
.notification-item-message {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Small accent dot marking an unread row. */
.notification-dot {
    width: .5rem;
    height: .5rem;
    margin-top: .35rem;
    border-radius: 50%;
    background-color: var(--admin-btn-bg);
}

.notification-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* ---------- Notification icon chip (shared by the bell dropdown and the page) ----------
   Category-tinted, flat fill (no gradients per the design system). */
.notification-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--admin-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
}

.notification-icon[data-category="RoleAssigned"] {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

.notification-icon[data-category="RoleExpiring"] {
    background: rgba(255, 159, 10, .16);
    color: #b26a00;
}

[data-bs-theme="dark"] .notification-icon[data-category="RoleExpiring"] {
    color: #f0a935;
}

/* The bell dropdown row uses the smaller chip. */
.notification-item .notification-icon {
    width: 2rem;
    height: 2rem;
    font-size: .8rem;
}

/* ---------- Full-page notifications feed (the /notifications route) ---------- */
.notification-group-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin: 0 .25rem .5rem;
}

.notification-feed {
    overflow: hidden;
}

.notification-feed-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color .12s ease-out, border-left-color .12s ease-out;
}

.notification-feed-item:last-child {
    border-bottom: 0;
}

.notification-feed-item:hover,
.notification-feed-item:focus-visible {
    background-color: var(--bs-tertiary-bg);
    outline: none;
}

.notification-feed-item-unread {
    background-color: var(--admin-brand-soft);
    border-left-color: var(--admin-brand);
}

.notification-feed-title {
    font-size: .925rem;
}

.notification-feed-time {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.notification-feed-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--admin-brand);
}

.notification-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.35rem;
}

/* Deep-link highlight: when the bell routes to ?focus=<id>, the target row briefly pulses so the
   eye lands on it. Added/removed by adminNotifications.focus in ui.js. */
.notification-feed-item.notification-focus {
    animation: notification-pulse 2s ease-out;
}

@keyframes notification-pulse {
    0%   { background-color: var(--admin-brand-soft); box-shadow: inset 3px 0 0 var(--admin-brand); }
    15%  { background-color: var(--admin-brand); }
    100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent; }
}

/* The pulse briefly turns the row brand-colored; keep its text legible while it does. */
.notification-feed-item.notification-focus,
.notification-feed-item.notification-focus .notification-feed-title,
.notification-feed-item.notification-focus .text-600 {
    animation-name: notification-pulse, notification-pulse-text;
}

@keyframes notification-pulse-text {
    0%, 100% { color: inherit; }
    15%      { color: #fff; }
}

.dashboard-tile {
    transition: transform .15s ease-out, box-shadow .15s ease-out;
}

.dashboard-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}

.dashboard-tile-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--admin-radius);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-tile { transition: none; }
    .dashboard-tile:hover { transform: none; }
}

/* Login hero */
.auth-hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-content-bg);
    padding: 3rem 1.5rem;
}

.auth-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    max-width: 72rem;
    width: 100%;
    align-items: center;
}

.auth-hero-intro h1 {
    font-size: 2.5rem;
    font-weight: 800;
}

.auth-hero-tagline {
    font-size: 1.2rem;
    max-width: 34rem;
}

.auth-hero-visual {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-hero-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 16rem;
    object-fit: cover;
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-sidebar-border);
    background: var(--admin-sidebar-bg);
}

.auth-hero-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-sidebar-border);
    overflow: hidden;
}

.auth-hero-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.auth-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--admin-sidebar-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-lg);
    padding: 1.25rem;
}

.auth-feature-card .dashboard-tile-icon {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .auth-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .auth-hero-intro h1 {
        font-size: 1.75rem;
    }

    .auth-hero-tagline {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .auth-feature-card {
        text-align: left;
    }
}

/* ----------------------------------------------------------------------------
   Data lists: table on desktop, cards on mobile
---------------------------------------------------------------------------- */
.mobile-cards {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.mobile-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius);
    padding: .875rem 1rem;
}

.mobile-card-title {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .125rem;
    overflow-wrap: anywhere;
}

.mobile-card-line {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

.mobile-card-actions {
    display: flex;
    gap: .5rem;
    margin-top: .625rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .offcanvas.offcanvas-end {
        width: 100vw;
    }

    .flex-between-end {
        row-gap: .5rem;
        flex-wrap: wrap;
    }
}

.mobile-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem .25rem;
}

.mobile-pager-info {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.mobile-pager-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mobile-pager-page {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Role-permissions modal: collapsible permission groups */
.perm-group {
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 70%, transparent);
    border-radius: var(--admin-radius);
    margin-bottom: .625rem;
    overflow: hidden;
}

.perm-group-header {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .75rem 1rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--bs-body-color);
    min-height: 44px;
}

.perm-group-header:hover {
    background: var(--admin-nav-hover-bg);
}

.perm-caret {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    transition: transform .15s ease-out;
    flex-shrink: 0;
}

.perm-caret.open {
    transform: rotate(90deg);
}

.perm-group-body {
    padding: .25rem 1rem .75rem;
    border-top: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 70%, transparent);
}

.perm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem 0;
    min-height: 44px;
}

.perm-row + .perm-row {
    border-top: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 45%, transparent);
}

.perm-row .form-check-input {
    cursor: pointer;
    width: 2.25rem;
    height: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .perm-caret {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   Top progress bar (page-navigation feedback)
---------------------------------------------------------------------------- */
#top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out;
}

#top-progress-bar.active {
    opacity: 1;
}

.top-progress-bar-fill {
    height: 100%;
    width: 0;
    background: var(--admin-brand);
    box-shadow: 0 0 8px 0 var(--admin-brand);
    transform-origin: left;
}

.top-progress-bar-fill.animate {
    animation: top-progress-grow 4s cubic-bezier(.1, .6, .2, 1) forwards;
}

#top-progress-bar.done .top-progress-bar-fill {
    animation: none;
    width: 100%;
    transition: width .2s ease-out;
}

@keyframes top-progress-grow {
    0% { width: 0; }
    20% { width: 35%; }
    50% { width: 60%; }
    80% { width: 78%; }
    100% { width: 88%; }
}

.top-progress-spinner {
    position: fixed;
    top: .55rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    border-width: .15em;
    color: var(--admin-brand);
    z-index: 2001;
}

#top-progress-bar.done .top-progress-spinner {
    opacity: 0;
    transition: opacity .15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .top-progress-bar-fill.animate {
        animation: none;
        width: 88%;
        transition: width .3s ease-out;
    }
}

/* Audit log field-level diff */
.audit-changes {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .625rem .75rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--admin-radius-sm);
}

.audit-change-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
}

.audit-change-field {
    font-weight: 700;
    min-width: 7rem;
}

.audit-change-old {
    color: var(--bs-danger);
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.audit-change-new {
    color: var(--bs-success);
    overflow-wrap: anywhere;
}

.audit-change-arrow {
    font-size: .65rem;
    color: var(--bs-secondary-color);
}

.badge-phoenix-danger {
    color: #b3261e;
    background: #ffdad4;
    border-color: #ffb4a9;
}

[data-bs-theme="dark"] .badge-phoenix-danger {
    color: #ffb4a9;
    background: #410e0b;
    border-color: #b3261e;
}

/* Settings page tabs */
.settings-tabs .nav-tabs {
    border-bottom: 1px solid var(--admin-sidebar-border);
    gap: .25rem;
    flex-wrap: wrap;
}

.settings-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .875rem;
    padding: .625rem .25rem;
    margin-right: 1.25rem;
}

.settings-tabs .nav-link:hover {
    color: var(--admin-brand);
}

.settings-tabs .nav-link.active {
    color: var(--admin-brand);
    background: transparent;
    border-bottom-color: var(--admin-brand);
}

/* Settings page color swatches */
.color-swatch {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}

.color-swatch.selected {
    border-color: var(--bs-body-color);
}

.form-control-color {
    width: 2.25rem;
    height: 2.25rem;
    padding: .15rem;
    border-radius: 50%;
    cursor: pointer;
}

/* Blazorise tweaks */
.form-label {
    padding-left: 0 !important;
}

.spinner-border-sm {
    width: .9rem;
    height: .9rem;
    border-width: .15em;
}

/* ============================================================================
   Chat
   ========================================================================== */
.chat-page {
    display: flex;
    height: calc(100dvh - var(--admin-topbar-height) - 2rem);
    min-height: 30rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-lg);
    overflow: hidden;
}

.chat-sidebar {
    width: 22rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--admin-sidebar-border);
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem .5rem;
}

/* "New chat": a labelled pill, not a bare pencil, so what it does is obvious. */
.chat-new-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: var(--admin-btn-bg);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.chat-new-btn i {
    font-size: .75rem;
}

.chat-new-btn:hover,
.chat-new-btn:focus {
    background: var(--admin-btn-hover);
    color: #fff;
}

.chat-search {
    position: relative;
    padding: .25rem 1rem .75rem;
}

.chat-search i {
    position: absolute;
    left: 1.95rem;
    top: 1.45rem;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--bs-secondary-color, #6b7280);
    pointer-events: none;
}

.chat-search .form-control {
    border-radius: 999px;
    padding-left: 2.5rem;
    background: var(--admin-content-bg);
    border-color: transparent;
}

.chat-search .form-control:focus {
    background: var(--bs-body-bg);
    border-color: var(--admin-brand);
    box-shadow: none;
}

.chat-conversation-list {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    overflow-y: auto;
    min-height: 0;
    padding: 0 .5rem .5rem;
}

.chat-conversation-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem;
    min-height: 2.75rem;
    border: none;
    border-radius: var(--admin-radius);
    background: transparent;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.chat-conversation-item:hover {
    background: var(--admin-nav-hover-bg);
}

.chat-conversation-item.active {
    background: var(--admin-brand-soft);
}

.chat-conversation-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.chat-conversation-top,
.chat-conversation-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.chat-conversation-name {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conversation-time {
    font-size: .7rem;
    color: var(--bs-secondary-color, #6b7280);
    flex-shrink: 0;
}

.chat-conversation-preview {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-unread-badge {
    background: var(--admin-accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    padding: .25rem .45rem;
    min-width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.chat-avatar {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    overflow: hidden;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: .7rem;
}

.chat-avatar-lg {
    width: 5rem;
    height: 5rem;
    font-size: 1.6rem;
}

/* Wrapper lets the group badge sit at the avatar's corner without being clipped by the
   avatar's own overflow:hidden. */
.chat-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-avatar-group-badge {
    position: absolute;
    right: -.15rem;
    bottom: -.15rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--admin-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    border: 2px solid var(--admin-sidebar-bg, #fff);
}

/* Segmented control for choosing Direct vs Group in the New Chat modal. */
.chat-mode-toggle {
    display: flex;
    gap: .35rem;
    padding: .3rem;
    background: var(--admin-content-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    margin-bottom: 1rem;
}

.chat-mode-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem .75rem;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color, #6b7280);
    border-radius: calc(var(--admin-radius) - .2rem);
    font-weight: 600;
    font-size: .85rem;
    transition: background .15s ease, color .15s ease;
}

.chat-mode-option:hover:not(.active) {
    color: var(--bs-body-color);
    background: var(--admin-brand-soft);
}

.chat-mode-option.active {
    background: var(--admin-brand);
    color: #fff;
}

.chat-message-avatar {
    align-self: flex-end;
    margin-bottom: .15rem;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat-main-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--admin-sidebar-border);
    background: var(--bs-body-bg, #fff);
}

.chat-main-identity {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .25rem;
    margin: -.25rem;
    border: none;
    background: transparent;
    border-radius: var(--admin-radius);
    text-align: left;
    cursor: pointer;
}

.chat-main-identity:hover,
.chat-main-identity:focus-visible {
    background: var(--admin-content-bg);
}

.chat-main-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--admin-content-bg);
    min-height: 0;
}

.chat-day-divider {
    display: flex;
    justify-content: center;
    margin: .75rem 0 .5rem;
}

.chat-day-divider span {
    font-size: .7rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: 999px;
    padding: .2rem .75rem;
}

.chat-message-row {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    justify-content: flex-start;
}

.chat-message-row.mine {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: min(30rem, 78%);
    padding: .55rem .8rem;
    border-radius: 1rem;
    border-bottom-left-radius: .35rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
}

.chat-message-row.mine .chat-bubble {
    background: var(--admin-btn-bg);
    border-color: var(--admin-btn-bg);
    color: #fff;
    border-radius: 1rem;
    border-bottom-right-radius: .35rem;
}

.chat-bubble-sender {
    font-size: .72rem;
    font-weight: 700;
    color: var(--admin-brand);
    margin-bottom: .15rem;
}

.chat-bubble-text {
    font-size: .875rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble-time {
    font-size: .65rem;
    color: var(--bs-secondary-color, #6b7280);
    margin-top: .2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.chat-message-row.mine .chat-bubble-time {
    color: rgba(255, 255, 255, .75);
}

/* Delivery/read ticks on the sender's own messages. */
.chat-bubble-status {
    display: inline-flex;
    align-items: center;
    font-size: .62rem;
    line-height: 1;
}

.chat-bubble-status.read {
    color: #34b7f1;
}

/* Live "typing…" bubble with three pulsing dots. */
.chat-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .7rem .9rem;
}

.chat-typing-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--bs-secondary-color, #9ca3af);
    animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing-dot:nth-child(2) {
    animation-delay: .18s;
}

.chat-typing-dot:nth-child(3) {
    animation-delay: .36s;
}

@keyframes chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-.28rem); opacity: 1; }
}

.chat-header-typing {
    font-style: italic;
}

/* Presence indicator in the conversation header. */
.chat-header-presence {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.chat-presence-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--bs-secondary-color, #9ca3af);
    flex-shrink: 0;
}

.chat-presence-dot.online {
    background: #34c759;
}

/* In-app new-message popup, mounted in the layout so it appears on any page. */
.chat-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
    padding: .85rem;
    animation: chat-toast-in .2s ease-out;
}

@keyframes chat-toast-in {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* A finished call's record in the thread. Centred and quiet: it is something that happened, not
   something anyone said. */
.chat-call-entry {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: .25rem auto;
    padding: .3rem .75rem;
    border-radius: 2rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.chat-call-entry-time { opacity: .75; }

/* A withdrawn message: present, but visibly not speech any more. */
.chat-bubble-deleted {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-style: italic;
    opacity: .7;
}

.chat-bubble-deleted i { font-size: .8em; }

/* The per-message menu. Hidden until the row is hovered or the menu itself is open, so a thread
   at rest is not a wall of icons - but kept in the DOM so keyboard users can still reach it. */
.chat-message-actions {
    position: relative;
    align-self: center;
    flex-shrink: 0;
}

.chat-message-menu-toggle {
    opacity: 0;
    transition: opacity .12s ease-in-out;
    background: none;
    border: 0;
    color: var(--bs-body-color);
    padding: .25rem .4rem;
    cursor: pointer;
}

.chat-message-row:hover .chat-message-menu-toggle,
.chat-message-menu-toggle:focus-visible { opacity: .65; }

.chat-message-menu-toggle:hover { opacity: 1; }

.chat-message-menu {
    position: absolute;
    top: 100%;
    z-index: 20;
    min-width: 11rem;
    padding: .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* Opens inward: on the sender's own messages the bubble sits hard right, so a menu anchored left
   would hang off the edge of the thread. */
.chat-message-menu { left: 0; }
.chat-message-row.mine .chat-message-menu { left: auto; right: 0; }

.chat-message-menu button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-radius: .35rem;
    background: none;
    color: var(--bs-body-color);
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
}

.chat-message-menu button:hover { background: var(--admin-brand-soft); }

.chat-message-menu button i { width: 1rem; text-align: center; opacity: .75; }

.chat-message-menu-danger { color: var(--bs-danger) !important; }

/* A meeting entry is the same shape as a call record but clickable, and carries its date. */
.chat-meeting-entry {
    border: 1px solid color-mix(in srgb, var(--admin-brand) 35%, transparent);
    background: var(--admin-brand-soft);
    color: var(--bs-body-color);
}

.chat-meeting-entry:hover { background: color-mix(in srgb, var(--admin-brand) 22%, transparent); }

.chat-meeting-when { font-weight: 600; }

/* ----------------------------------------------------------------------------
   Presence status (Teams-style availability)
---------------------------------------------------------------------------- */
.presence-dot {
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    background: var(--bs-secondary-color);
}

/* Shape as well as colour: red and green are the two most commonly confused, and status must not
   depend on telling them apart. Busy is a solid ring, do-not-disturb carries a bar. */
.presence-available { background: #198754; }
.presence-busy { background: #dc3545; }
.presence-donotdisturb {
    background: #dc3545;
    position: relative;
}

.presence-donotdisturb::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: .34rem;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.presence-berightback,
.presence-appearaway { background: #ffc107; }

.presence-inameeting { background: #6f42c1; }

.presence-appearoffline {
    background: transparent;
    border: 2px solid var(--bs-secondary-color);
}

/* Status badge sitting on an avatar. */
.presence-badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

/* ----------------------------------------------------------------------------
   Account menu (topbar avatar dropdown)
   Two panes - account, and the availability picker behind it - so the resting
   height stays at four rows instead of eleven. On phones it docks to the bottom
   of the viewport as a sheet, where a top-anchored menu would overflow.
---------------------------------------------------------------------------- */
.account-menu {
    width: 16.5rem;
}

.account-menu-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
}

/* One row shape for every entry (status, profile, sign out, each status choice) so the two
   panes read as the same menu. Buttons and links both, hence the reset. */
.account-menu-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem 1rem;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    text-decoration: none;
    text-align: left;
}

.account-menu-row:hover,
.account-menu-row:focus-visible {
    background: var(--admin-nav-hover-bg, var(--bs-tertiary-bg));
    color: var(--bs-body-color);
}

.account-menu-row-selected {
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-weight: 600;
}

.account-menu-row-danger {
    border-top: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    color: var(--bs-danger);
}

.account-menu-row-danger:hover,
.account-menu-row-danger:focus-visible {
    background: rgba(220, 53, 69, .1);
    color: var(--bs-danger);
}

/* Fixed gutter so the icons line up with the presence dot on the status row. */
.account-menu-icon {
    width: .625rem;
    text-align: center;
    font-size: .8rem;
    flex-shrink: 0;
}

.account-menu-subhead {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
}

/* Still scrolls if the viewport is genuinely tiny (landscape phone). */
.account-status-list {
    max-height: min(20rem, 55vh);
    overflow-y: auto;
    padding: .25rem 0;
}

@media (max-width: 575.98px) {
    /* Stays anchored under the avatar (absolute, not fixed): .admin-topbar carries a
       backdrop-filter, which makes it the containing block for fixed descendants, so a
       bottom-docked sheet would anchor to the 3rem bar and grow off the top of the screen.
       Instead it widens to nearly the viewport and scrolls within the space below the bar. */
    .account-menu.dropdown-menu {
        width: min(20rem, calc(100vw - 1.5rem));
        max-height: calc(100dvh - var(--admin-topbar-height) - 1.5rem);
        overflow-y: auto;
    }

    /* Bigger touch targets on a phone. */
    .account-menu .account-menu-row {
        padding: .875rem 1.125rem;
    }

    /* The pane itself already scrolls; let the list run its natural length inside it. */
    .account-status-list {
        max-height: none;
        overflow-y: visible;
    }
}

/* ----------------------------------------------------------------------------
   Calendar (month view)
---------------------------------------------------------------------------- */
.cal-month-label {
    font-weight: 700;
    font-size: .95rem;
    min-width: 9rem;
    text-align: center;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--bs-border-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.cal-heading {
    background: var(--bs-tertiary-bg);
    padding: .375rem .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* Whole day is a button so clicking empty space schedules something there. */
.cal-day {
    background: var(--bs-body-bg);
    border: none;
    text-align: left;
    padding: .25rem;
    min-height: 6.25rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    align-items: stretch;
}

.cal-day:hover { background: var(--bs-tertiary-bg); }

.cal-day.outside { opacity: .45; }

.cal-day.today .cal-day-number {
    background: var(--admin-brand);
    color: #fff;
}

.cal-day-number {
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--bs-secondary-color);
}

.cal-event {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .3rem;
    border-radius: .25rem;
    background: var(--admin-brand-soft);
    color: var(--bs-body-color);
    font-size: .7rem;
    min-width: 0;
    /* Full width of the cell: without this a flex item sizes to its content and the title is the
       first thing to be clipped away. */
    width: 100%;
}

.cal-event:hover { background: color-mix(in srgb, var(--admin-brand) 25%, transparent); }

/* In a month cell the time is the part that gives way: "09:00" with the title truncated to three
   characters tells you nothing, whereas the title alone still identifies the meeting. */
.cal-event-time { font-weight: 700; flex-shrink: 1; min-width: 0; overflow: hidden; }
.cal-event-title { min-width: 0; flex: 1; }

@media (max-width: 1199.98px) {
    /* Narrow month cells: drop the time entirely rather than starve the title. */
    .cal-event-time { display: none; }
}

.cal-event.cancelled {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    text-decoration: line-through;
}

/* A meeting you can join right now: flat brand fill, no gradient. */
.cal-event.live {
    background: var(--admin-brand);
    color: #fff;
}

.cal-more {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    padding-left: .3rem;
}

/* ---- Week / day time grid --------------------------------------------------
   The day runs down the page at 48px per hour. Blocks are absolutely positioned from their start
   time and duration, so what you see is when things actually are - the JS-free equivalent of the
   Outlook/Teams layout. The hour rows are a repeating background, which keeps the lines and the
   blocks measured from exactly the same origin. */
.cal-week {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.cal-week-head {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, 1fr);
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.cal-week-dayhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .375rem .25rem;
    border-left: 1px solid var(--bs-border-color);
}

.cal-week-dayname {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

.cal-week-daynum { font-size: .95rem; font-weight: 700; }

.cal-week-dayhead.today .cal-week-daynum {
    background: var(--admin-brand);
    color: #fff;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cal-week-body {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, 1fr);
    /* Fixed viewport onto a 24-hour day: the whole day exists, you scroll to the part you want. */
    max-height: 60vh;
    overflow-y: auto;
}

.cal-day-body { grid-template-columns: 3.5rem 1fr; }

.cal-week-gutter { position: relative; }

.cal-hour-label {
    position: absolute;
    right: .375rem;
    transform: translateY(-.4rem);
    font-size: .65rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.cal-week-col {
    position: relative;
    border-left: 1px solid var(--bs-border-color);
    /* One line per hour, drawn from the same 48px origin as the blocks. */
    background-image: repeating-linear-gradient(
        to bottom,
        var(--bs-border-color) 0,
        var(--bs-border-color) 1px,
        transparent 1px,
        transparent 48px);
}

.cal-hour-slot {
    position: absolute;
    left: 0;
    right: 0;
    border: none;
    background: none;
    padding: 0;
}

.cal-hour-slot:hover { background: var(--bs-tertiary-bg); }

.cal-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    overflow: hidden;
    padding: .15rem .3rem;
    border: none;
    border-left: 3px solid var(--admin-brand);
    border-radius: .25rem;
    background: var(--admin-brand-soft);
    color: var(--bs-body-color);
    text-align: left;
    /* Hairline gap so touching blocks in adjacent columns stay distinguishable. */
    margin-right: 1px;
}

.cal-block:hover { background: color-mix(in srgb, var(--admin-brand) 25%, transparent); }

/* The title is the point of the block, so it gets the space and the time yields. Without min-width:0
   a flex child refuses to shrink below its content, and the title gets pushed out of the clipped
   box entirely - present in the DOM, invisible on screen, readable only from the tooltip. */
.cal-block-title {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
}

.cal-block-time {
    font-size: .62rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

/* Too short to stack two lines, so they go side by side instead - both facts still fit on one row,
   which is better than dropping either. */
.cal-block.compact {
    flex-direction: row;
    align-items: baseline;
    gap: .3rem;
    padding: .05rem .3rem;
}

.cal-block.compact .cal-block-title { font-size: .68rem; }

.cal-block.compact .cal-block-time {
    /* The start alone on one line; the end is implied by where the block stops. */
    font-size: .6rem;
    flex-shrink: 0;
    order: -1;
}

.cal-block.live {
    background: var(--admin-brand);
    border-left-color: var(--admin-brand);
    color: #fff;
}

.cal-block.live .cal-block-time { color: rgba(255, 255, 255, .85); }

.cal-block.cancelled {
    background: var(--bs-tertiary-bg);
    border-left-color: var(--bs-secondary-color);
}

.cal-block.cancelled .cal-block-title {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

/* Where we are in the day. Red is the one convention every calendar shares. */
.cal-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #dc3545;
    z-index: 2;
    pointer-events: none;
}

.cal-now-line::before {
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc3545;
}

.cal-view-switch .btn {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Flat fill for the current view - no gradient. */
.cal-view-switch .btn.active {
    background: var(--admin-brand);
    border-color: var(--admin-brand);
    color: #fff;
}

/* ---- Mobile: compact month picker + agenda for the chosen day ---- */
.cal-grid-compact .cal-day {
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .25rem .125rem;
}

.cal-grid-compact .cal-day-number {
    align-self: center;
    font-size: .8rem;
}

.cal-grid-compact .cal-day.selected {
    background: var(--admin-brand-soft);
    box-shadow: inset 0 0 0 2px var(--admin-brand);
}

/* Dots answer "is anything on that day", which is what someone scans a month for. */
.cal-daydots {
    display: flex;
    gap: .1rem;
    height: .3rem;
    align-items: center;
}

.cal-daydot {
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    background: var(--admin-brand);
}

.cal-daydot.cancelled { background: var(--bs-secondary-color); }

.cal-agenda { margin-top: .75rem; }

.cal-agenda-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .25rem .25rem .5rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: .25rem;
}

.cal-agenda-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    /* Comfortably tappable: a 44px target is the smallest that is reliably hit with a thumb. */
    min-height: 2.75rem;
    padding: .5rem .25rem;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    background: none;
    text-align: left;
}

.cal-agenda-item:last-child { border-bottom: none; }

.cal-agenda-item.cancelled .cal-agenda-title {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.cal-agenda-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 3rem;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.cal-agenda-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cal-agenda-title { font-size: .85rem; font-weight: 600; }

/* The month controls wrap rather than overflow on a narrow screen. */
@media (max-width: 575.98px) {
    .cal-month-label { min-width: 6.5rem; font-size: .875rem; }
}

/* ----------------------------------------------------------------------------
   Voice calls: the incoming-call prompt and the in-call bar
---------------------------------------------------------------------------- */
.call-ring {
    position: fixed;
    top: calc(var(--admin-topbar-height) + .75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090; /* above the notification toasts: a ringing call outranks everything */
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    padding: .875rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .22);
    animation: call-ring-in .18s ease-out;
}

@keyframes call-ring-in {
    from { transform: translate(-50%, -.75rem); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.call-ring-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--admin-btn-bg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.call-ring-avatar img { width: 100%; height: 100%; object-fit: cover; }

.call-ring-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.call-ring-name { font-weight: 700; font-size: .9rem; }
.call-ring-sub { font-size: .75rem; color: var(--bs-secondary-color); }

.call-ring-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Flat fills, no gradients: green answers, red hangs up - the one place in this UI where colour
   carries the whole meaning, so it must not be subtle. */
.call-btn-accept,
.call-btn-accept:hover {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}

.call-btn-decline,
.call-btn-decline:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.call-btn-muted,
.call-btn-muted:hover {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Video stage. Sits above the page but below the call bar, which stays reachable at all times -
   losing the hang-up button behind a full-screen video is the classic mistake here. */
.call-stage {
    position: fixed;
    inset: 0;
    bottom: 5rem;
    z-index: 1080;
    background: #0b0d10;
    padding: 1rem;
    display: flex;
}

.call-stage.minimised {
    inset: auto 1.25rem 5rem auto;
    width: 18rem;
    height: 11rem;
    padding: .375rem;
    border-radius: var(--admin-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35);
}

#call-video-stage {
    flex: 1;
    display: grid;
    gap: .5rem;
    min-width: 0;
    /* Rows must share the stage's height. Left at the default (auto) they size to content, and a
       tile whose only child is a height:100% video resolves to nothing - a black screen. */
    grid-auto-rows: 1fr;
    min-height: 0;
    grid-template-columns: 1fr;
}

/* Tile count comes from JS, which owns these nodes; the layout follows it. */
#call-video-stage[data-tiles="2"] { grid-template-columns: repeat(2, 1fr); }
#call-video-stage[data-tiles="3"],
#call-video-stage[data-tiles="4"] { grid-template-columns: repeat(2, 1fr); }
#call-video-stage[data-tiles="5"],
#call-video-stage[data-tiles="6"] { grid-template-columns: repeat(3, 1fr); }
#call-video-stage[data-tiles="7"],
#call-video-stage[data-tiles="8"],
#call-video-stage[data-tiles="9"] { grid-template-columns: repeat(3, 1fr); }

.call-tile {
    position: relative;
    background: #16191e;
    border-radius: var(--admin-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.call-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Your own preview is mirrored, because that is what people expect of a self-view. */
.call-tile-self video { transform: scaleX(-1); }

/* Presentation layout while a screen is shared: the screen takes the top three quarters, full width and shown
   whole (never cropped); cameras sit in a strip beneath. */
#call-video-stage[data-screen="1"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
}

#call-video-stage[data-screen="1"] .call-tile-screen {
    grid-column: 1 / -1;
    grid-row: span 3;
    order: -1;
}

.call-tile-screen video { object-fit: contain; background: #000; }

/* A raised hand on someone's video tile. */
.call-tile.hand-raised::after {
    content: "\270B";
    position: absolute;
    top: .4rem;
    right: .5rem;
    z-index: 1;
    padding: .1rem .4rem;
    border-radius: .75rem;
    background: rgba(0, 0, 0, .55);
    font-size: .9rem;
}

.call-tile-name {
    position: absolute;
    left: .5rem;
    bottom: .4rem;
    z-index: 1;
    padding: .1rem .45rem;
    border-radius: .75rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .7rem;
    max-width: calc(100% - 1rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-stage-toggle {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
}

.call-bar {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1085;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100vw - 2rem);
    padding: .5rem .75rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: 2rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.call-bar-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.call-bar-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #198754;
    animation: call-bar-pulse 1.6s ease-in-out infinite;
}

@keyframes call-bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.call-bar-who {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    max-width: 16rem;
}

/* Who is on the call: overlapping faces, then the full roster on demand. */
.call-bar-roster-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    min-width: 0;
}

.call-avatars { display: inline-flex; }

.call-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--admin-btn-bg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
    /* Ring in the bar's own background so the stack reads as separate faces. */
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.call-avatars .call-avatar + .call-avatar { margin-left: -.5rem; }

.call-avatar img { width: 100%; height: 100%; object-fit: cover; }

.call-avatar-more {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Speaking: a brand ring, not a colour change - it must be legible at 1.5rem and must not imply
   an error or a warning. */
.call-avatar.speaking {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--admin-brand);
}

.call-roster {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 17rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: .5rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.call-roster-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .25rem;
}

.call-avatar-sm { width: 1.375rem; height: 1.375rem; font-size: .5rem; }

.call-roster-name {
    flex: 1;
    min-width: 0;
    font-size: .8rem;
}

.call-roster-state {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.call-roster-state-incall { color: #198754; }
.call-roster-state-ringing { color: var(--admin-brand); }
.call-roster-state-declined { color: #dc3545; }

.call-bar-error {
    font-size: .7rem;
    color: #dc3545;
    max-width: 14rem;
}

.call-bar-actions { display: flex; gap: .375rem; }

@media (prefers-reduced-motion: reduce) {
    .call-ring { animation: none; }
    .call-bar-dot { animation: none; }
}

@media (max-width: 575.98px) {
    .call-bar-who { display: none; }
}

/* ----------------------------------------------------------------------------
   Notification alert toasts (top-right; the chat toast owns the bottom-right)
---------------------------------------------------------------------------- */
.notif-toast-stack {
    position: fixed;
    top: calc(var(--admin-topbar-height) + .75rem);
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
}

.notif-toast {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
    padding: .75rem;
    animation: notif-toast-in .2s ease-out;
}

@keyframes notif-toast-in {
    from { transform: translateX(1rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notif-toast-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1;
}

.notif-toast-title {
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.25;
}

/* Two-line clamp: enough to tell what arrived, never enough to take over the screen. */
.notif-toast-text {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-toast-open {
    align-self: flex-start;
    margin-top: .25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--admin-brand);
    font-size: .78rem;
    font-weight: 600;
}

.notif-toast-open:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .notif-toast { animation: none; }
}

/* Rows-per-page chooser, the one thing TablePager adds to the shared .mobile-pager format. */
.mobile-pager-size {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: 0;
}

.mobile-pager-size .form-select {
    width: auto;
    min-width: 4rem;
}

@media (max-width: 575.98px) {
    .mobile-pager { flex-wrap: wrap; justify-content: center; }
}

.chat-toast-header {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.chat-toast-heading {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1;
}

.chat-toast-name {
    font-weight: 700;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-toast-sub {
    font-size: .7rem;
    color: var(--bs-secondary-color, #6b7280);
}

.chat-toast-body {
    margin: .5rem 0 .65rem;
    font-size: .8125rem;
    color: var(--bs-body-color);
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-toast-error {
    font-size: .75rem;
    color: var(--bs-danger, #dc3545);
    margin-bottom: .5rem;
}

.chat-toast-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.chat-toast-reply {
    flex: 1;
    border-radius: 1.2rem;
}

.chat-toast-send {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-btn-bg);
    border: none;
    color: #fff;
}

.chat-toast-send:hover:not(:disabled),
.chat-toast-send:focus {
    background: var(--admin-btn-hover);
    color: #fff;
}

.chat-toast-send:disabled {
    opacity: .45;
}

.chat-toast-open {
    display: block;
    width: 100%;
    margin-top: .55rem;
    padding: 0;
    background: none;
    border: none;
    font-size: .75rem;
    color: var(--admin-brand);
    text-align: center;
}

.chat-attachment-image {
    max-width: 100%;
    max-height: 18rem;
    border-radius: .6rem;
    display: block;
    margin-bottom: .35rem;
}

.chat-attachment-video {
    max-width: 100%;
    max-height: 18rem;
    border-radius: .6rem;
    display: block;
    margin-bottom: .35rem;
    background: #000;
}

.chat-attachment-document {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    background: var(--admin-content-bg);
    border: 1px solid var(--admin-sidebar-border);
    margin-bottom: .35rem;
    min-width: 12rem;
    max-width: 100%;
    font-size: .85rem;
    text-decoration: none;
    color: inherit;
}

.chat-message-row.mine .chat-attachment-document {
    background: rgba(255, 255, 255, .16);
    border-color: transparent;
    color: #fff;
}

.chat-attachment-doc-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-message-row.mine .chat-attachment-doc-icon {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.chat-attachment-doc-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.chat-attachment-doc-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-attachment-doc-size {
    font-size: .7rem;
    opacity: .7;
}

.chat-attachment-doc-download {
    font-size: .8rem;
    opacity: .6;
    flex-shrink: 0;
}

.chat-attachment-document:hover .chat-attachment-doc-download {
    opacity: 1;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--admin-sidebar-border);
    background: var(--bs-body-bg, #fff);
}

.chat-composer-tools {
    display: flex;
    align-items: center;
    gap: .15rem;
    position: relative;
}

.chat-composer .btn-icon {
    width: 2.75rem;
    height: 2.75rem;
}

.chat-composer-input {
    flex: 1;
    resize: none;
    max-height: 7rem;
    min-height: 2.75rem;
    border-radius: 1.4rem;
    padding: .6rem 1rem;
    background: var(--admin-content-bg);
    border-color: transparent;
}

.chat-composer-input:focus {
    background: var(--bs-body-bg);
    border-color: var(--admin-brand);
    box-shadow: none;
}

.chat-send-btn {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-btn-bg);
    border: none;
    color: #fff;
}

.chat-send-btn:hover:not(:disabled),
.chat-send-btn:focus {
    background: var(--admin-btn-hover);
    color: #fff;
}

.chat-send-btn:disabled {
    opacity: .45;
}

.chat-file-input {
    display: none;
}

.chat-upload-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 1rem;
    padding: .5rem .75rem;
    border-radius: var(--admin-radius);
    background: var(--admin-content-bg);
    border: 1px solid var(--admin-sidebar-border);
    font-size: .8125rem;
}

.chat-upload-status-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-upload-status-error {
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), .08);
    border-color: rgba(var(--bs-danger-rgb, 220, 53, 69), .35);
    color: var(--bs-danger, #dc3545);
}

.btn-close-sm {
    padding: .25rem;
    font-size: .65rem;
}

/* --- Conversation details modal --- */
.chat-details-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .5rem 0 1.25rem;
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.chat-details-subtitle {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85rem;
}

.chat-details-section {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.chat-details-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.chat-details-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.chat-details-heading {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .75rem;
}

.chat-details-empty {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85rem;
    margin: 0;
}

.chat-details-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.chat-details-info-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.chat-details-info-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-details-info-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-break: break-word;
}

.chat-details-info-label {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.chat-details-member-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.chat-details-member {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem;
    border-radius: var(--admin-radius);
}

.chat-details-member:hover {
    background: var(--admin-content-bg);
}

.chat-details-member-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.25;
}

.chat-details-member-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-details-member-sub {
    font-size: .8rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-details-admin-badge {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .15rem .45rem;
    border-radius: 1rem;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
}

.chat-details-member-remove {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--bs-danger, #dc3545);
}

.chat-details-member-promote {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--admin-brand);
}

.chat-details-member-demote {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--bs-warning, #d97706);
}

/* Editable group avatar (admins) - hover overlay with a camera icon over the hero avatar. */
.chat-details-avatar-editable {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.chat-details-avatar-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.chat-details-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
}

.chat-details-avatar-editable:hover .chat-details-avatar-overlay,
.chat-details-avatar-editable:focus-within .chat-details-avatar-overlay {
    opacity: 1;
}

.chat-details-edit-btn {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--bs-secondary-color, #6b7280);
}

.chat-details-description {
    font-size: .8125rem;
    color: var(--bs-body-color);
    white-space: pre-wrap;
    word-break: break-word;
    text-align: center;
    max-width: 20rem;
}

.chat-details-edit {
    width: 100%;
    max-width: 22rem;
    text-align: left;
}

.chat-details-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
}

.chat-details-media-item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--admin-radius);
    overflow: hidden;
    background: var(--admin-content-bg);
}

.chat-details-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-details-media-video {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.25rem;
}

.chat-details-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.chat-details-file {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .65rem;
    border-radius: var(--admin-radius);
    background: var(--admin-content-bg);
    color: inherit;
    text-decoration: none;
}

.chat-details-file:hover {
    background: var(--admin-brand-soft);
}

.chat-details-file-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: var(--admin-radius);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-details-file-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.chat-details-file-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-details-file-size {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.chat-emoji-picker {
    position: absolute;
    bottom: 3.25rem;
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .15rem;
    padding: .5rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

.chat-emoji-choice {
    border: none;
    background: transparent;
    font-size: 1.15rem;
    padding: .25rem;
    border-radius: .35rem;
    cursor: pointer;
}

.chat-emoji-choice:hover {
    background: var(--admin-nav-hover-bg);
}

.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bs-secondary-color, #6b7280);
    padding: 2rem 1rem;
}

.chat-empty-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: .75rem;
}

.chat-empty-state-main {
    flex: 1;
}

.chat-user-picker {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-height: 20rem;
    overflow-y: auto;
}

.chat-user-picker-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem;
    border: 1px solid transparent;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.chat-user-picker-item:hover {
    background: var(--admin-nav-hover-bg);
}

.chat-user-picker-item.selected {
    border-color: var(--admin-brand);
    background: var(--admin-brand-soft);
}

@media (max-width: 767.98px) {
    .chat-page {
        height: calc(100dvh - var(--admin-topbar-height) - 1rem);
        min-height: 0;
        border-radius: var(--admin-radius);
    }

    .chat-sidebar {
        width: 100%;
        border-right: none;
    }

    .chat-sidebar-hidden-mobile,
    .chat-main-hidden-mobile {
        display: none;
    }

    .chat-messages {
        padding: 1rem .75rem .75rem;
    }

    .chat-bubble {
        max-width: 85%;
    }

    .chat-composer {
        padding: .6rem .75rem;
        /* Keep the send button clear of the iOS home-indicator area. */
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0));
    }
}

/* ============================================================================
   Searchable select (select2-style dropdown)
   ========================================================================== */
.searchable-select {
    position: relative;
}

.searchable-select-toggle {
    width: 100%;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-select-toggle:disabled {
    background-color: var(--bs-secondary-bg);
    cursor: default;
    opacity: .65;
}

.searchable-select-placeholder {
    color: var(--bs-secondary-color, #6b7280);
}

.searchable-select-value i {
    margin-right: .5rem;
    color: var(--admin-brand);
}

.searchable-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.searchable-select-menu {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
    overflow: hidden;
}

.searchable-select-search {
    position: relative;
    padding: .5rem;
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.searchable-select-search i {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
    pointer-events: none;
}

.searchable-select-search .form-control {
    padding-left: 2rem;
    background: var(--admin-content-bg);
    border-color: transparent;
}

.searchable-select-search .form-control:focus {
    background: var(--bs-body-bg);
    border-color: var(--admin-brand);
    box-shadow: none;
}

.searchable-select-options {
    max-height: 15rem;
    overflow-y: auto;
    padding: .25rem;
}

.searchable-select-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .65rem;
    min-height: 2.5rem;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    text-align: left;
    font-size: .875rem;
    color: var(--bs-body-color);
    cursor: pointer;
}

.searchable-select-option:hover {
    background: var(--admin-nav-hover-bg);
}

.searchable-select-option.selected {
    background: var(--admin-brand-soft);
    font-weight: 600;
}

.searchable-select-option i:first-child {
    color: var(--admin-brand);
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}

.searchable-select-option-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-select-check {
    font-size: .7rem;
    color: var(--admin-brand);
    flex-shrink: 0;
}

.searchable-select-empty {
    padding: .75rem;
    text-align: center;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6b7280);
}

/* Pager wraps on narrow screens */
.pagination {
    flex-wrap: wrap;
    row-gap: .5rem;
}

/* ----------------------------------------------------------------------------
   Broadcasts / Communications
---------------------------------------------------------------------------- */
/* Compose modal side panels (channels / recipients / delivery) */
.bc-panel {
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.bc-panel-head {
    padding: .625rem .875rem;
    font-weight: 700;
    font-size: .8rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
}

.bc-panel-body {
    padding: .875rem;
}

/* "All users" summary tile */
.bc-allusers {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
}

.bc-allusers > i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Scrollable, server-searched people picker */
.bc-picker {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius-sm);
    padding: .25rem;
}

.bc-picker-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    margin: 0;
    padding: .4rem .5rem;
    border-radius: var(--admin-radius-sm);
    cursor: pointer;
}

.bc-picker-item:hover {
    background: var(--admin-nav-hover-bg);
}

/* Rich HTML body rendered in the detail modal */
.bc-body {
    font-size: .875rem;
    line-height: 1.6;
    word-break: break-word;
}

.bc-body img {
    max-width: 100%;
    height: auto;
}

/* Clickable list rows */
.cursor-pointer {
    cursor: pointer;
}

/* ----------------------------------------------------------------------------
   Utilities missing from the theme (were referenced but undefined — caused the
   navbar notification body to overflow instead of truncating).
---------------------------------------------------------------------------- */
.min-width-0 { min-width: 0 !important; }
.text-500 { color: var(--bs-secondary-color) !important; }

/* Full-page notifications feed: clamp the preview to two lines; the full message
   opens in the notification detail modal. */
.notification-feed-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
   Notification detail modal — attachment rows
---------------------------------------------------------------------------- */
.bc-attachment {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease-out, border-color .12s ease-out;
}

.bc-attachment:hover {
    background: var(--admin-nav-hover-bg);
    border-color: var(--admin-brand);
    color: inherit;
}

.bc-attachment-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1rem;
}

/* ----------------------------------------------------------------------------
   Delivery timeline chart (compose wizard live progress)
---------------------------------------------------------------------------- */
.bc-chart {
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius);
    padding: 1rem;
    background: var(--bs-body-bg);
}

/* Height comes from the viewBox aspect ratio: the SVG carries axis text now, so it must scale
   uniformly rather than being stretched to a fixed pixel height. */
.bc-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.bc-chart-empty {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.bc-chart-grid {
    stroke: var(--bs-border-color);
    stroke-width: 1;
    opacity: .5;
    vector-effect: non-scaling-stroke;
}

.bc-chart-axis {
    stroke: var(--bs-border-color);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bc-chart-tick {
    fill: var(--bs-secondary-color);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.bc-chart-axis-title {
    fill: var(--bs-secondary-color);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bc-chart-marker {
    fill: var(--admin-brand);
    stroke: var(--bs-body-bg);
    stroke-width: 2;
}

.bc-chart-callout {
    fill: var(--bs-body-color);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A just-created communication row (a resend). Flat brand tint that fades out, so the new entry is
   findable at a glance without permanently marking it - a resend copy is otherwise identical to the
   row it came from. */
.bc-row-new > td {
    animation: bc-row-new-flash 2.5s ease-out;
}

@keyframes bc-row-new-flash {
    0%, 35% { background-color: var(--admin-brand-soft); }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .bc-row-new > td {
        animation: none;
        background-color: var(--admin-brand-soft);
    }
}

/* Per-channel delivery breakdown bars (delivery-status view of a dispatched communication) */
.bc-bars {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.bc-bar-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    align-items: center;
    gap: .625rem;
}

.bc-bar-label {
    font-size: .8rem;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.bc-bar {
    display: flex;
    height: .75rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.bc-bar-seg { display: block; height: 100%; }

.bc-bar-value {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bc-chart-area-total { fill: var(--bs-tertiary-bg); }
.bc-chart-area-sent  { fill: var(--admin-brand-soft); }
.bc-chart-line-sent {
    fill: none;
    stroke: var(--admin-brand);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.bc-chart-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.bc-kpi {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem .625rem;
    border-radius: var(--admin-radius-sm);
    background: var(--bs-tertiary-bg);
}

.bc-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.bc-kpi-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    color: var(--bs-secondary-color);
}

.bc-swatch {
    width: .625rem;
    height: .625rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.bc-swatch-sent    { background: var(--admin-brand); }
.bc-swatch-pending { background: var(--bs-border-color); }
.bc-swatch-failed  { background: #dc3545; }
.bc-swatch-skipped { background: var(--bs-secondary-color); }

@media (max-width: 575.98px) {
    .bc-chart-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------------------
   Compose wizard — step indicator, audience cards, review
---------------------------------------------------------------------------- */
.bc-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bc-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 0;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 600;
}

.bc-step:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    background: var(--bs-border-color);
    border-radius: 2px;
}

.bc-step-dot {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

.bc-step.active { color: var(--admin-brand); }
.bc-step.active .bc-step-dot {
    background: var(--admin-brand);
    border-color: var(--admin-brand);
    color: #fff;
}

.bc-step.done .bc-step-dot {
    background: var(--admin-brand-soft);
    border-color: var(--admin-brand);
    color: var(--admin-brand);
}

.bc-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 575.98px) {
    .bc-step-label { display: none; }
}

/* Student audiences: the "which students" choice, each option with the number it reaches. */
.bc-status-options {
    display: grid;
    gap: .5rem;
}

.bc-status-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.bc-status-option:hover {
    border-color: var(--admin-brand);
}

.bc-status-option.selected {
    border-color: var(--admin-brand);
    background: var(--admin-brand-soft);
}

.bc-status-option .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.bc-status-option > span:nth-child(2) {
    flex-grow: 1;
}

.bc-status-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .bc-status-option { transition: none; }
}

.bc-audience-card {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    text-align: left;
    padding: .875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius);
    background: var(--bs-body-bg);
    color: inherit;
    cursor: pointer;
    transition: border-color .12s ease-out, background-color .12s ease-out;
}

.bc-audience-card:hover { background: var(--admin-nav-hover-bg); }

.bc-audience-card.selected {
    border-color: var(--admin-brand);
    background: var(--admin-brand-soft);
}

.bc-audience-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.05rem;
}

.bc-review {
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.bc-review-row {
    display: flex;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
}

.bc-review-row:last-child { border-bottom: 0; }

.bc-review-key {
    flex: 0 0 7rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 600;
}

.bc-review-val { flex: 1 1 auto; min-width: 0; }

.bc-preview {
    max-height: 220px;
    overflow-y: auto;
}

/* Chart transitions honour reduced-motion (the SVG updates are discrete anyway; this guards any
   future CSS transition on the data paths). */
@media (prefers-reduced-motion: reduce) {
    .bc-chart-line-sent,
    .bc-chart-area-sent,
    .bc-chart-area-total { transition: none !important; }
}

/* ---------------- Short courses: public application pages ---------------- */

.apply-shell {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.apply-hero h1 {
    font-size: 1.75rem;
    font-weight: 800;
}

.apply-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.apply-meta i {
    width: 1rem;
    color: var(--admin-brand);
}

.apply-fee {
    font-weight: 700;
    color: var(--admin-brand);
    white-space: nowrap;
}

.apply-section {
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.apply-photo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.apply-photo-frame {
    flex: 0 0 auto;
    width: 6rem;
    height: 8rem;
    border-radius: var(--admin-radius-sm);
    border: 1px dashed var(--admin-sidebar-border);
    background: var(--admin-content-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-secondary-color);
}

.apply-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apply-index {
    display: inline-block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--admin-brand);
    background: var(--admin-brand-soft);
    border-radius: var(--admin-radius-sm);
    padding: .25rem 1rem;
    font-variant-numeric: tabular-nums;
}

.apply-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Application page (/apply/{id}): a header band, then the form beside a sticky course summary. */
.ap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    grid-template-areas: "main aside";
    gap: 2rem;
    align-items: start;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.ap-main { grid-area: main; min-width: 0; }

.ap-aside {
    grid-area: aside;
    position: sticky;
    top: calc(var(--admin-topbar-height) + 1.5rem);
    display: grid;
    gap: 1rem;
}

.ap-summary,
.ap-next,
.ap-form {
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
}

.ap-summary { overflow: hidden; }

.ap-summary-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ap-summary-body { padding: 1.25rem; }

.ap-summary-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: .125rem;
}

.ap-summary-fee {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--admin-brand);
    font-variant-numeric: tabular-nums;
    margin-bottom: 1rem;
}

.ap-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--admin-sidebar-border);
    font-size: .875rem;
}

.ap-facts dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.ap-facts dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.ap-next { padding: 1.25rem; }

.ap-next-steps {
    list-style: none;
    counter-reset: ap-next;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .875rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.ap-next-steps li {
    counter-increment: ap-next;
    position: relative;
    padding-left: 2rem;
}

.ap-next-steps li::before {
    content: counter(ap-next);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-next-steps strong { color: var(--bs-body-color); }

/* The form: one surface, sections divided by rules rather than separate cards. */
.ap-photo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--admin-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.ap-photo:hover {
    border-color: var(--admin-brand);
    background: var(--admin-nav-hover-bg);
}


.ap-photo:has(:focus-visible) {
    outline: 2px solid var(--admin-brand);
    outline-offset: 2px;
}

.ap-photo.is-invalid { border-color: var(--bs-danger); }
.ap-photo.is-disabled { cursor: default; opacity: .7; }

.ap-photo-text { min-width: 0; }

.ap-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--admin-sidebar-border);
    background: var(--admin-content-bg);
    border-radius: 0 0 var(--admin-radius) var(--admin-radius);
}

.ap-submit p { flex: 1 1 18rem; }

.ap-form-closed {
    padding: 3rem 2rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .ap-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "aside";
        gap: 1.25rem;
        padding-top: 1.25rem;
    }

    .ap-aside { position: static; }

    /* On phones the header already gives the dates and venue; keep the summary to the picture and fee. */
    .ap-summary-image { max-height: 11rem; }
    .ap-facts { display: none; }
    .ap-summary-fee { margin-bottom: 0; }
}

@media (max-width: 575.98px) {
    .ap-step { padding: 1.25rem; }
    .ap-submit { padding: 1.25rem; }
    .ap-submit .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-photo { transition: none; }
}

/* Public application pages: a band in the brand colour (flat), then the page. .lp-container sets horizontal padding
   only, so vertical spacing is set with the combined selector (a bare .ap-layout would be overridden). */
.ap-band {
    background: var(--admin-brand);
    color: #fff;
    padding: 1.75rem 0 2rem;
}

.ap-band.has-image {
    position: relative;
    isolation: isolate;
    background-image: var(--ap-band-image);
    background-size: cover;
    background-position: center;
}

.ap-band.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--admin-brand) 82%, transparent);
}

/* As on the home hero: on wide screens the shade covers the text column, then fades out so the right of the
   photo stays clear. Phones keep the full shade. Whatever sits on the right (the figures on /apply) carries its
   own small shade instead. */
@media (min-width: 992px) {
    .ap-band.has-image::before {
        right: auto;
        width: min(100%, calc(max(0px, (100% - var(--lp-max-width)) / 2) + 1.5rem + 46rem + 3rem + 14rem));
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 14rem), transparent);
    }

    .ap-band.has-image .ap-band-copy {
        max-width: 46rem;
    }

    .ap-band.has-image .ap-stats {
        padding: .875rem 1.125rem;
        border-radius: var(--admin-radius);
        background: color-mix(in srgb, var(--admin-brand) 82%, transparent);
    }
}

.ap-band-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
}

.ap-band-copy {
    flex: 1 1 26rem;
    min-width: 0;
}

.ap-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .8);
}

.ap-crumbs li + li::before {
    content: "/";
    margin-right: .375rem;
    opacity: .6;
}

.ap-crumbs a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ap-band-kicker {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    margin-bottom: .375rem;
}

.ap-band-title {
    color: #fff;
    font-size: clamp(1.625rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: .875rem;
}

.ap-band-lead {
    color: rgba(255, 255, 255, .88);
    max-width: 42rem;
    margin: 0;
}

.ap-band-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ap-band-meta li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: .875rem;
    font-weight: 500;
}

.ap-band-image {
    flex: 0 0 auto;
    width: min(22rem, 100%);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--admin-radius);
    border: 3px solid rgba(255, 255, 255, .25);
}

.ap-band .ap-stats > div {
    border-left-color: rgba(255, 255, 255, .6);
}

.ap-band .ap-stats dt {
    color: rgba(255, 255, 255, .8);
}

.lp-container.ap-layout {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.lp-container.ap-catalogue {
    padding-top: 1.75rem;
    padding-bottom: 4rem;
}

/* Wizard: stepper, one step at a time, review, and the Back/Continue bar. */
.ap-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    counter-reset: none;
}

.ap-stepper li {
    position: relative;
}

/* The connecting line between dots. */
.ap-stepper li + li::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: calc(50% + 1.25rem);
    left: calc(-50% + 1.25rem);
    height: 2px;
    background: var(--bs-border-color);
}

.ap-stepper li.done + li::before,
.ap-stepper li.done + li.current::before {
    background: var(--admin-brand);
}

.ap-stepper button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    border: 0;
    background: none;
    padding: 0;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-weight: 600;
}

.ap-stepper button:disabled {
    cursor: default;
}

.ap-stepper-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.ap-stepper li.current .ap-stepper-dot,
.ap-stepper li.done .ap-stepper-dot {
    border-color: var(--admin-brand);
    background: var(--admin-brand);
    color: #fff;
}

.ap-stepper li.current button,
.ap-stepper li.done button {
    color: var(--bs-body-color);
}

.ap-stepper li.done button:not(:disabled):hover .ap-stepper-label {
    text-decoration: underline;
}

.ap-stepper button:focus-visible .ap-stepper-dot {
    outline: 2px solid var(--admin-brand);
    outline-offset: 2px;
}

.ap-form:focus {
    outline: none;
}

.ap-step {
    padding: 1.75rem 2rem 1.5rem;
}

/* Goal-gradient progress: where you are, what is left, and a bar that starts with the course already done. */
.ap-progress-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: .5rem;
}

.ap-progress-left {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.ap-progress {
    height: .375rem;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}

.ap-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--admin-brand);
    transition: width .35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .ap-progress-fill { transition: none; }
}

.ap-step-count {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--admin-brand);
    margin-bottom: .25rem;
}

.ap-step-title {
    font-size: 1.375rem;
    font-weight: 800;
    margin-bottom: .25rem;
}

.ap-step-lead {
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
}

.ap-review {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
}

.ap-review-photo {
    width: 6rem;
    height: 8rem;
    object-fit: cover;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-sidebar-border);
}

.ap-review-list {
    flex: 1 1 18rem;
    margin: 0;
}

.ap-review-list > div {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: baseline;
    padding: .625rem 0;
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.ap-review-list dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

.ap-review-list dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .ap-stepper-label { font-size: .6875rem; }
    .ap-review-list > div { grid-template-columns: minmax(0, 1fr) auto; }
    .ap-review-list dt { grid-column: 1 / -1; }
    .ap-band-image { display: none; }
}

/* Course catalogue (/apply): header stats, search/sort toolbar, the card grid, and "already applied" links. */
.ap-stats {
    display: flex;
    gap: 1.5rem;
}

.ap-stats > div {
    border-left: 3px solid var(--admin-brand);
    padding-left: .75rem;
}

.ap-stats dt {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

.ap-stats dd {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ap-catalogue {
    padding-top: 1.75rem;
    padding-bottom: 4rem;
}

.ap-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-bottom: .75rem;
}

.ap-search {
    position: relative;
    flex: 1 1 18rem;
    max-width: 28rem;
}

.ap-search i {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.ap-search .form-control {
    padding-left: 2.5rem;
}

.ap-help {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

.ap-help-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ap-help-card:hover,
.ap-help-card:focus-visible {
    border-color: var(--admin-brand);
    box-shadow: 0 0 0 3px var(--admin-brand-soft);
    color: inherit;
}

.ap-help-card > i {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ap-help-card strong {
    display: block;
    margin-bottom: .125rem;
}

.ap-help-card span span {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .ap-stats { gap: 1rem; }
    .ap-search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-help-card { transition: none; }
}

/* Students page: filter tabs with counts, initials avatar, clickable rows. */
.sc-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.sc-filter-tabs button {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .8125rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: 999px;
}

.sc-filter-tabs button:hover {
    border-color: var(--admin-brand);
}

.sc-filter-tabs button.active {
    background: var(--admin-brand);
    border-color: var(--admin-brand);
    color: #fff;
}

.sc-filter-tabs button:focus-visible {
    outline: 2px solid var(--admin-brand);
    outline-offset: 2px;
}

.sc-filter-count {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

.sc-avatar {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: .75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sc-students tbody tr {
    cursor: pointer;
}

.sc-students tbody tr:focus-visible {
    outline: 2px solid var(--admin-brand);
    outline-offset: -2px;
}

/* Statement of account (student Statement page, staff Students view). */
.statement-figure {
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-sm);
    padding: .5rem .75rem;
    height: 100%;
}

.statement-figure span {
    display: block;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.statement-figure strong {
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}

.statement-figure.is-due {
    border-color: var(--admin-brand);
    background: var(--admin-brand-soft);
}

.statement-table td,
.statement-table th {
    font-variant-numeric: tabular-nums;
}

.statement-table tfoot td {
    border-top: 2px solid var(--bs-border-color);
}

/* Printing a statement: just the page content, no app chrome. */
@media print {
    .admin-sidebar,
    .admin-sidebar-backdrop,
    .admin-topbar,
    .admin-footer,
    .no-print {
        display: none !important;
    }

    .admin-main {
        margin-left: 0 !important;
    }

    .admin-content {
        padding: 0 !important;
    }

    .statement .card,
    .card {
        border: 0;
        box-shadow: none;
    }
}

/* Administration > Public site: picture cards, upload box. */
.ps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.ps-grid-small {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.ps-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-sm);
    overflow: hidden;
    background: var(--bs-body-bg);
}

.ps-card.is-hidden .ps-thumb img {
    opacity: .45;
}

.ps-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--admin-content-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-thumb.is-square {
    aspect-ratio: 1;
}

.ps-thumb.is-light {
    background: #fff;
}

.ps-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-thumb.is-light img {
    object-fit: contain;
}

.ps-thumb-empty {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.ps-order {
    position: absolute;
    top: .5rem;
    left: .5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ps-card-body {
    padding: .625rem .75rem 0;
    font-size: .875rem;
}

.ps-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .625rem .75rem;
    margin-top: auto;
}

.ps-empty {
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--admin-radius-sm);
    padding: 1.5rem;
    text-align: center;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.ps-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-content-bg);
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}

.ps-upload:hover {
    border-color: var(--admin-brand);
}

.ps-upload:has(:focus-visible) {
    outline: 2px solid var(--admin-brand);
    outline-offset: 2px;
}

.ps-upload.is-invalid {
    border-color: var(--bs-danger);
}

.ps-upload img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Front desk payments: payer card, figures, receipt thumbnail and viewer. */
.fd-payer {
    display: flex;
    gap: .875rem;
    align-items: center;
    padding: .875rem;
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-content-bg);
}

.fd-payer-photo {
    flex: 0 0 auto;
    width: 4rem;
    height: 5.25rem;
    object-fit: cover;
    border-radius: var(--admin-radius-sm);
}

.fd-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.fd-figures > div {
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-sm);
    padding: .5rem .625rem;
}

.fd-figures dt {
    font-size: .75rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.fd-figures dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.fd-receipt-thumb {
    flex: 0 0 auto;
    width: 5rem;
    height: 5rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-content-bg);
    border: 1px dashed var(--admin-sidebar-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-secondary-color);
}

.fd-receipt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fd-receipt-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22rem;
    max-height: 70vh;
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-content-bg);
    overflow: auto;
}

.fd-receipt-view img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.fd-receipt-view iframe {
    width: 100%;
    height: 70vh;
    border: 0;
}

.fd-after {
    padding: .75rem .875rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

/* Staff: applicant photo in the detail modal */
.applicant-photo {
    width: 7.5rem;
    height: 10rem;
    object-fit: cover;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-sidebar-border);
}

/* ---------------- Short courses: student portal ---------------- */

.student-nav {
    display: flex;
    gap: .25rem;
}

.student-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: var(--admin-radius-sm);
    color: var(--admin-nav-color);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
}

.student-nav-link:hover {
    background: var(--admin-nav-hover-bg);
    color: var(--admin-nav-color);
}

.student-nav-link.active {
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
}

@media (max-width: 575.98px) {
    .student-nav-link span {
        display: none;
    }
}

.student-chat {
    padding: 1rem;
}

.chat-readonly-notice {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1rem;
    border-top: 1px solid var(--admin-sidebar-border);
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

/* ---------------- Short courses: dashboard ---------------- */

/* One hue for every short-course mark; the dark step is validated against the dark surface (dataviz). */
:root {
    --sc-bar: #0d76ba;
    --sc-bar-track: rgba(13, 118, 186, .12);
}

[data-bs-theme="dark"] {
    --sc-bar: #2596d6;
    --sc-bar-track: rgba(37, 150, 214, .18);
}

.sc-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: .8rem;
}

.sc-tile-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.sc-meter {
    height: 8px;
    border-radius: 4px;
    background: var(--sc-bar-track);
    overflow: hidden;
}

.sc-meter-fill {
    height: 100%;
    background: var(--sc-bar);
    border-radius: 0 4px 4px 0;
}

.sc-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.sc-bar-row {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) 1fr;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
    padding: 2px 4px;
    border-radius: var(--admin-radius-sm);
}

.sc-bar-row:hover {
    background: var(--admin-nav-hover-bg);
}

.sc-bar-label {
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-bar-track {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.sc-bar {
    display: block;
    height: 14px;
    min-width: 2px;
    background: var(--sc-bar);
    border-radius: 0 4px 4px 0;
}

.sc-bar-value {
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Period / measure switch: a flat segmented control. */
.sc-segmented {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius-sm);
    background: var(--bs-body-bg);
}

.sc-segmented button {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .625rem;
    border-radius: calc(var(--admin-radius-sm) - 2px);
    white-space: nowrap;
}

.sc-segmented button:hover:not(:disabled) {
    background: var(--admin-nav-hover-bg);
    color: var(--bs-body-color);
}

.sc-segmented button.active {
    background: var(--admin-brand);
    color: #fff;
}

.sc-segmented button:focus-visible {
    outline: 2px solid var(--admin-brand);
    outline-offset: 1px;
}

/* Change on the previous period: arrow + sign carry the direction, colour only reinforces it. */
.sc-change { font-variant-numeric: tabular-nums; }
.sc-change.up { color: var(--bs-success-text-emphasis); }
.sc-change.down { color: var(--bs-danger-text-emphasis); }

/* Trend: single-series columns on a recessive grid. */
.sc-trend {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .5rem;
    row-gap: .375rem;
}

.sc-trend-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
    margin: -.4em 0;
    font-size: .6875rem;
    color: var(--bs-secondary-color);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sc-trend-plot {
    position: relative;
    height: 200px;
}

.sc-trend-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.sc-trend-grid span {
    border-top: 1px solid var(--bs-border-color);
    opacity: .6;
}

.sc-trend-grid span:last-child { opacity: 1; }

/* The line: 2px whatever the plot's size (non-scaling stroke), round joins, a faint flat fill beneath. */
.sc-trend-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.sc-trend-line {
    fill: none;
    stroke: var(--sc-bar);
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.sc-trend-area {
    fill: var(--sc-bar);
    opacity: .1;
}

/* Hover layer: equal columns, no gaps, so each centre is exactly its point. */
.sc-trend-hits {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.sc-trend-hits li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    cursor: default;
}

.sc-trend-hits li:focus-visible {
    outline: 2px solid var(--admin-brand);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Vertical guide through the hovered point. */
.sc-trend-hits li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--bs-secondary-color);
    opacity: 0;
}

.sc-trend-hits li:hover::before,
.sc-trend-hits li:focus-visible::before {
    opacity: .35;
}

/* Marker: 8px, with a 2px surface ring so it separates from the line. */
.sc-trend-dot {
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sc-bar);
    box-shadow: 0 0 0 2px var(--bs-body-bg);
    transform: translate(-50%, 50%);
    opacity: 0;
}

.sc-trend-hits.show-dots .sc-trend-dot {
    opacity: 1;
}

.sc-trend-hits li:hover .sc-trend-dot,
.sc-trend-hits li:focus-visible .sc-trend-dot {
    opacity: 1;
    width: 10px;
    height: 10px;
}

.sc-trend-tip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 2;
    display: none;
    flex-direction: column;
    padding: .375rem .625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius-sm);
    background: var(--bs-body-bg);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
    font-size: .75rem;
    white-space: nowrap;
    pointer-events: none;
}

.sc-trend-tip.start { left: 0; transform: translateY(-100%); }
.sc-trend-tip.end { left: auto; right: 0; transform: translateY(-100%); }

.sc-trend-hits li:hover .sc-trend-tip,
.sc-trend-hits li:focus-visible .sc-trend-tip { display: flex; }

.sc-trend-x {
    display: flex;
    gap: 2px;
    font-size: .6875rem;
    color: var(--bs-secondary-color);
}

.sc-trend-x span {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .sc-trend-dot { transition: none; }
}

/* ---------------- Short courses: course pictures and home-page listing ---------------- */




.home-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.25rem;
}

.home-course-card {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.home-course-card:hover,
.home-course-card:focus-within {
    border-color: var(--admin-brand);
    box-shadow: 0 0 0 3px var(--admin-brand-soft);
}

.home-course-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--admin-brand-soft);
}

.home-course-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-brand);
    font-size: 2.5rem;
}

.home-course-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem 1.25rem 1.25rem;
}

.home-course-description {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Compact card (home page): title kept to two lines, one line for when it starts. */
.home-course-card.is-compact .home-course-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-course-when {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

.home-course-when i {
    color: var(--admin-brand);
    margin-right: .25rem;
}

[data-bs-theme="dark"] .home-course-when i {
    color: inherit;
}

.home-course-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.home-course-empty {
    text-align: center;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    padding: 2.5rem 1rem;
}

/* Picture at the top of a course card on /apply */
.course-card-image {
    display: block;
    width: calc(100% + 2.5rem);
    margin: -1.25rem -1.25rem 1rem;
    aspect-ratio: 16 / 9;
    max-height: 13rem;
    object-fit: cover;
    border-radius: var(--admin-radius) var(--admin-radius) 0 0;
}

/* Staff: course picture field and list thumbnail */
.course-image-picker {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.course-image-frame {
    flex: 0 0 auto;
    width: 10rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--admin-radius-sm);
    border: 1px dashed var(--admin-sidebar-border);
    background: var(--admin-content-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-secondary-color);
}

.course-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: .75rem;
}

@media (max-width: 575.98px) {
    .course-image-picker {
        flex-direction: column;
    }
}


/* ---------------- Public site: landing page ---------------- */

/* The public pages' content width; the header shades (home hero, page band) line up with it. */
:root {
    --lp-max-width: 90rem;
}

.lp-container {
    max-width: var(--lp-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Top bar: section links + Sign in */
.lp-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: 1.5rem;
}

.lp-nav-link {
    padding: .375rem .75rem;
    border-radius: var(--admin-radius-sm);
    color: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    opacity: .85;
}

.lp-nav-link:hover {
    background: var(--admin-nav-hover-bg);
    color: inherit;
    opacity: 1;
}

/* .admin-topbar .btn inherits the bar's colour; the filled sign-in button needs its own. */
.lp-topbar .btn-primary,
.lp-topbar .btn-primary:hover {
    color: #fff;
}

@media (max-width: 767.98px) {
    .lp-nav {
        display: none;
    }
}

/* The page fills the screen so the footer sits at the bottom even when there is little content. */
.lp-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--admin-topbar-height));
}

.lp-page > .lp-footer {
    margin-top: auto;
}

/* Hero */
.lp-hero {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--admin-sidebar-border);
    padding: 4rem 0 3.5rem;
}

.lp-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: center;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.lp-eyebrow-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--admin-accent);
}

.lp-title {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
}

.lp-lead {
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
    max-width: 36rem;
    margin-bottom: 2rem;
}

.lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
}

.lp-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.lp-facts i {
    color: var(--admin-brand);
    margin-right: .45rem;
}

.lp-hero-media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-sidebar-border);
}

.lp-hero-embed {
    position: relative;
    overflow: hidden;
}

.lp-hero-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lp-featured {
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 48px -32px rgba(16, 24, 40, .35);
}

.lp-featured-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--admin-brand-soft);
}

.lp-featured-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-brand);
    font-size: 3rem;
}

.lp-featured-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.lp-featured-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    margin-bottom: .35rem;
}

.lp-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--admin-radius-lg);
    background: var(--admin-brand-soft);
}

.lp-hero-placeholder img {
    width: 35%;
    max-width: 10rem;
}

/* Sections */
.lp-section {
    padding: 4rem 0;
    background: var(--admin-content-bg);
    scroll-margin-top: var(--admin-topbar-height);
}

.lp-section-alt {
    background: var(--bs-body-bg);
    border-top: 1px solid var(--admin-sidebar-border);
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.lp-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: .5rem 1rem;
    margin-bottom: 2rem;
}

.lp-section-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: .25rem;
}

.lp-section-lead {
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

/* How it works */
.lp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.lp-step p,
.lp-feature p {
    color: var(--bs-secondary-color);
    font-size: .9375rem;
    margin-bottom: 0;
}

.lp-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--admin-brand);
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
}

.lp-step-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: .75rem 0 .4rem;
}

.lp-step .lp-step-title {
    margin-top: 0;
}

/* Why study with us */
.lp-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.lp-feature {
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    padding: 1.5rem;
}

/* Footer */
.lp-footer {
    background: var(--bs-body-bg);
    border-top: 1px solid var(--admin-sidebar-border);
    padding-top: 2.5rem;
}

.lp-footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.lp-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    font-size: .9375rem;
}

.lp-footer-links a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.lp-footer-links a:hover {
    color: var(--admin-brand);
}

.lp-footer-bottom {
    border-top: 1px solid var(--admin-sidebar-border);
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 991.98px) {
    .lp-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Stacked, the featured course would sit directly above the same course in the list. */
    .lp-hero-visual:has(.lp-featured) {
        display: none;
    }

    .lp-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .lp-container {
        padding: 0 1rem;
    }

    .lp-hero {
        padding: 2.5rem 0 2rem;
    }

    .lp-section {
        padding: 3rem 0;
    }

    .lp-steps {
        grid-template-columns: 1fr;
    }

    .lp-actions .btn {
        flex: 1 1 100%;
    }
}


/* =====================================================================================================
   Public home page (Home.razor) - in the style of the university's main website. Flat colours only:
   photos sit under a flat brand-colour shade, never a gradient. Movement lives in js/site.js.
   ===================================================================================================== */

.site {
    --sx-navy: var(--admin-brand);
    --sx-accent: var(--admin-accent);
    --sx-deep: color-mix(in srgb, var(--admin-brand) 55%, #000);
    --sx-heading-font: "Poppins", "Inter", system-ui, sans-serif;
}

.site h1, .site h2, .site h3 {
    font-family: var(--sx-heading-font);
}

/* ---------- Header over the hero: see-through until the page scrolls ---------- */
body:has([data-site-hero]) .lp-topbar {
    transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
}

body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
}

body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .admin-topbar-brand,
body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-nav-link,
body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .btn-icon {
    color: #fff;
}

body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-nav-link:hover {
    background: rgba(255, 255, 255, .14);
}

/* ---------- Hero slider ---------- */
.sx-hero {
    position: relative;
    margin-top: calc(-1 * var(--admin-topbar-height));
    height: clamp(34rem, 88vh, 48rem);
    overflow: hidden;
    background: var(--sx-deep);
    color: #fff;
    isolation: isolate;
}

.sx-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 0s linear 1s;
}

.sx-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease;
    z-index: 1;
}

.sx-slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
}

.sx-slide.is-active .sx-slide-bg {
    animation: sx-zoom 12s ease-out forwards;
}

.sx-slide-plain {
    background-color: var(--sx-navy);
    transform: none;
}

/* The KTU crest, very faint, when there is no photo. */
.sx-slide-plain::after {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -8rem;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    background: url("../logo.png") center / contain no-repeat;
    opacity: .08;
}

.sx-slide-shade {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--sx-deep) 62%, transparent);
}

/* On wide screens the shade only sits behind the text column (the container's left gutter, the 46rem of copy and
   a little breathing room), then fades out over the next 14rem; the right of the photo stays clear. Phones keep
   the full shade: the text spans it. */
@media (min-width: 992px) {
    .sx-slide-shade {
        right: auto;
        width: min(100%, calc(max(0px, (100% - var(--lp-max-width)) / 2) + 1.5rem + 46rem + 3rem + 14rem));
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 14rem), transparent);
    }

    /* The see-through header runs over the clear part of the photo too. */
    body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-nav-link,
    body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-signin,
    body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-brand-text {
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }
}

.sx-slide-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: calc(var(--admin-topbar-height) + 1rem);
    /* Room below for the dots and the tiles that overlap the hero's bottom edge. */
    padding-bottom: 7.5rem;
}

.sx-slide-copy > * {
    max-width: 46rem;
}

.sx-slide.is-active .sx-slide-copy > * {
    animation: sx-rise .8s ease-out both;
}

.sx-slide.is-active .sx-slide-copy > :nth-child(2) { animation-delay: .12s; }
.sx-slide.is-active .sx-slide-copy > :nth-child(3) { animation-delay: .24s; }
.sx-slide.is-active .sx-slide-copy > :nth-child(4) { animation-delay: .36s; }

.sx-eyebrow {
    color: var(--sx-accent);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.sx-slide-shade + .sx-slide-copy .sx-eyebrow {
    /* On photos the orange sits on a dark shade; keep it readable. */
    color: color-mix(in srgb, var(--sx-accent) 80%, #fff);
}

.sx-title {
    color: #fff;
    font-size: clamp(2rem, 4.4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.sx-lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    color: rgba(255, 255, 255, .92);
    margin-bottom: 1.75rem;
}

/* Course slides: dates, duration, venue and fee as chips; the description kept to three lines. */
.sx-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: -.5rem 0 1.75rem;
}

.sx-facts li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: .9375rem;
    font-weight: 600;
}

.sx-slide .sx-lead {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Large, bold labels: white on the orange accent passes contrast as large text. */
.sx-btn-accent,
.sx-btn-ghost {
    font-size: 1.1875rem;
    font-weight: 700;
    padding: .7rem 1.6rem;
    border-radius: var(--admin-radius-sm);
}

.sx-btn-accent {
    background: var(--sx-accent);
    border: 2px solid var(--sx-accent);
    color: #fff;
}

.sx-btn-accent:hover,
.sx-btn-accent:focus-visible {
    background: color-mix(in srgb, var(--sx-accent) 85%, #000);
    border-color: color-mix(in srgb, var(--sx-accent) 85%, #000);
    color: #fff;
}

.sx-btn-ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .85);
    color: #fff;
}

.sx-btn-ghost:hover,
.sx-btn-ghost:focus-visible {
    background: #fff;
    color: var(--sx-navy);
}

.sx-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(0, 0, 0, .22);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}

.sx-arrow:hover,
.sx-arrow:focus-visible {
    background: var(--sx-accent);
    border-color: var(--sx-accent);
}

.sx-arrow.is-prev { left: 1.25rem; }
.sx-arrow.is-next { right: 1.25rem; }

.sx-dots {
    position: absolute;
    left: 50%;
    bottom: 5.25rem;
    z-index: 2;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sx-dots [data-slide-dot] {
    width: .75rem;
    height: .75rem;
    padding: 0;
    border-radius: 999px;
    border: 2px solid #fff;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
}

.sx-dots [data-slide-dot][aria-current="true"] {
    width: 2rem;
    background: #fff;
}

.sx-pause {
    width: 1.75rem;
    height: 1.75rem;
    margin-left: .25rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6);
    background: transparent;
    color: #fff;
    font-size: .625rem;
}

.sx-pause .fa-play { display: none; }
.sx-pause[aria-pressed="true"] .fa-play { display: inline; }
.sx-pause[aria-pressed="true"] .fa-pause { display: none; }

.sx-hero :focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@keyframes sx-zoom {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@keyframes sx-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Quick links over the hero's edge: one deep-navy dock split by hairlines, not separate cards ---------- */
.lp-container.sx-tiles {
    position: relative;
    z-index: 5;
    margin-top: -3.25rem;
}

.sx-dock {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--sx-deep);
    border-radius: var(--admin-radius);
    box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(16, 24, 40, .55);
    overflow: hidden;
}

.sx-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 6.5rem;
    padding: 1.25rem 1.125rem;
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .2s ease;
}

.sx-tile + .sx-tile {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12);
}

/* The accent bar that slides in along the bottom edge. */
.sx-tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--sx-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.sx-tile:hover,
.sx-tile:focus-visible {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.sx-tile:hover::after,
.sx-tile:focus-visible::after {
    transform: scaleX(1);
}

.sx-tile:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

.sx-tile-icon {
    flex: none;
    color: var(--sx-accent);
    font-size: 1.5rem;
    width: 1.75rem;
    text-align: center;
    transition: transform .2s ease;
}

.sx-tile:hover .sx-tile-icon {
    transform: translateY(-2px);
}

/* ---------- Sections ---------- */
.sx-section {
    position: relative;
    padding: 5.5rem 0;
}

.sx-tiles + .sx-section {
    padding-top: 4.5rem;
    margin-top: -2rem;
}

.sx-alt {
    background: var(--admin-content-bg);
}

/* A faint geometric motif behind sections, as on the university site. */
.sx-pattern {
    background-color: var(--bs-body-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 32 32'%3E%3Cpath fill='%23004c84' fill-opacity='0.035' d='M8 0h2v26h-2zM16 0h2v26h-2zM12 0h2v9h-2zM12 17h2v9h-2zM0 8h26v2h-26zM0 16h26v2h-26zM8 12h10v2h-10zM0 0h10v2h-10zM16 0h10v2h-10zM0 4h10v2h-10zM16 4h10v2h-10zM0 20h10v2h-10zM16 20h10v2h-10zM0 24h10v2h-10zM16 24h10v2h-10zM0 8h2v10h-2zM4 8h2v10h-2zM20 8h2v10h-2zM24 8h2v10h-2z'/%3E%3C/svg%3E");
    background-size: 3.25rem;
}

[data-bs-theme="dark"] .sx-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 32 32'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M8 0h2v26h-2zM16 0h2v26h-2zM12 0h2v9h-2zM12 17h2v9h-2zM0 8h26v2h-26zM0 16h26v2h-26zM8 12h10v2h-10zM0 0h10v2h-10zM16 0h10v2h-10zM0 4h10v2h-10zM16 4h10v2h-10zM0 20h10v2h-10zM16 20h10v2h-10zM0 24h10v2h-10zM16 24h10v2h-10zM0 8h2v10h-2zM4 8h2v10h-2zM20 8h2v10h-2zM24 8h2v10h-2z'/%3E%3C/svg%3E");
}

.sx-heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.sx-heading::after {
    content: "";
    display: block;
    width: 4rem;
    height: 4px;
    margin-top: .875rem;
    border-radius: 2px;
    background: var(--sx-accent);
}

.sx-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.sx-section-head .sx-heading {
    margin-bottom: .5rem;
}

.sx-section-lead {
    color: var(--bs-secondary-color);
    font-size: 1.0625rem;
    margin: 0;
}

.sx-lead-dark {
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
}

.sx-kicker {
    color: var(--sx-accent);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.sx-btn {
    font-weight: 600;
    padding: .625rem 1.25rem;
    border-radius: var(--admin-radius-sm);
}

.sx-btn-outline {
    border: 2px solid var(--sx-navy);
    color: var(--sx-navy);
    background: transparent;
}

.sx-btn-outline:hover,
.sx-btn-outline:focus-visible {
    background: var(--sx-navy);
    color: #fff;
}

[data-bs-theme="dark"] .sx-btn-outline {
    border-color: #fff;
    color: #fff;
}

/* ---------- Welcome + at a glance ---------- */
.sx-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
}

.sx-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    gap: .625rem;
}

.sx-checks li {
    display: flex;
    gap: .625rem;
    align-items: baseline;
}

.sx-checks i {
    color: var(--sx-accent);
}

.sx-welcome-side {
    position: relative;
}

.sx-welcome-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--admin-radius-lg);
}

.sx-glance {
    position: relative;
    background: var(--sx-navy);
    color: #fff;
    border-radius: var(--admin-radius-lg);
    padding: 1.75rem 2rem;
    margin: -5.5rem 0 0 2.5rem;
    box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(16, 24, 40, .5);
}

.sx-glance.is-alone {
    margin: 0;
}

.sx-glance-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.sx-glance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
}

.sx-glance-grid > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.sx-glance-grid dd {
    margin: 0;
    font-family: var(--sx-heading-font);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: color-mix(in srgb, var(--sx-accent) 75%, #fff);
    font-variant-numeric: tabular-nums;
}

.sx-glance-grid dt {
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
}

/* ---------- Courses ---------- */
.sx-reveal-wrap {
    display: flex;
}

.sx-reveal-wrap > .home-course-card {
    flex: 1 1 auto;
    transition: transform .2s ease, box-shadow .2s ease;
}

.sx-reveal-wrap > .home-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem -1.25rem rgba(16, 24, 40, .45);
}

.home-course-card .home-course-image {
    transition: transform .6s ease;
}

.home-course-card:hover .home-course-image {
    transform: scale(1.04);
}

/* ---------- How it works over the building drawing ---------- */
.sx-steps-section {
    background: var(--bs-body-bg);
    overflow: hidden;
}

.sx-illustration {
    position: absolute;
    inset: auto 0 0 0;
    height: 85%;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: .16;
    pointer-events: none;
}

[data-bs-theme="dark"] .sx-illustration {
    filter: invert(1);
    opacity: .08;
}

.sx-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.sx-steps li {
    position: relative;
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-top: 4px solid var(--sx-navy);
    border-radius: var(--admin-radius);
    padding: 1.5rem;
    box-shadow: 0 .75rem 1.75rem -1.25rem rgba(16, 24, 40, .35);
}

.sx-steps li:hover {
    border-top-color: var(--sx-accent);
}

.sx-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--sx-navy);
    color: #fff;
    font-family: var(--sx-heading-font);
    font-weight: 700;
    margin-bottom: 1rem;
}

.sx-steps h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.sx-steps p {
    color: var(--bs-secondary-color);
    margin: 0;
}

/* ---------- Why study with us + spotlight ---------- */
.sx-why {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: center;
}

.sx-why.is-plain {
    grid-template-columns: minmax(0, 1fr);
}

.sx-why.is-plain .sx-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sx-spotlight {
    position: relative;
    margin: 0;
}

/* A flat accent block behind the photo's corner. */
.sx-spotlight::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    bottom: -1.25rem;
    width: 55%;
    height: 55%;
    border-radius: var(--admin-radius-lg);
    background: var(--sx-accent);
    z-index: 0;
}

.sx-spotlight img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--admin-radius-lg);
}

.sx-features {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.sx-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.sx-feature-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in srgb, var(--sx-navy) 12%, transparent);
    color: var(--sx-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

[data-bs-theme="dark"] .sx-feature-icon {
    color: var(--admin-brand-bright, #38b6f1);
}

.sx-feature h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: .125rem 0 .25rem;
}

.sx-feature p {
    color: var(--bs-secondary-color);
    margin: 0;
}

/* ---------- Gallery + lightbox ---------- */
.sx-gallery {
    columns: 3 16rem;
    column-gap: 1rem;
}

.sx-gallery-item {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    border-radius: var(--admin-radius);
    overflow: hidden;
    break-inside: avoid;
    background: var(--admin-content-bg);
    cursor: zoom-in;
}

.sx-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s ease;
}

.sx-gallery-item:hover img,
.sx-gallery-item:focus-visible img {
    transform: scale(1.05);
}

.sx-gallery-item:focus-visible {
    outline: 3px solid var(--sx-accent);
    outline-offset: 2px;
}

.sx-gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: .625rem .875rem;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    text-align: left;
    transform: translateY(100%);
    transition: transform .3s ease;
}

.sx-gallery-item:hover .sx-gallery-caption,
.sx-gallery-item:focus-visible .sx-gallery-caption {
    transform: none;
}

.sx-lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(5, 10, 20, .94);
    color: #fff;
}

.sx-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sx-lightbox::backdrop {
    background: rgba(5, 10, 20, .6);
}

.sx-lightbox figure {
    margin: 0;
    text-align: center;
}

.sx-lightbox img {
    max-width: 88vw;
    max-height: 80vh;
    border-radius: var(--admin-radius-sm);
}

.sx-lightbox figcaption {
    margin-top: .75rem;
    font-weight: 600;
}

.sx-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
}

/* ---------- Closing call to action ---------- */
.sx-cta {
    position: relative;
    padding: 6rem 0;
    background: var(--sx-navy);
    color: #fff;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.sx-cta-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.sx-cta.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--sx-deep) 72%, transparent);
}

.sx-cta h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 800;
    margin-bottom: .75rem;
}

.sx-cta p {
    font-size: 1.1875rem;
    color: rgba(255, 255, 255, .9);
    margin: 0 auto 2rem;
    max-width: 40rem;
}

/* ---------- Footer: small ---------- */
.sx-footer {
    background: var(--sx-deep);
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
}

.sx-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
}

.sx-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    color: #fff;
    font-family: var(--sx-heading-font);
    font-weight: 700;
    text-decoration: none;
}

.sx-footer-brand:hover {
    color: #fff;
}

.sx-footer-logo {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: .15rem;
}

.sx-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.sx-footer-links a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.sx-footer-links a:hover,
.sx-footer-links a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.sx-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: .875rem;
    padding-bottom: 1rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .6);
}

/* ---------- Reveal on scroll (only once site.js is running) ---------- */
.site-js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: calc(var(--d, 0) * 90ms);
}

.site-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.site-js [data-reveal].sx-instant {
    transition: none;
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1199.98px) {
    /* Five links: three across, then two wider ones, so the second row has no empty cell. */
    .sx-dock { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sx-tile { grid-column: span 2; min-height: 5rem; }
    .sx-tile:nth-child(n + 4) { grid-column: span 3; }
    .sx-tile:nth-child(4) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
    .sx-tile:nth-child(5) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .12); }
    .sx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .sx-slide .sx-lead { -webkit-line-clamp: 2; }
    .sx-welcome,
    .sx-why { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .sx-why.is-plain .sx-features { grid-template-columns: minmax(0, 1fr); }
    .sx-arrow { display: none; }
    .sx-cta-bg { background-attachment: scroll; }
}

@media (max-width: 575.98px) {
    .sx-hero { height: clamp(36rem, 92svh, 44rem); }
    .sx-dots { bottom: 4.75rem; }
    .sx-slide-copy { padding-bottom: 7.25rem; }
    .sx-title { font-size: clamp(1.75rem, 8vw, 2.25rem); margin-bottom: .75rem; }
    .sx-slide .sx-lead { display: none; }
    .sx-facts { margin: 0 0 1.25rem; gap: .375rem; }
    .sx-facts li { font-size: .8125rem; padding: .25rem .6rem; }
    .lp-container.sx-tiles { margin-top: -3rem; }
    .sx-tile { flex-direction: column; justify-content: center; gap: .5rem; min-height: 5.5rem; padding: .875rem .375rem; font-size: .8125rem; text-align: center; }
    .sx-tile-icon { font-size: 1.25rem; width: auto; }
    .sx-section { padding: 3.75rem 0; }
    .sx-steps { grid-template-columns: minmax(0, 1fr); }
    .sx-glance { margin: -3rem .75rem 0; padding: 1.5rem; }
    .sx-btn-accent, .sx-btn-ghost { font-size: 1.125rem; padding: .625rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sx-slide, .sx-slide.is-active { transition: none; }
    .sx-slide.is-active .sx-slide-bg,
    .sx-slide.is-active .sx-slide-copy > * { animation: none; }
    .sx-slide-bg { transform: none; }
    .sx-tile, .sx-tile::after, .sx-tile-icon, .sx-arrow, .sx-gallery-item img, .sx-gallery-caption,
    .home-course-card .home-course-image, .sx-reveal-wrap > .home-course-card { transition: none; }
    .sx-cta-bg { background-attachment: scroll; }
}

/* =====================================================================================================
   Public header (NoAuthLayout): taller than the admin bar, a proper brand block, bold links, Sign in and
   Apply now; on phones the links fold into a menu (js/site.js toggles body.lp-nav-open).
   ===================================================================================================== */

.site-shell {
    --admin-topbar-height: 4.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* The page grows; the footer (in NoAuthLayout) sits at the bottom of the window on short pages. */
.site-shell > #admin-content-root {
    flex: 1 0 auto;
}

.site-shell .lp-topbar {
    padding: 0;
}

.lp-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    height: 100%;
}

.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.lp-brand:hover {
    color: inherit;
}

.lp-brand-logo {
    flex: 0 0 auto;
    width: 2.875rem;
    height: 2.875rem;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: .125rem;
}

.lp-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.lp-brand-text strong {
    font-family: "Poppins", "Inter", system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--admin-brand);
    white-space: nowrap;
}

.lp-brand-text small {
    font-size: .75rem;
    font-weight: 500;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-bs-theme="dark"] .lp-brand-text strong {
    color: #fff;
}

.lp-topbar .lp-nav {
    display: flex;
    align-items: center;
    gap: .125rem;
    margin-left: auto;
}

.lp-topbar .lp-nav-link {
    position: relative;
    padding: .5rem .75rem;
    border-radius: var(--admin-radius-sm);
    color: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    opacity: 1;
}

.lp-topbar .lp-nav-link:hover {
    background: var(--admin-nav-hover-bg);
    color: inherit;
}

/* The current page: an accent bar under the link. */
.lp-topbar .lp-nav-link.active::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .125rem;
    height: 3px;
    border-radius: 2px;
    background: var(--admin-accent);
}

.lp-topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lp-signin,
.lp-apply {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: var(--admin-radius-sm);
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.lp-signin {
    border: 2px solid var(--admin-brand);
    color: var(--admin-brand);
}

.lp-signin:hover,
.lp-signin:focus-visible {
    background: var(--admin-brand);
    color: #fff;
}

[data-bs-theme="dark"] .lp-signin {
    border-color: #fff;
    color: #fff;
}

.lp-apply {
    border: 2px solid var(--admin-accent);
    background: var(--admin-accent);
    color: #fff;
}

.lp-apply:hover,
.lp-apply:focus-visible {
    background: color-mix(in srgb, var(--admin-accent) 85%, #000);
    border-color: color-mix(in srgb, var(--admin-accent) 85%, #000);
    color: #fff;
}

.lp-menu-toggle {
    display: none;
}

/* Over the home page's photo: white text, white outline for Sign in. */
body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-brand-text strong {
    color: #fff;
}

body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-signin {
    border-color: rgba(255, 255, 255, .85);
    color: #fff;
}

body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-signin:hover {
    background: #fff;
    color: var(--admin-brand);
}

body:has([data-site-hero]):not(.site-scrolled):not(.lp-nav-open) .lp-topbar .lp-nav-link:hover {
    background: rgba(255, 255, 255, .14);
}

/* With the phone menu open the header is solid, even over the photo. */
body.lp-nav-open .lp-topbar {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 12px 32px -24px rgba(16, 24, 40, .25);
}

body.lp-nav-open .lp-topbar .btn-icon {
    color: var(--bs-body-color);
}

@media (max-width: 1199.98px) {
    .lp-brand-text small { display: none; }
    .lp-topbar .lp-nav-link { padding: .5rem .5rem; font-size: .875rem; }
}

@media (max-width: 991.98px) {
    .lp-menu-toggle { display: inline-flex; }

    .lp-topbar .lp-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: .5rem 1rem 1rem;
        background: var(--bs-body-bg);
        border-top: 1px solid var(--admin-sidebar-border);
        box-shadow: 0 1rem 2rem -1rem rgba(16, 24, 40, .35);
    }

    body.lp-nav-open .lp-topbar .lp-nav {
        display: flex;
    }

    .lp-topbar .lp-nav .lp-apply {
        justify-content: center;
        margin-top: .75rem;
    }

    .lp-topbar .lp-nav-link {
        padding: .75rem .5rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--admin-sidebar-border);
        border-radius: 0;
    }

    .lp-topbar .lp-nav-link.active::after {
        left: 0;
        right: auto;
        top: .75rem;
        bottom: .75rem;
        width: 3px;
        height: auto;
    }

    .lp-topbar-actions { margin-left: auto; }
}

@media (max-width: 575.98px) {
    .lp-topbar-inner { gap: .5rem; }
    .lp-brand-logo { width: 2.375rem; height: 2.375rem; }
    .lp-brand-text strong { font-size: 1rem; }
    .lp-signin span { display: none; }
    .lp-signin { padding: .45rem .7rem; font-size: .875rem; }
    .lp-topbar-actions > .lp-apply { display: none; }
    .lp-topbar-actions .btn-icon[data-theme-toggle] { display: none; }
}

/* Form controls on the public pages follow the brand colour rather than Bootstrap blue. */
.site-shell .form-control:focus,
.site-shell .form-select:focus {
    border-color: var(--admin-brand);
    box-shadow: 0 0 0 .2rem var(--admin-brand-soft);
}

.site-shell .form-check-input:checked {
    background-color: var(--admin-brand);
    border-color: var(--admin-brand);
}

.site-shell .form-check-input:focus {
    border-color: var(--admin-brand);
    box-shadow: 0 0 0 .2rem var(--admin-brand-soft);
}

@media (prefers-reduced-motion: reduce) {
    .lp-signin, .lp-apply { transition: none; }
}

/* "Apply now" inside the phone menu; the header carries its own on wider screens. */
.lp-topbar .lp-nav .lp-apply {
    display: none;
}

@media (max-width: 575.98px) {
    .lp-topbar .lp-nav .lp-apply { display: inline-flex; }
}

/* Student portal (/student): account banner, figures, course cards. Flat colours only. */
.mc-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1.5rem;
    border-radius: var(--admin-radius-lg);
    background: var(--admin-brand);
    color: #fff;
}

[data-bs-theme="dark"] .mc-hero {
    background: var(--admin-sidebar-bg);
    border: 1px solid var(--admin-sidebar-border);
}

.mc-hero-photo {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .85);
}

.mc-hero-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    font-size: 1.5rem;
    font-weight: 700;
}

.mc-hero-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.mc-hero-kicker {
    margin: 0 0 .15rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .85;
}

.mc-hero-title {
    margin: 0;
    color: inherit;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.mc-hero-sub {
    margin: .25rem 0 0;
    font-size: .875rem;
    opacity: .9;
    overflow-wrap: anywhere;
}

.mc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.mc-hero-btn {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.mc-hero-btn:hover,
.mc-hero-btn:focus-visible {
    background: #fff;
    color: var(--admin-brand);
}

.mc-figure {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.125rem;
    color: inherit;
}

.mc-figure-label {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.mc-figure-value {
    font-size: clamp(1.05rem, 2.6vw, 1.4rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.mc-figure-value small {
    font-size: .65em;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.mc-figure-owing {
    border-left: 4px solid var(--bs-danger);
}

.mc-figure-owing .mc-figure-value {
    color: var(--bs-danger);
}

.mc-course {
    border-left: 4px solid var(--admin-brand);
    overflow: hidden;
}

.mc-course-inactive {
    border-left-color: var(--bs-border-color);
}

.mc-course-inactive .mc-course-title {
    color: var(--bs-secondary-color);
}

.mc-course-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
}

.mc-course-main {
    padding: 1.25rem 1.5rem;
    min-width: 0;
}

.mc-course-side {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background: var(--bs-tertiary-bg);
    border-left: 1px solid var(--bs-border-color);
}

.mc-course-title {
    margin: 0 0 .15rem;
    font-size: 1.2rem;
    line-height: 1.3;
}

.mc-index {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.mc-facts {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem 1.25rem;
    font-size: .8125rem;
}

.mc-facts li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
}

.mc-facts i {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
}

.mc-fact-label {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.mc-about {
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.mc-about-title,
.mc-side-title {
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Keeps the author's paragraphs and line breaks; long text reads comfortably at ~70 characters a line. */
.mc-about-text {
    margin: 0;
    max-width: 70ch;
    font-size: .875rem;
    line-height: 1.65;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.mc-about-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mc-about-toggle {
    margin-top: .35rem;
    font-weight: 600;
    text-decoration: none;
}

.mc-side-amount {
    font-size: 1.25rem;
    font-weight: 700;
}

.mc-side-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1rem;
}

@media (max-width: 991.98px) {
    .mc-course-grid { grid-template-columns: minmax(0, 1fr); }
    .mc-course-side { border-left: 0; border-top: 1px solid var(--bs-border-color); }
    .mc-side-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .mc-course-main { padding: 1rem; }
    .mc-course-side { padding: 1rem; }
}

.mc-progress {
    height: .5rem;
}

.mc-progress .progress-bar:not(.bg-success) {
    background: var(--admin-brand);
}

.mc-payments {
    margin-top: .75rem;
    font-size: .8125rem;
}

.mc-payments summary {
    cursor: pointer;
    font-weight: 600;
}

.mc-payments li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.mc-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.4rem;
}

@media (max-width: 575.98px) {
    .mc-hero { padding: 1.25rem 1rem; }
    .mc-hero-actions { width: 100%; }
    .mc-figure { padding: .75rem; }
}

/* Public service pages: "Get my letter" (/admission/find) and "Check a letter" (/verify). Flat colours only. */
.sv-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.sv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
}

.sv-main {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.sv-card {
    padding: 1.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-lg);
    box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .05);
}

.sv-card-title {
    margin: 0 0 .25rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.sv-card-lead {
    margin: 0 0 1.25rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.sv-form {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.sv-input {
    position: relative;
    flex: 1 1 16rem;
}

.sv-input i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--admin-brand);
    pointer-events: none;
}

.sv-input .form-control {
    height: 3.25rem;
    padding-left: 2.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: var(--admin-radius);
}

.sv-input .sv-input-code {
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sv-input .form-control::placeholder {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.sv-input .form-control[aria-invalid="true"] {
    border-color: var(--bs-danger);
}

.sv-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: end;
}

.sv-label {
    display: block;
    margin-bottom: .375rem;
    font-size: .8125rem;
    font-weight: 600;
}

.sv-letter-facts {
    padding: 1.5rem 1.5rem 0;
}

.sv-letter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.sv-letter-preview {
    width: 100%;
    height: min(80vh, 60rem);
    border: 0;
    border-top: 1px solid var(--admin-sidebar-border);
    background: var(--bs-tertiary-bg);
}

.sv-submit {
    height: 3.25rem;
    padding-inline: 1.5rem;
    border-radius: var(--admin-radius);
    font-weight: 600;
}

.sv-error {
    margin: .75rem 0 0;
    font-size: .875rem;
    color: var(--bs-danger);
}

.sv-done {
    padding: 1rem 0 .5rem;
    text-align: center;
}

.sv-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.5rem;
}

.sv-side {
    padding: 1.5rem;
    background: var(--admin-brand-soft);
    border-radius: var(--admin-radius-lg);
}

.sv-side-title {
    margin: 0 0 1rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--admin-brand);
}

.sv-side-text {
    margin: 0;
    font-size: .875rem;
}

.sv-steps {
    counter-reset: sv-step;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.sv-steps li {
    counter-increment: sv-step;
    position: relative;
    padding-left: 2.5rem;
    font-size: .875rem;
}

.sv-steps li::before {
    content: counter(sv-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--admin-brand);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.sv-steps strong {
    display: block;
}

.sv-steps span {
    color: var(--bs-secondary-color);
}

.sv-note {
    display: flex;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(13, 118, 186, .18);
    font-size: .8125rem;
}

.sv-note i {
    margin-top: .2rem;
    color: var(--admin-brand);
}

.sv-result {
    overflow: hidden;
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-lg);
}

.sv-verdict {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.5rem;
    color: #fff;
}

.sv-verdict > i {
    font-size: 2rem;
    flex: 0 0 auto;
}

.sv-verdict strong {
    display: block;
    font-size: 1.125rem;
}

.sv-verdict span {
    font-size: .875rem;
    opacity: .92;
}

.sv-result-good .sv-verdict { background: #15803d; }
.sv-result-sent .sv-verdict { background: var(--admin-brand); }
.sv-result-bad .sv-verdict { background: #b91c1c; }

.sv-record {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem;
}

.sv-record-photo {
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
}

.sv-record-photo img {
    display: block;
    width: 8.5rem;
    height: 10.5rem;
    object-fit: cover;
    border-radius: var(--admin-radius);
    border: 1px solid var(--admin-sidebar-border);
}

.sv-record-photo figcaption {
    margin-top: .375rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.sv-record-list {
    flex: 1 1 18rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    align-content: start;
}

.sv-record-name,
.sv-record-wide {
    grid-column: 1 / -1;
}

.sv-record-list dt {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.sv-record-list dd {
    margin: .125rem 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sv-record-name dd {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.25;
}

.sv-record-foot {
    margin: 0;
    padding: .875rem 1.5rem;
    border-top: 1px solid var(--admin-sidebar-border);
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 991.98px) {
    .sv-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .sv-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .sv-page { padding-top: 1.25rem; }
    .sv-card, .sv-side { padding: 1.25rem; }
    .sv-submit { width: 100%; }
    .sv-letter-facts { padding: 1.25rem 1.25rem 0; }
    .sv-letter-actions { padding: 1rem 1.25rem 1.25rem; }
    .sv-letter-actions .btn { flex: 1 1 100%; }
    .sv-record { padding: 1.25rem; }
    .sv-record-photo { width: 100%; }
    .sv-record-photo img { margin: 0 auto; }
    .sv-verdict { padding: 1rem 1.25rem; }
}

/* Student import (Offering > Applicants > Import): the three steps, the file picker, and the check table. */
.si-steps {
    counter-reset: si-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.si-steps li {
    counter-increment: si-step;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 2.5rem;
    position: relative;
}

.si-steps li::before {
    content: counter(si-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--admin-brand);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.si-steps strong {
    display: block;
}

.si-steps span {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.si-drop {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--admin-radius);
    cursor: pointer;
    color: var(--admin-brand);
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.si-drop:hover,
.si-drop:focus-within {
    border-color: var(--admin-brand);
    background: var(--admin-brand-soft);
}

.si-drop.has-file {
    border-style: solid;
    border-color: var(--admin-brand);
}

.si-drop span span {
    color: var(--bs-body-color);
}

.si-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    margin-bottom: .75rem;
}

.si-table {
    max-height: 55vh;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius-sm);
}

.si-table thead th {
    position: sticky;
    top: 0;
    background: var(--bs-body-bg);
    z-index: 1;
}

.si-row-bad td {
    background: color-mix(in srgb, var(--bs-danger) 6%, transparent);
}

.si-errors {
    margin: 0;
    padding-left: 1rem;
    color: var(--bs-danger);
}

@media (max-width: 575.98px) {
    .si-steps li { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .si-drop { transition: none; }
}

/* Chat: who a person is to you - a small role label (icon + word) in the role's colour: Staff in the brand
   colour, Classmate in the accent, Student neutral. Flat colours, sentence case, no pill. */
.chat-role {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    margin-left: .4rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

.chat-role i {
    font-size: .7rem;
}

.chat-role-staff {
    color: var(--admin-brand);
}

.chat-role-classmate {
    color: color-mix(in srgb, var(--admin-accent) 82%, #000);
}

[data-bs-theme="dark"] .chat-role-classmate {
    color: color-mix(in srgb, var(--admin-accent) 78%, #fff);
}

.chat-role-student {
    color: var(--bs-secondary-color);
}

.chat-role.icon-only {
    gap: 0;
}

/* Top bar: the role opens the status line under the name ("Staff · Online"). */
.chat-header-presence .chat-role {
    margin-left: 0;
}

.chat-header-presence {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem .35rem;
}

.chat-header-sep {
    color: var(--bs-secondary-color);
}

.chat-main-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* In the conversation list the row spreads name and time apart; keep the role beside the name, the time right. */
.chat-conversation-top .chat-role {
    margin-left: -.25rem;
    margin-right: auto;
}

/* In the pickers the name takes the room and the tag sits right after it. */
.chat-user-picker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Call bar: sharing / hand / recording states and chips. Flat colours. */
.call-btn-on,
.call-btn-on:hover {
    background: var(--admin-btn-bg) !important;
    border-color: var(--admin-btn-bg) !important;
    color: #fff !important;
}

.call-btn-recording,
.call-btn-recording:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.call-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    padding: .2rem .6rem;
    border: 0;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.call-chip-recording {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}

.call-chip-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #dc3545;
    animation: call-chip-pulse 1.4s ease-in-out infinite;
}

@keyframes call-chip-pulse {
    50% { opacity: .3; }
}

.call-chip-hands {
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    cursor: pointer;
}

.call-roster-hand {
    margin-left: .25rem;
}

@media (prefers-reduced-motion: reduce) {
    .call-chip-dot { animation: none; }
}

/* Narrow screens: the call bar wraps, with its buttons on their own centred row, rather than running off. */
@media (max-width: 575.98px) {
    .call-bar {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 1.25rem;
        row-gap: .5rem;
    }

    .call-bar-actions {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Page header: one look for every signed-in page (Components/Shared/PageHeader.razor) ----------
   Phones first: breadcrumb swapped for a back link, a smaller title that wraps, actions on their own row. */
.page-header {
    margin-bottom: 1.5rem;
}

.page-header-crumbs {
    margin-bottom: .75rem;
}

.page-header-crumbs .breadcrumb {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.page-header-crumbs .breadcrumb-item {
    color: var(--bs-secondary-color);
}

.page-header-crumbs .breadcrumb-item a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.page-header-crumbs .breadcrumb-item a:hover {
    color: var(--admin-brand);
    text-decoration: underline;
}

.page-header-crumbs .breadcrumb-item.active {
    color: var(--bs-body-color);
}

.page-header-back {
    display: none;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    margin: -.5rem 0 .25rem -.25rem;
    padding: 0 .25rem;
    color: var(--admin-brand);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.page-header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.page-header-heading {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    flex: 1 1 20rem;
    min-width: 0;
}

.page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--admin-radius);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.1rem;
}

.page-header-text {
    min-width: 0;
}

.page-header-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .6rem;
}

.page-header-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.page-header-description {
    margin: .25rem 0 0;
    max-width: 48rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

/* Wrappers some pages put round their buttons (grid columns) must not add their own spacing here. */
.page-header-actions > [class*="col-"] {
    padding: 0;
    width: auto;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .page-header {
        margin-bottom: 1.125rem;
    }

    /* A breadcrumb is clutter on a phone: a back link when there is somewhere to go back to, else nothing. */
    .page-header-crumbs {
        display: none;
    }

    .page-header-back {
        display: inline-flex;
    }

    .page-header-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: .95rem;
        border-radius: var(--admin-radius-sm);
    }

    .page-header-title {
        font-size: 1.2rem;
    }

    .page-header-description {
        font-size: .8125rem;
    }

    /* Actions on their own row, full width, big enough to tap. */
    .page-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .page-header-actions > .btn,
    .page-header-actions > a.btn,
    .page-header-actions > [class*="col-"] > .btn,
    .page-header-actions > [class*="col-"] > a.btn,
    .page-header-actions > div > .btn:only-child {
        flex: 1 1 auto;
        min-height: 44px;
        justify-content: center;
    }

    .page-header-actions > [class*="col-"] {
        flex: 1 1 auto;
        display: flex;
    }
}

@media print {
    .page-header-back { display: none !important; }
}

/* A photo in place of the icon (student statement, My courses). */
.page-header-leading {
    flex-shrink: 0;
    display: inline-flex;
}

.page-header-photo {
    width: 3.25rem;
    height: 4.25rem;
    object-fit: cover;
    border-radius: var(--admin-radius-sm);
}

.page-header-photo-round {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.page-header-initials {
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50%;
}

@media (max-width: 575.98px) {
    .page-header-photo { width: 2.75rem; height: 3.5rem; }
    .page-header-photo-round { width: 2.5rem; height: 2.5rem; }
}

/* Phones: a 16px gutter rather than 24px - on a narrow screen every pixel of width is worth having. */
@media (max-width: 575.98px) {
    .admin-content {
        padding: 1rem 1rem 1.5rem;
    }
}

/* =====================================================================================================
   Home page on phones (under 768px). Desktop and tablet keep their own layout; this layer only reshapes the
   page for a thumb: a shorter hero with its text at the bottom, courses you swipe sideways instead of a long
   stack and a compact "how it works" timeline (the bottom tab bar is site-wide: .lp-tabbar). The quick-link tiles
   keep their own layout (three across, then two).
   ===================================================================================================== */
@media (max-width: 767.98px) {
    /* ---- Hero: shorter, text low on the screen, full-width buttons ---- */
    .sx-hero {
        height: clamp(30rem, 76svh, 36rem);
    }

    .sx-slide {
        align-items: flex-end;
    }

    .sx-eyebrow {
        font-size: .75rem;
        margin-bottom: .5rem;
    }

    .sx-title {
        font-size: clamp(1.625rem, 7.5vw, 2.125rem);
        line-height: 1.15;
        margin-bottom: .875rem;
    }

    .sx-slide .sx-lead {
        display: none;
    }

    .sx-facts {
        margin: 0 0 1rem;
        gap: .375rem;
    }

    .sx-facts li {
        font-size: .75rem;
        padding: .2rem .55rem;
    }

    /* Two facts are plenty on a phone. */
    .sx-facts li:nth-child(n + 3) {
        display: none;
    }

    .sx-slide .sx-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    .sx-slide .sx-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        font-size: 1rem;
    }

    /* ---- Sections: tighter rhythm, smaller headings ---- */
    .sx-section {
        padding: 3rem 0;
    }

    .sx-heading {
        font-size: 1.5rem;
    }

    .sx-section-head {
        flex-wrap: wrap;
        gap: .75rem;
        margin-bottom: 1.25rem;
    }

    .sx-section-lead,
    .sx-lead-dark {
        font-size: .9375rem;
    }

    /* ---- Welcome + at a glance ---- */
    .sx-welcome {
        gap: 1.75rem;
    }

    .sx-checks {
        gap: .5rem;
        margin-bottom: 1.25rem;
        font-size: .9375rem;
    }

    .sx-welcome-copy .sx-btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .sx-glance {
        margin: -2rem .5rem 0;
        padding: 1.25rem;
    }

    .sx-glance.is-alone {
        margin: 0;
    }

    .sx-glance-title {
        font-size: 1rem;
        margin-bottom: .875rem;
    }

    .sx-glance-grid {
        gap: 1rem 1.25rem;
    }

    .sx-glance-grid dd {
        font-size: 1.75rem;
    }

    .sx-glance-grid dt {
        font-size: .8125rem;
    }

    /* ---- Courses: a swipeable row - one card and a peek of the next ---- */
    #short-courses .home-course-grid {
        display: flex;
        gap: .875rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 -1rem;
        padding: .25rem 1rem 1rem;
    }

    #short-courses .home-course-grid::-webkit-scrollbar {
        display: none;
    }

    #short-courses .home-course-grid > .sx-reveal-wrap {
        flex: 0 0 82%;
        scroll-snap-align: start;
        scroll-margin-left: 1rem;
    }

    /* ---- How it works: a vertical timeline ---- */
    .sx-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .sx-steps li {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: 1rem;
        padding: 0 0 1.5rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* The line joining one step to the next. */
    .sx-steps li::before {
        content: "";
        position: absolute;
        left: calc(1.25rem - 1px);
        top: 2.75rem;
        bottom: .25rem;
        width: 2px;
        background: var(--admin-sidebar-border);
    }

    .sx-steps li:last-child {
        padding-bottom: 0;
    }

    .sx-steps li:last-child::before {
        display: none;
    }

    .sx-step-number {
        grid-row: span 2;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0;
    }

    .sx-steps h3 {
        font-size: 1rem;
        margin: .45rem 0 .25rem;
    }

    .sx-steps p {
        font-size: .875rem;
    }

    /* ---- Why study with us ---- */
    .sx-why {
        gap: 1.75rem;
    }

    .sx-spotlight::before {
        left: -.5rem;
        bottom: -.5rem;
    }

    .sx-feature-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .sx-feature h3 {
        font-size: 1rem;
    }

    .sx-feature p {
        font-size: .875rem;
    }

    /* ---- Gallery: two columns ---- */
    .sx-gallery {
        columns: 2;
        column-gap: .625rem;
    }

    /* ---- Closing call to action ---- */
    .sx-cta {
        padding: 3.5rem 0;
    }

    .sx-cta h2 {
        font-size: 1.625rem;
    }

    .sx-cta p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .sx-cta .sx-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sx-cta .sx-actions .btn {
        width: 100%;
        justify-content: center;
    }

}

/* ---------- Public site: bottom tab bar on phones (NoAuthLayout) ----------
   Every link of the site - Home, Courses, Apply (raised, in the accent colour), Offer letter, Sign in/Dashboard -
   within reach of a thumb. Hidden from 768px up, where the header carries the links. */
.lp-tabbar {
    display: none;
}

@media (max-width: 767.98px) {
    .lp-tabbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
        background: var(--bs-body-bg);
        border-top: 1px solid var(--admin-sidebar-border);
        box-shadow: 0 -.5rem 1.5rem -1rem rgba(16, 24, 40, .3);
    }

    .lp-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        min-height: 52px;
        padding: .3rem .125rem;
        border-radius: var(--admin-radius-sm);
        color: var(--bs-secondary-color);
        font-size: .6875rem;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
    }

    .lp-tab > i {
        font-size: 1.1rem;
    }

    .lp-tab > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lp-tab.active {
        color: var(--admin-brand);
    }

    .lp-tab:hover,
    .lp-tab:focus-visible {
        color: var(--admin-brand);
    }

    /* Apply: the main action, raised above the bar in the accent colour. */
    .lp-tab-apply {
        color: var(--bs-body-color);
    }

    .lp-tab-apply-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin-top: -1.25rem;
        border-radius: 50%;
        background: var(--sx-accent, var(--admin-accent));
        color: #fff;
        font-size: 1.1rem;
        box-shadow: 0 .5rem 1rem -.35rem rgba(16, 24, 40, .45);
        border: 3px solid var(--bs-body-bg);
    }

    .lp-tab-apply:hover .lp-tab-apply-icon,
    .lp-tab-apply:focus-visible .lp-tab-apply-icon {
        background: color-mix(in srgb, var(--sx-accent, var(--admin-accent)) 85%, #000);
    }

    /* The tab bar carries every link, so the header's menu button steps aside. */
    .lp-topbar .lp-menu-toggle {
        display: none;
    }

    /* Keep the end of every page clear of the bar. */
    .site-shell {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
    }
}