/*
 * site-common.css
 * Shared, application-wide UI polish. Loaded LAST in every layout (after Bootstrap and the
 * third-party CSS) so these rules apply consistently, but before each page's "Styles" section
 * so individual pages can still override them.
 *
 * It keeps the existing brand (dark blue / yellow / green from style.css) and focuses on:
 *  - consistent look of buttons, forms, cards, tables and dialogs
 *  - mobile/touch friendliness (no iOS zoom on inputs, larger tap targets, no sideways scroll)
 *  - cross-browser / cross-OS consistency (system font fallbacks, forced light color scheme)
 *  - accessibility (visible keyboard focus, reduced-motion support, validation states)
 */

/* ---------------------------------------------------------------- tokens */
:root {
    --ui-radius-sm: 6px;
    --ui-radius: 8px;
    --ui-radius-lg: 12px;
    --ui-shadow-sm: 0 1px 2px rgba(20, 23, 31, .06), 0 1px 3px rgba(20, 23, 31, .10);
    --ui-shadow: 0 4px 16px rgba(20, 23, 31, .08), 0 1px 3px rgba(20, 23, 31, .06);
    --ui-shadow-lg: 0 12px 32px rgba(20, 23, 31, .14);
    --ui-transition: .18s ease;
    --ui-focus-ring: 0 0 0 .25rem rgba(52, 152, 219, .35);
    --ui-border: #CED4DA;
    --ui-text: #1F2933;
    --ui-muted: #5F6B7A; /* darker than --dark-gray for readable contrast (WCAG AA) */
    --ui-danger: #C62828;
    --ui-font: 'Roboto', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Noto Naskh Arabic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ---------------------------------------------------------------- base */
html {
    /* The site has no dark theme: stop OS dark mode from restyling native inputs/scrollbars */
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    /* style.css forces 'Roboto', sans-serif; add proper fallbacks for when the web font is unavailable */
    font-family: var(--ui-font) !important;
    color: var(--ui-text);
    background-color: var(--white, #FFF);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word; /* long emails / URLs no longer push the page wider than the screen */
    overflow-x: clip;          /* no accidental sideways scrolling on phones (does not break sticky navbar) */
    -webkit-tap-highlight-color: rgba(52, 152, 219, .15);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ui-font) !important;
    overflow-wrap: break-word;
}

img, video, iframe, svg, canvas {
    max-width: 100%;
}

img {
    height: auto;
}

::selection {
    background-color: var(--yellow, #FFD700);
    color: var(--black, #000);
}

[hidden] {
    display: none !important;
}

button,
[role="button"],
label[for],
select,
summary {
    cursor: pointer;
}

/* ---------------------------------------------------------------- focus (keyboard users) */
:focus-visible {
    outline: 3px solid var(--blue, #3498DB);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

.btn:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid var(--blue, #3498DB);
    outline-offset: 2px;
    box-shadow: none;
}

.navbar .nav-link:focus-visible,
.navbar .nav-button:focus-visible,
.footer a:focus-visible {
    outline-color: var(--yellow, #FFD700);
}

/* ---------------------------------------------------------------- links */
a {
    transition: color var(--ui-transition), background-color var(--ui-transition), opacity var(--ui-transition);
}

/* ---------------------------------------------------------------- brand rainbow (same as the emails) */
:root {
    --ui-rainbow: linear-gradient(90deg,
        #2ECC71 0%, #2ECC71 25%,
        #FFD700 25%, #FFD700 50%,
        #3498DB 50%, #3498DB 75%,
        #9B59B6 75%, #9B59B6 100%);
    --ui-header-gradient: linear-gradient(135deg, #1A4C6D 0%, #1F5F87 55%, #3498DB 100%);
}

/* ---------------------------------------------------------------- navbar (matches the email header) */
.navbar {
    background-color: var(--dark-blue, #1A4C6D);   /* fallback */
    background-image: var(--ui-header-gradient);
    padding-top: 4px !important;                    /* room for the rainbow bar */
    box-shadow: 0 4px 18px rgba(26, 76, 109, .28);
}

/* Rainbow accent bar along the top edge */
.navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: var(--ui-rainbow);
    pointer-events: none;
}

.navbar-brand img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.navbar .nav-link,
.navbar .nav-button {
    transition: color var(--ui-transition), box-shadow var(--ui-transition);
}

@media (min-width: 992px) {
    /* Yellow underline on hover / current page, like the email's yellow accents */
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link.active,
    .navbar .navbar-nav .nav-button:hover,
    .navbar .navbar-nav .nav-button.active {
        box-shadow: inset 0 -3px 0 var(--yellow, #FFD700);
    }
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 215, 0, .5);
}

@media (max-width: 991.98px) {
    /* Collapsed mobile menu: give it breathing room and comfortable tap rows */
    .navbar .navbar-collapse {
        padding-bottom: .75rem;
    }

    .navbar .navbar-collapse .nav-link,
    .navbar .navbar-collapse .nav-button {
        display: block;
        width: 100%;
        min-height: 44px;
        line-height: 28px;
    }
}

.dropdown-menu {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    border-color: rgba(0, 0, 0, .08);
    padding: .375rem 0;
}

.dropdown-item {
    padding: .5rem 1rem;
    transition: background-color var(--ui-transition), color var(--ui-transition);
}

/* ---------------------------------------------------------------- buttons */
/* Pill shape everywhere (same shape as the Dashboard "Add Student" button). Colours are untouched. */
.btn {
    --bs-btn-padding-x: 1rem;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;                     /* icon + label spacing */
    font-weight: 500;
    letter-spacing: .01em;
    transition: color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition),
                box-shadow var(--ui-transition), transform var(--ui-transition), filter var(--ui-transition);
}

.btn-sm {
    --bs-btn-padding-x: .8rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.6rem;
}

/* Icons inside buttons already get spacing from the gap above */
.btn > .bi.me-1,
.btn > .bi.me-2 {
    margin-right: 0 !important;
}

/* Joined button groups (e.g. grid/list toggle): pill outer ends, Bootstrap keeps the inner joins square */
.btn-group > .btn,
.btn-group-vertical > .btn {
    border-radius: 50rem;
}

/* Buttons attached to an input field keep a soft corner so they line up with the field */
.input-group > .btn,
.input-group .btn {
    border-radius: var(--ui-radius-sm);
}

/* Links styled as buttons inside text, and full-width buttons, keep normal block behaviour */
.btn-link {
    display: inline;
}

.btn.w-100,
.d-grid > .btn {
    display: flex;
}

/* Buttons that are meant to be left-aligned (e.g. sort dropdowns) */
.btn.text-start,
.btn.sort__dropdown-btn,
.btn.filter-package__dropdown-btn {
    justify-content: flex-start;
}

.btn.dropdown-toggle.w-100,
.btn.sort__dropdown-btn {
    justify-content: space-between;
}

/* jQuery-confirm dialog buttons */
.jconfirm .jconfirm-box .jconfirm-buttons button {
    border-radius: 50rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.btn-yellow:hover,
.btn-green:hover,
.btn-blue:hover,
.btn-purple:hover {
    filter: brightness(.94);
}

.btn-yellow:active,
.btn-green:active,
.btn-blue:active,
.btn-purple:active {
    filter: brightness(.88);
}

.btn:disabled,
.btn.disabled {
    opacity: .6;
}

.btn-link {
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- forms */
.form-control,
.form-select {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--blue, #3498DB);
    box-shadow: var(--ui-focus-ring);
}

.form-control::placeholder {
    color: #8A94A3;
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--light-gray, #F5F5F5);
    cursor: not-allowed;
}

textarea.form-control {
    min-height: 6rem;
    resize: vertical;
}

/* Keep the chat composers exactly as designed */
textarea.chat_msg_input,
.msg_footer textarea.form-control,
.chat-body-inner-input textarea.form-control {
    min-height: 0;
}

.form-label,
.col-form-label {
    font-weight: 500;
    margin-bottom: .375rem;
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:focus {
    box-shadow: var(--ui-focus-ring);
}

/* ASP.NET MVC validation output (unobtrusive validation adds these classes) */
.input-validation-error,
.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: var(--ui-danger) !important;
}

.input-validation-error:focus {
    box-shadow: 0 0 0 .25rem rgba(198, 40, 40, .2) !important;
}

.field-validation-error,
.validation-summary-errors,
label.error {
    display: inline-block;
    font-size: .875rem;
    line-height: 1.35;
    margin-top: .25rem;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.validation-summary-valid {
    display: none;
}

/* Select2: match Bootstrap form controls */
.select2-container {
    max-width: 100%;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 2px);
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .75rem);
    padding-left: .75rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--blue, #3498DB);
    box-shadow: var(--ui-focus-ring);
}

.select2-dropdown {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--dark-blue, #1A4C6D);
}

/* ---------------------------------------------------------------- cards & panels */
.card {
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
    transition: box-shadow var(--ui-transition), transform var(--ui-transition);
}

.card-blue-header,
.std-list-header,
.messenger-head {
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

.card-blue-content,
.std-list-content,
.messenger-content {
    border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
}

.card-blue-content__text,
.disabled-label {
    color: var(--ui-muted);
}

.alert {
    border-radius: var(--ui-radius);
    border-width: 0 0 0 4px;
}

.badge {
    font-weight: 500;
    letter-spacing: .02em;
}

/* Primary action button inside a blue section header (e.g. Dashboard "Add Student") */
.std-list-header__action,
.card-blue-header__action {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    padding: .375rem .9rem;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* Teacher application review: reject before advisor assignment */
.early-reject {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background-color: #FFF5F5;
    border: 1px dashed #E6B8B8;
    border-radius: var(--ui-radius);
}

.early-reject__text {
    flex: 1 1 280px;
}

.early-reject-result__reason {
    padding: .875rem 1.125rem;
    background-color: #F4ECFA;
    border-left: 4px solid #9B59B6;
    border-radius: var(--ui-radius-sm);
}

.early-reject-result__reason p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- tables */
.table {
    vertical-align: middle;
}

.table > thead th {
    font-weight: 600;
    white-space: nowrap;
}

/* DataTables 2: let wide tables scroll inside their box instead of stretching the page */
.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dt-container .dt-input,
.dt-container select.form-control {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: .375rem .625rem;
}

.dt-container .dt-paging .dt-paging-button {
    border-radius: var(--ui-radius-sm) !important;
}

/* ---------------------------------------------------------------- pagination */
.pagination {
    flex-wrap: wrap;
    gap: .25rem;
}

.page-link {
    border-radius: var(--ui-radius-sm) !important;
    transition: background-color var(--ui-transition), border-color var(--ui-transition);
}

/* ---------------------------------------------------------------- dialogs */
.modal-content {
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
}

.jconfirm .jconfirm-box {
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane {
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    .jconfirm .jconfirm-box-container {
        width: calc(100% - 1.5rem) !important;
        margin-left: .75rem !important;
        margin-right: .75rem !important;
    }
}

/* ---------------------------------------------------------------- chat windows */
/* Fixed 350px popups must never be wider than a small phone screen */
.msg_box,
.chat-body {
    max-width: calc(100vw - 1rem);
    box-shadow: var(--ui-shadow-lg);
}

.msg_body,
.chat-box-body,
.chat-body-inner-box,
.messenger-chat-content {
    scrollbar-width: thin;
    overscroll-behavior: contain; /* scrolling a chat doesn't scroll the whole page */
}

/* ---------------------------------------------------------------- footer (matches the email footer) */
.footer {
    position: relative;
    background-color: #14171F;
    color: #B8C2CC;
}

/* Rainbow accent bar along the top edge */
.footer::before {
    content: "";
    display: block;
    height: 4px;
    background-image: var(--ui-rainbow);
}

.footer-main {
    padding: 56px 0 28px;
}

.footer__widget {
    margin-bottom: 1.5rem;
}

.footer__widget p {
    color: #B8C2CC;
    line-height: 1.6;
}

.footer__widget--logo {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4));
}

.footer__widget--title {
    color: var(--yellow, #FFD700);
    font-size: 1.125rem;
    letter-spacing: .08em;
    text-transform: uppercase !important;
    margin-bottom: .75rem;
}

.footer__widget--link {
    display: inline-block;
    width: 100%;
    color: #E3E8EE;
    text-decoration: none;
    transition: color var(--ui-transition), transform var(--ui-transition);
}

.footer__widget--link:hover,
.footer__widget--link:focus-visible {
    color: var(--yellow, #FFD700);
    text-decoration: none !important;
    transform: translateX(4px);
}

.footer .text-warning {
    color: var(--yellow, #FFD700) !important;
}

/* Round social buttons */
.footer__widget--social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 10px 8px 0 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .08);
    text-decoration: none;
    vertical-align: middle;
    transition: background-color var(--ui-transition), transform var(--ui-transition);
}

.footer__widget--social i {
    font-size: 1.1rem !important;
    line-height: 1;
    color: #FFFFFF;
    transition: color var(--ui-transition);
}

.footer__widget--social:hover,
.footer__widget--social:focus-visible {
    background-color: var(--yellow, #FFD700);
    transform: translateY(-2px);
}

.footer__widget--social:hover i,
.footer__widget--social:focus-visible i {
    color: #14171F;
}

.footer .add-beta {
    color: var(--yellow, #FFD700);
}

.footer__copyright {
    background-color: #0F1218;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #B8C2CC;
    font-size: .875rem;
    padding: 18px 0;
}

.footer__copyright strong {
    color: var(--yellow, #FFD700);
}

.footer__copyright a {
    color: #E3E8EE !important;
}

.footer__copyright a:hover {
    color: var(--yellow, #FFD700) !important;
}

@media (max-width: 991.98px) {
    .footer-main {
        padding: 40px 0 12px;
        text-align: center;
    }

    .footer__widget--logo {
        margin-left: auto;
        margin-right: auto;
    }

    .footer__widget--link:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------- home page: compact layout */
/* Spacing scales with the screen width (clamp) so large monitors no longer get huge gaps,
   while phones keep comfortable breathing room. */
.hero {
    padding: clamp(2.5rem, 7vw, 5.5rem) 0;
}

.hero-content--title {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
}

.hero-content--text {
    margin-bottom: 1.5rem;
}

.about {
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.about-content__title,
.teacher-content__title,
.hiw-content__title,
.subscribe-content__title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.about-content__title {
    margin-bottom: .75rem;
}

.about-content__text {
    margin-bottom: 1rem;
}

/* The about photo was as tall as its column; cap it and crop nicely instead */
.about-content__img {
    display: block;
    width: 100%;
    height: clamp(200px, 26vw, 320px);
    object-fit: cover;
    box-shadow: var(--ui-shadow-lg);
}

.teacher {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.teacher-content {
    margin-bottom: 1.5rem;
}

.how-it-works {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.hiw-content__title {
    margin: 0 0 clamp(1rem, 2.5vw, 2rem) 0;
}

.how-it-works-inner-content__title {
    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
    margin-bottom: .75rem;
}

.how-it-works-inner-content__text {
    padding-right: clamp(0rem, 3vw, 2.5rem);
}

/* The video column sat below the text on tablets/phones with a big gap */
@media (max-width: 991.98px) {
    .how-it-works-inner-content {
        margin-bottom: 1.25rem;
    }

    .about-content__text {
        margin-bottom: 1.25rem;
    }

    .about-content__img {
        height: clamp(180px, 45vw, 260px);
    }
}

@media (max-width: 575.98px) {
    .how-it-works .item {
        padding: 0 1rem;
    }
}

/* ---------------------------------------------------------------- home page subscribe box */
.subscribe {
    padding-top: clamp(2rem, 4vw, 3rem);
}

.subscribe-content {
    padding: clamp(2rem, 4vw, 3rem) 1rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.subscribe-content__text {
    margin-bottom: 1.5rem;
}

.subscribe-content__input {
    max-width: 100%;
}

/* ---------------------------------------------------------------- page hero (list pages etc.) */
/* Same look as the email header: blue gradient, yellow eyebrow, white title */
.page-hero {
    background-color: var(--dark-blue, #1A4C6D);
    background-image: var(--ui-header-gradient);
    color: #FFFFFF;
    padding: clamp(1.75rem, 4vw, 2.75rem) 0;
    text-align: center;
}

.page-hero__eyebrow {
    margin: 0 0 .375rem;
    color: var(--yellow, #FFD700);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.page-hero__title {
    margin: 0 0 .5rem;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    color: #FFFFFF;
}

.page-hero__text {
    max-width: 640px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .88);
    font-size: 1.0625rem;
}

/* Tighter gap between the hero and the content below it */
.page-hero + .suggested-student,
.page-hero ~ .all-student,
.page-hero ~ .d-none + .all-student {
    margin-top: 2rem;
}

/* ---------------------------------------------------------------- brand card (email-style section card) */
.brand-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.75rem;
    background-color: #FFFFFF;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}

.brand-card::before {
    content: "";
    display: block;
    height: 4px;
    background-image: var(--ui-rainbow);
}

.brand-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1.5rem;
    background-color: var(--dark-blue, #1A4C6D);
    background-image: var(--ui-header-gradient);
}

.brand-card__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: #FFFFFF;
    font-size: 1.2rem;
}

.brand-card__title .bi {
    color: var(--yellow, #FFD700);
}

.brand-card__body {
    padding: 1.5rem;
}

/* ================================================================ site-wide branding of legacy components
   These rules bring the older pages in line with the new look (gradient headers, rainbow bar,
   soft tiles, brand colours) without changing their markup. */

/* ---- Blue section headers (profiles, enrollment, class logs, dashboard, messenger, ...) */
.card-blue-header,
.std-list-header,
.messenger-head,
.messenger-chat-head {
    position: relative;
    overflow: hidden;
    background-color: var(--dark-blue, #1A4C6D) !important;
    background-image: var(--ui-header-gradient);
    padding-top: calc(1rem + 4px);
}

.card-blue-header::before,
.std-list-header::before,
.messenger-head::before,
.messenger-chat-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: var(--ui-rainbow);
    pointer-events: none;
}

.card-blue-header__title,
.std-list-header__title,
.messenger-head__title {
    color: #FFFFFF;
    letter-spacing: .01em;
}

/* Header icon links (edit pencil etc.) get a round, tappable hit area */
.card-blue-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    transition: background-color var(--ui-transition);
}

.card-blue-header__btn:hover {
    background-color: var(--yellow, #FFD700);
}

.card-blue-header__btn:hover svg {
    color: #14171F !important;
}

.card-blue-content,
.messenger-content {
    background-color: #FFFFFF;
}

.card-blue-content__titile {
    color: var(--dark-blue, #1A4C6D);
    font-weight: 600;
}

.card-blue-content__sub-titile,
.teacher-profile-content__sub-title {
    color: var(--dark-blue, #1A4C6D);
}

/* ---- Read-only fields shown as soft tiles (same look as the My Profile page) */
.disabled-input,
.form-control.disabled-input,
fieldset:disabled .form-control.disabled-input {
    background-color: #F5F9FC !important;
    border: 1px solid #E3EDF5 !important;
    color: var(--ui-text) !important;
    font-weight: 600;
    opacity: 1;
    cursor: default;
}

/* Values in these pages are often rendered as placeholders; keep them readable */
.disabled-input::placeholder {
    color: var(--ui-text) !important;
    opacity: 1;
}

.disabled-label {
    color: var(--ui-muted);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .02em;
    margin-bottom: .25rem;
}

.border-bottom-padding,
.bottom-border {
    border-bottom-color: #E3EDF5 !important;
}

.teacher-profile-content__about-text {
    background-color: #F5F9FC;
    border: 1px solid #E3EDF5;
    border-radius: var(--ui-radius);
}

/* ---- Form pages (Add / Edit screens): white card, gradient title band, rainbow bar */
.form-page {
    position: relative;
    overflow: hidden;
    margin-top: 2rem !important;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    background-color: #FFFFFF;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}

.form-page::before {
    content: "";
    display: block;
    height: 4px;
    margin: 0 -1.5rem;
    background-image: var(--ui-rainbow);
}

.form-page > center:first-child {
    display: block;
    margin: 0 -1.5rem 1.5rem;
    padding: 1.4rem 1.5rem 1.25rem;
    background-color: var(--dark-blue, #1A4C6D);
    background-image: var(--ui-header-gradient);
    color: #FFFFFF;
}

.form-page > center:first-child h1 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.form-page > center:first-child h5 {
    margin: .4rem 0 0;
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
    font-weight: 400 !important;
    text-transform: none !important;
}

@media (max-width: 767.98px) {
    .form-page {
        margin-left: .75rem;
        margin-right: .75rem;
        width: auto;
    }
}

/* ---- Teacher profile form: photo + introduction video fields */
.media-field {
    padding: 1rem 1.125rem;
    background-color: #F5F9FC;
    border: 1px solid #E3EDF5;
    border-radius: var(--ui-radius);
}

.media-field__help {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
    color: #3D4B5C;
    font-size: .9rem;
    line-height: 1.5;
}

.media-field__help > .bi {
    flex: 0 0 auto;
    color: #3498DB;
    font-size: 1.05rem;
    line-height: 1.35;
}

.media-field__photo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.media-field__preview {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 2px #2ECC71, var(--ui-shadow-sm);
    background-color: #FFFFFF;
}

.media-field__switch {
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.media-field__switch .btn-check:checked + .btn {
    background-color: var(--dark-blue, #1A4C6D) !important;
    border-color: var(--dark-blue, #1A4C6D) !important;
    color: #FFFFFF !important;
}

.media-field__switch .btn-check:checked + .btn .bi-youtube {
    color: #FF4D4D;
}

.media-field__current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: .75rem;
    font-size: .9rem;
    color: #3D4B5C;
}

.media-field__current .bi {
    color: #2ECC71;
}

.media-field__missing {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .75rem;
    font-size: .9rem;
    color: #8A4B00;
}

.media-field__missing .bi {
    color: #E69500;
}

/* Private certificate status on education entries (teacher's own profile and the review page only) */
.credential-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin: .25rem 0 .5rem;
    padding: .35rem .75rem;
    border-radius: 50rem;
    font-size: .85rem;
}

.credential-status--ok {
    background-color: #E8F8EF;
    color: #016C2E;
}

.credential-status--missing {
    background-color: #FFF4E0;
    color: #8A4B00;
}

.credential-status--missing .bi {
    color: #E69500;
}

.credential-status a {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 575.98px) {
    .media-field__photo {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- Teacher profile: "before you apply" checklist and the Apply button */
.apply-checklist {
    position: relative;
    overflow: hidden;
    margin: 2rem 0 0;
    padding: 1.4rem 1.5rem 1.25rem;
    background-color: #FFFFFF;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}

.apply-checklist::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: var(--ui-rainbow);
}

.apply-checklist__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    color: var(--dark-blue, #1A4C6D);
    font-size: 1.2rem;
}

.apply-checklist__title .bi {
    color: #3498DB;
}

.apply-checklist__intro {
    margin-bottom: 1rem;
    color: #3D4B5C;
}

.apply-checklist__steps {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apply-checklist__steps li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .65rem;
    padding: .7rem .9rem;
    background-color: #FFF8E1;
    border: 1px solid #F5E6A3;
    border-radius: var(--ui-radius);
    color: #3D4B5C;
}

.apply-checklist__steps li > .bi {
    font-size: 1.2rem;
    color: #C9A400;
}

.apply-checklist__steps li > span:not(.visually-hidden) {
    flex: 1 1 220px;
}

/* What's still missing in a section (e.g. "Please add your profile photo.") */
.apply-checklist__todo {
    display: block;
    margin-top: .15rem;
    color: #8A4B00;
    font-size: .85rem;
    font-weight: 600;
}

.apply-checklist__steps li a {
    font-weight: 600;
    white-space: nowrap;
}

.apply-checklist__steps li.is-done {
    background-color: #E8F8EF;
    border-color: #CDEFD9;
}

.apply-checklist__steps li.is-done > .bi {
    color: #2ECC71;
}

.apply-action {
    text-align: center;
}

.apply-action .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: auto; /* keep the "not allowed" cursor visible */
}

.apply-action__note {
    display: flex;
    width: fit-content;
    align-items: flex-start;
    gap: .45rem;
    max-width: min(560px, 100%);
    margin: .9rem auto 0;
    padding: .65rem 1rem;
    border-radius: var(--ui-radius);
    background-color: #FFF4E0;
    color: #6B4A00;
    text-align: left;
    font-size: .925rem;
}

.apply-action__note .bi {
    margin-top: .15rem;
    color: #E69500;
}

.apply-action__note--ready {
    background-color: #E8F8EF;
    color: #016C2E;
}

.apply-action__note--ready .bi {
    color: #2ECC71;
}

/* ---- DataTables pages (enrollments, applications, users, FAQ admin) */
.datatable-info .card {
    overflow: hidden;
    border-radius: var(--ui-radius-lg);
}

.datatable-info .card::before {
    content: "";
    display: block;
    height: 4px;
    background-image: var(--ui-rainbow);
}

.datatable-header__text {
    color: var(--dark-blue, #1A4C6D);
    font-weight: 700;
}

.datatable-info table.dataTable > thead > tr > th,
.datatable-info .table > thead > tr > th {
    background-color: #F3F8FC;
    color: var(--dark-blue, #1A4C6D);
    border-bottom: 2px solid #E3EDF5;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.datatable-info table.dataTable > tbody > tr > td {
    border-bottom: 1px solid #EEF3F8;
}

.datatable-info table.dataTable > tbody > tr:hover > td {
    background-color: #F8FBFE;
}

.datatable-info table.dataTable a.text-black:hover {
    color: #3498DB !important;
}

/* ---- Messenger */
.message-option {
    background-color: #E8F8EF;
    border-bottom-color: #CDEFD9;
}

.messenger-content-head-btn {
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
    transition: background-color var(--ui-transition), color var(--ui-transition);
}

/* ---- Chat pop-up (Teacher/Student list, profiles): branded header like the emails and site header */
.msg_box {
    overflow: hidden;
    border: 0 !important;
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0 !important;
    box-shadow: 0 -2px 24px rgba(20, 23, 31, .22) !important;
}

.msg_head {
    position: relative;
    gap: .5rem;
    padding: calc(.65rem + 4px) .6rem .65rem 1rem;
    border-radius: 0;
    background-color: var(--dark-blue, #1A4C6D);
    background-image: var(--ui-header-gradient);
    color: #FFFFFF;
}

/* Rainbow accent bar */
.msg_head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: var(--ui-rainbow);
    pointer-events: none;
}

.msg_head .left-section {
    min-width: 0;
    gap: .2rem;
}

.msg_head .left-section a {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFFFFF !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.msg_head .left-section a:hover {
    color: var(--yellow, #FFD700) !important;
}

/* Unread count */
.msg_head .left-section .badge {
    border-radius: 50rem;
    background-color: var(--yellow, #FFD700) !important;
    color: #14171F;
    font-size: .7rem;
}

.msg_head .online-status {
    gap: .3rem;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font: inherit;
    font-size: .75rem;
    font-weight: 400;
}

.msg_head .online-status .dot {
    width: 9px;
    height: 9px;
    margin: 0;
    background-color: #2ECC71;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

/* Header icons become round, easy-to-hit buttons */
.msg_head .right-section {
    flex: 0 0 auto;
    gap: .15rem;
}

.msg_head .right-section i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: .95rem;
    transition: background-color var(--ui-transition), color var(--ui-transition);
}

.msg_head .right-section i:hover {
    background-color: rgba(255, 255, 255, .18);
}

.msg_head .right-section i.close:hover {
    background-color: #E74C3C;
}

@media (pointer: coarse) {
    .msg_head .right-section i {
        width: 36px;
        height: 36px;
    }
}

/* ================================================================ Messenger page (/Messenger)
   The chat script builds this markup; these rules only restyle it (class names are unchanged). */
.messenger {
    margin: 1.75rem 0 3rem;
}

.messenger > .container > .row > div > .card {
    overflow: hidden;
    border-radius: var(--ui-radius-lg);
}

.messenger .messenger-content {
    padding: 1rem;
    border-radius: var(--ui-radius-lg);
}

/* "Chatting as" switcher (one pill per student for parents) */
.messenger .messenger-content-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .9rem;
}

.messenger-as-label {
    color: var(--ui-muted);
    font-size: .85rem;
    font-weight: 500;
}

.messenger .messenger-content-head .nav-tabs {
    flex-wrap: wrap;
    gap: .35rem;
}

.messenger .messenger-content-head-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .95rem;
    border: 1px solid #D6E4F0;
    border-radius: 50rem;
    background-color: #FFFFFF;
    color: var(--dark-blue, #1A4C6D);
    font-weight: 600;
    font-size: .9rem;
}

.messenger .messenger-content-head-btn:hover {
    background-color: #F3F8FC;
    color: var(--dark-blue, #1A4C6D);
}

.messenger .active > .messenger-content-head-btn,
.messenger .messenger-content-head-btn.active {
    background-color: var(--dark-blue, #1A4C6D);
    border-color: var(--dark-blue, #1A4C6D);
    color: #FFFFFF;
}

/* Two-pane layout: conversation (left) + chat list (right) */
.messenger .message-content-inner {
    height: clamp(460px, calc(100vh - 260px), 760px);
}

.messenger .message-content-inner > .tab-content {
    --bs-gutter-x: 0;
    margin: 0;
    height: 100%;
}

.messenger .tab-pane.d-flex {
    gap: 1rem;
    height: 100%;
}

.messenger .message-body,
.messenger .messenger-chat {
    height: 100%;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid #E3EDF5 !important;
    border-radius: var(--ui-radius-lg);
}

.messenger .message-body {
    flex: 1 1 auto;
    width: auto;
    margin-right: 0 !important;
}

.messenger .messenger-chat {
    flex: 0 0 320px;
    width: 320px;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .messenger .message-body {
        display: flex !important;
        flex-direction: column;
    }
}

.messenger .message-body:not(.d-none) {
    display: flex !important;
    flex-direction: column;
}

/* Welcome panel (no conversation open yet) */
.messenger .welcome-message {
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
    color: #3D4B5C;
}

.messenger .welcome-message h3 {
    color: var(--dark-blue, #1A4C6D);
    font-size: 1.4rem;
    margin-bottom: .4rem;
}

.welcome-message__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-image: var(--ui-header-gradient);
    color: var(--yellow, #FFD700);
    font-size: 2.1rem;
    box-shadow: var(--ui-shadow);
}

/* Chat list */
.messenger .messenger-chat-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: calc(.8rem + 4px) 1rem .8rem;
    border-radius: 0;
    color: #FFFFFF;
    font-weight: 600;
}

.chat-search-wrap {
    position: relative;
    padding: .6rem .75rem;
    border-bottom: 1px solid #EEF3F8;
}

.chat-search-wrap > .bi {
    position: absolute;
    top: 50%;
    left: 1.6rem;
    transform: translateY(-50%);
    color: #8A94A3;
    pointer-events: none;
}

.messenger .chat-search {
    padding-left: 2.3rem;
    border-radius: 50rem;
    font-size: .95rem;
    background-color: #F5F9FC;
}

.messenger .messenger-chat-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto !important;
}

.messenger #messenger-chat-btn {
    gap: .75rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid #EEF3F8;
    color: var(--ui-text);
    cursor: pointer;
    transition: background-color var(--ui-transition), box-shadow var(--ui-transition);
}

.messenger #messenger-chat-btn:hover,
.messenger #messenger-chat-btn:focus-visible {
    background-color: #F3F8FC;
    color: var(--ui-text);
}

.messenger #messenger-chat-btn[aria-current="true"] {
    background-color: #E6F2FB;
    box-shadow: inset 4px 0 0 #3498DB;
    color: var(--ui-text);
}

.messenger #messenger-chat-btn .circle-image-extra-small-container {
    width: 42px;
    height: 42px;
    margin-right: 0;
    object-fit: cover;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px #E3EDF5;
}

.messenger #messenger-chat-btn #slider-username {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.messenger #messenger-chat-btn .offline-message {
    border-radius: 50rem;
    min-width: 1.5rem;
}

.chat-list-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--ui-muted);
    font-size: .925rem;
}

.chat-list-empty > .bi {
    display: block;
    margin-bottom: .5rem;
    font-size: 2rem;
    color: #3498DB;
}

/* Conversation header */
.messenger .message-option {
    gap: .75rem;
    padding: .7rem 1rem;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E3EDF5;
}

.chat-back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background-color: #F3F8FC;
    color: var(--dark-blue, #1A4C6D);
    font-size: 1.15rem;
}

.chat-back-btn:hover {
    background-color: #E6F2FB;
}

@media (max-width: 767.98px) {
    .chat-back-btn {
        display: inline-flex;
    }
}

/* Mobile devices wider than 768px also hide the list: show the back button there too */
.messenger .tab-pane:has(> .messenger-chat.d-none) .chat-back-btn {
    display: inline-flex;
}

.message-option-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #E3EDF5;
}

.messenger .message-option-head {
    min-width: 0;
    margin: 0;
}

.messenger .message-option-head-text {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark-blue, #1A4C6D);
    font-size: 1.05rem;
}

.messenger .messenger-user-online-status {
    font: inherit;
    font-size: .8rem;
    color: var(--ui-muted);
}

/* Default / Allow / Block (parents) */
.messenger .chat-access {
    margin-left: auto;
    flex: 0 0 auto;
}

.messenger .chat-access .btn {
    min-height: 36px;
    padding: .3rem .7rem;
    gap: .3rem;
    background-color: #FFFFFF;
    border: 1px solid #D6E4F0 !important;
    color: #3D4B5C !important;
    font-size: .85rem;
}

.messenger .chat-access .btn-check:checked + .btn {
    background-color: var(--yellow, #FFD700) !important;
    border-color: var(--yellow, #FFD700) !important;
    color: #14171F !important;
}

@media (max-width: 575.98px) {
    .chat-access__label {
        display: none;
    }
}

/* Messages */
.messenger .chat-box-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    padding: 1rem 1.25rem !important;
    overflow-y: auto !important;
    font-size: .95rem !important;
    background-color: #F7FAFC;
}

.messenger .chat-box-body .msg-date {
    display: block;
    width: fit-content;
    margin: .9rem auto .6rem;
    padding: .2rem .8rem;
    border-radius: 50rem;
    background-color: #E6F2FB;
    color: var(--dark-blue, #1A4C6D);
    font-size: .75rem;
    font-weight: 600;
}

/* Sender name above a group of messages: quiet label instead of a coloured pill */
.messenger .chat-box-body span.badge.msg-left,
.messenger .chat-box-body span.badge.msg-right {
    display: block !important;
    width: fit-content !important;
    margin: .6rem .25rem .25rem !important;
    padding: 0 !important;
    background-color: transparent !important;
    color: var(--ui-muted) !important;
    font-size: .72rem;
    font-weight: 600;
}

.messenger .chat-box-body span.badge.msg-right {
    margin-left: auto !important;
}

.messenger .chat-box-body div.msg-left,
.messenger .chat-box-body div.msg-right {
    max-width: 80%;
    gap: .35rem;
    margin-bottom: .3rem !important;
}

.messenger .chat-box-body .msg-display-left,
.messenger .chat-box-body .msg-display-right {
    padding: .55rem .9rem;
    font-size: .95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    box-shadow: var(--ui-shadow-sm);
}

.messenger .chat-box-body .msg-display-left {
    margin-right: 0;
    background-color: #FFFFFF !important;
    border: 1px solid #E3EDF5;
    border-radius: 18px 18px 18px 4px;
    color: var(--ui-text);
}

.messenger .chat-box-body .msg-display-right {
    margin-left: 0;
    background: linear-gradient(135deg, #1F5F87 0%, #3498DB 100%) !important;
    border-radius: 18px 18px 4px 18px;
    color: #FFFFFF;
}

.messenger .chat-box-body .msg-right-delete,
.messenger .chat-box-body .msg-left-delete {
    border-radius: 14px;
    background-color: #F1F4F7;
    border-color: #E3E8EE;
    color: var(--ui-muted);
    font-size: .875rem;
}

.messenger .chat-box-body .msg-seen {
    font-size: .8rem;
    color: #3498DB;
    margin-top: -.15rem;
}

/* Delete button beside your own message */
.messenger .chat-box-body .msg-right > .bi-trash {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #E3EDF5;
    color: #C62828;
}

@media (hover: none) {
    /* No hover on touch screens: keep the delete button reachable */
    .messenger .chat-box-body .msg-right > .bi-trash {
        display: inline-flex !important;
    }
}

/* Composer */
.messenger .chat-box-footer {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    height: auto;
    margin: 0;
    padding: .7rem .9rem;
    border: 0;
    border-top: 1px solid #E3EDF5;
    border-radius: 0;
    background-color: #FFFFFF;
}

.messenger .chat_msg_input {
    flex: 1 1 auto;
    min-height: 44px !important;
    max-height: 140px;
    padding: .6rem 1rem !important;
    border: 1px solid #D6E4F0 !important;
    border-radius: 22px !important;
    font-size: 1rem;
    line-height: 1.4;
    resize: none;
    background-color: #F5F9FC;
}

.messenger .chat_msg_input:focus {
    background-color: #FFFFFF;
    border-color: #3498DB !important;
    box-shadow: var(--ui-focus-ring) !important;
}

.messenger .msg_send_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #1F5F87 0%, #3498DB 100%);
    color: #FFFFFF;
    font-size: 1.1rem;
    box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-transition), filter var(--ui-transition);
}

.messenger .msg_send_btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.chat-hint {
    margin: 0;
    padding: 0 1rem .55rem;
    background-color: #FFFFFF;
    color: #9AA5B1;
    font-size: .72rem;
}

.chat-hint kbd {
    padding: .05rem .3rem;
    background-color: #EEF3F8;
    color: #3D4B5C;
    font-size: .7rem;
}

@media (pointer: coarse) {
    .chat-hint {
        display: none;
    }
}

.messenger .chat-box-error {
    margin: .5rem .9rem .9rem;
    border-radius: var(--ui-radius);
}

/* Phones: one pane at a time, full width */
@media (max-width: 767.98px) {
    .messenger {
        margin-top: 1rem;
    }

    .messenger .messenger-content {
        padding: .6rem;
    }

    .messenger .message-content-inner {
        height: calc(100vh - 210px);
        height: calc(100dvh - 210px);
        min-height: 420px;
    }

    .messenger .messenger-chat {
        flex: 1 1 auto;
        width: 100%;
    }

    .messenger .chat-box-body div.msg-left,
    .messenger .chat-box-body div.msg-right {
        max-width: 88%;
    }
}

/* ---- Pop-up dialogs: rainbow bar and brand title */
.modal-content {
    overflow: hidden;
}

.modal-content::before {
    content: "";
    display: block;
    height: 4px;
    background-image: var(--ui-rainbow);
}

.modal-title {
    color: var(--dark-blue, #1A4C6D);
    font-weight: 700;
}

.modal-header {
    border-bottom-color: #E3EDF5;
}

.modal-footer {
    border-top-color: #E3EDF5;
}

/* ---- Bootstrap "primary" (sign-in pages) uses the brand call-to-action colour */
.btn-primary {
    --bs-btn-color: #14171F;
    --bs-btn-bg: var(--yellow, #FFD700);
    --bs-btn-border-color: var(--yellow, #FFD700);
    --bs-btn-hover-color: #14171F;
    --bs-btn-hover-bg: #F2CC00;
    --bs-btn-hover-border-color: #F2CC00;
    --bs-btn-active-color: #14171F;
    --bs-btn-active-bg: #E6C200;
    --bs-btn-active-border-color: #E6C200;
    --bs-btn-disabled-color: #14171F;
    --bs-btn-disabled-bg: var(--yellow, #FFD700);
    --bs-btn-disabled-border-color: var(--yellow, #FFD700);
    font-weight: 600;
}

/* ---- Sign-in / register / password pages (_AccountLayout) */
.main-body {
    background: var(--dark-blue, #1A4C6D);
    background-image: var(--ui-header-gradient);
    min-height: 100vh;
}

.main-body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: var(--ui-rainbow);
    z-index: 10;
}

/* "Back to LearnQuran.net" link above the sign-in card */
.account-topbar {
    padding: 1.25rem 0 0;
}

.account-home-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .45rem 1rem;
    border-radius: 50rem;
    background-color: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--ui-transition), color var(--ui-transition), transform var(--ui-transition);
}

.account-home-link:hover,
.account-home-link:focus-visible {
    background-color: var(--yellow, #FFD700);
    border-color: var(--yellow, #FFD700);
    color: #14171F;
}

.account-home-link:hover .bi {
    transform: translateX(-2px);
}

.account-home-link .bi {
    transition: transform var(--ui-transition);
}

/* The pages centre their card in a full-height row; leave room for the link and let tall
   cards (e.g. Register on a phone) grow instead of overflowing the screen */
.main-body .row.vh-100 {
    height: auto !important;
    min-height: calc(100vh - 4.5rem);
    padding: 1.25rem 0 2.5rem;
}

.main-body .bg-white.rounded {
    position: relative;
    overflow: hidden;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

.main-body .bg-white.rounded::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background-image: var(--ui-rainbow);
}

.main-body h1,
.main-body h2 {
    color: var(--dark-blue, #1A4C6D);
}

.main-body .input-group-text {
    border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm) !important;
}

.main-body .link-secondary:hover {
    color: #3498DB !important;
}

/* ---- FAQ accordion in brand colours */
.faq-title {
    color: var(--dark-blue, #1A4C6D) !important;
}

.accordion-button:not(.collapsed),
.accordion-flush .accordion-button:not(.collapsed) {
    color: var(--dark-blue, #1A4C6D) !important;
}

.accordion-button:not(.collapsed) {
    background-color: #F3F8FC !important;
}

.accordion-button:focus-visible {
    outline: 3px solid var(--blue, #3498DB) !important;
    outline-offset: 2px;
}

.accordion-flush .accordion-body {
    color: #3D4B5C !important;
}

.accordion-item {
    border-color: #E3EDF5;
}

/* ---- FAQ page */
.faq-search {
    position: relative;
    max-width: 560px;
    margin: 1.5rem auto 0;
}

.faq-search > .bi {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translateY(-50%);
    color: #5F6B7A;
    font-size: 1.1rem;
    pointer-events: none;
}

.faq-search__input {
    width: 100%;
    padding: .9rem 1.25rem .9rem 3rem;
    border: 0;
    border-radius: 50rem;
    font-size: 1rem;
    color: var(--ui-text);
    background-color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.faq-search__input:focus {
    outline: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18), 0 0 0 4px rgba(255, 215, 0, .6);
}

.faq-page {
    padding: 2rem 0 3rem;
}

.faq-page > .container {
    max-width: 920px;
}

.faq-topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2rem;
}

.faq-topic {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: 1px solid #D6E4F0;
    border-radius: 50rem;
    background-color: #FFFFFF;
    color: var(--dark-blue, #1A4C6D);
    font-weight: 600;
    transition: background-color var(--ui-transition), color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition);
}

.faq-topic:hover {
    border-color: #3498DB;
    box-shadow: var(--ui-shadow-sm);
}

.faq-topic.is-active {
    background-color: var(--dark-blue, #1A4C6D);
    border-color: var(--dark-blue, #1A4C6D);
    color: #FFFFFF;
}

.faq-topic__count {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 .45em;
    border-radius: 50rem;
    background-color: #E6F2FB;
    color: var(--dark-blue, #1A4C6D);
    font-size: .75rem;
    line-height: 1.6em;
    text-align: center;
}

.faq-topic.is-active .faq-topic__count {
    background-color: var(--yellow, #FFD700);
    color: #14171F;
}

.faq-section {
    margin-bottom: 2.25rem;
}

.faq-section__head {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1rem;
}

.faq-section__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background-image: var(--ui-header-gradient);
    color: var(--yellow, #FFD700);
    font-size: 1.35rem;
    box-shadow: var(--ui-shadow-sm);
}

.faq-section__title {
    margin: 0;
    color: var(--dark-blue, #1A4C6D);
    font-size: 1.35rem;
}

.faq-section__blurb {
    margin: 0;
    color: var(--ui-muted);
    font-size: .9rem;
}

/* Each question is its own soft card */
.faq-accordion .faq-item {
    margin-bottom: .75rem;
    border: 1px solid #E3EDF5 !important;
    border-radius: var(--ui-radius-lg) !important;
    overflow: hidden;
    background-color: #FFFFFF;
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow var(--ui-transition), border-color var(--ui-transition);
}

.faq-accordion .faq-item:hover {
    border-color: #CFE3F2 !important;
    box-shadow: var(--ui-shadow);
}

.faq-accordion .accordion-button {
    padding: 1.05rem 1.25rem !important;
    background-color: #FFFFFF !important;
    color: var(--ui-text) !important;
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.45;
    text-transform: none;
    box-shadow: none !important;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background-color: #F3F8FC !important;
    color: var(--dark-blue, #1A4C6D) !important;
    box-shadow: inset 4px 0 0 #2ECC71 !important;
}

.faq-accordion .accordion-header {
    margin: 0;
    text-transform: none !important;
}

.faq-item__answer {
    padding: 0 1.25rem 1.15rem 1.5rem !important;
    background-color: #F3F8FC;
    color: #3D4B5C !important;
    line-height: 1.7;
    white-space: pre-line; /* keep the line breaks typed by the admin */
    box-shadow: inset 4px 0 0 #2ECC71;
}

/* "Still have a question?" banner */
.faq-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 1rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--ui-radius-lg);
    background-color: #FFF8E1;
    border: 1px solid #F5E6A3;
}

.faq-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--yellow, #FFD700);
    color: #14171F;
    font-size: 1.6rem;
}

.faq-contact__text {
    flex: 1 1 260px;
    color: #3D4B5C;
}

.faq-contact__title {
    margin: 0 0 .2rem;
    color: #8A6D00;
    font-size: 1.25rem;
}

@media (max-width: 575.98px) {
    .faq-contact {
        text-align: center;
        justify-content: center;
    }
}

/* ---- Friendly status pages (Access denied, Error) */
.status-page {
    max-width: 620px;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background-color: #FFFFFF;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
    position: relative;
    overflow: hidden;
}

.status-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: var(--ui-rainbow);
}

.status-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
    border-radius: 50%;
    font-size: 2.1rem;
}

.status-page__icon--warning {
    background-color: #FFF8D6;
    color: #8A6D00;
}

.status-page__icon--error {
    background-color: #F4ECFA;
    color: #6C3483;
}

.status-page__title {
    color: var(--dark-blue, #1A4C6D);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: .75rem;
}

.status-page__text {
    color: #3D4B5C;
    margin-bottom: 1.5rem;
}

.status-page__meta {
    color: var(--ui-muted);
    font-size: .875rem;
}

.status-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* ---------------------------------------------------------------- my profile page */
.profile-hero__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: .875rem;
    border-radius: 50%;
    border: 3px solid var(--yellow, #FFD700);
    background-image: linear-gradient(135deg, #2ECC71 0%, #16A085 100%);
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.profile-page {
    padding: 2rem 0 1rem;
}

.profile-field {
    height: 100%;
    padding: .75rem 1rem;
    background-color: #F5F9FC;
    border: 1px solid #E3EDF5;
    border-radius: var(--ui-radius);
    transition: border-color var(--ui-transition), background-color var(--ui-transition);
}

.profile-field:hover {
    background-color: #EEF6FC;
    border-color: #CFE3F2;
}

.profile-field__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .2rem;
    color: var(--ui-muted);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .02em;
}

.profile-field__label .bi {
    color: #3498DB;
}

.profile-field__value {
    display: block;
    color: var(--ui-text);
    font-weight: 600;
    word-break: break-word;
}

.profile-field__value--empty {
    color: #9AA5B1;
    font-weight: 400;
    font-style: italic;
}

.profile-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--ui-muted);
}

.profile-empty .bi {
    display: block;
    font-size: 2rem;
    color: #3498DB;
    margin-bottom: .25rem;
}

@media (max-width: 575.98px) {
    .brand-card__header,
    .brand-card__body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ---------------------------------------------------------------- list pages (Teacher / Student list) */
/* Brand badge colours (used instead of Bootstrap's red "danger" badges) */
.badge-brand-purple {
    background-color: #9B59B6 !important;
    color: #FFFFFF !important;
}

.badge-brand-green {
    background-color: #2ECC71 !important;
    color: #FFFFFF !important;
}

/* Filter panel: email-style header with the rainbow bar */
.all-student__filter {
    overflow: hidden;
    border-radius: var(--ui-radius-lg);
}

.all-student__filter::before {
    content: "";
    display: block;
    height: 4px;
    background-image: var(--ui-rainbow);
}

.all-student__filter-head {
    background-color: var(--dark-blue, #1A4C6D);
    background-image: var(--ui-header-gradient);
    border-radius: 0;
    padding: 1rem 1.25rem;
}

.all-student__filter-head-title {
    color: #FFFFFF;
    font-size: 1.125rem;
}

.btn-clear {
    color: var(--yellow, #FFD700) !important;
    font-weight: 600;
    text-decoration: none;
}

.btn-clear:hover {
    text-decoration: underline;
}

/* Filter sections: light, calm headers instead of solid dark blocks */
.filter__dropdown {
    margin: 0;
    border-bottom: 1px solid #E3EDF5;
}

.filter__dropdown-head {
    background-color: #F3F8FC;
    padding: .75rem 1.25rem;
    transition: background-color var(--ui-transition);
}

.filter__dropdown-head:hover {
    background-color: #E6F2FB;
}

.filter__dropdown-btn {
    color: var(--dark-blue, #1A4C6D);
    font-weight: 600;
}

/* The chevron icon file is white; darken it on the light header */
.filter__dropdown-head--icon {
    filter: brightness(0) opacity(.55);
    transition: transform var(--ui-transition);
}

.dropdown-body__form-check {
    padding: .45rem 1.25rem;
}

.filter__dropdown-body {
    padding: .25rem 0 .5rem;
}

.filter__dropdown-body > .form-select,
.filter__dropdown-body > .select2-container {
    margin: .25rem 1.25rem .5rem;
    width: calc(100% - 2.5rem) !important;
}

/* Sort bar sits on a soft white card */
.all-student-sort {
    gap: .75rem;
    padding: .5rem;
    background-color: #FFFFFF;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}

.all-student-sort .input-group-text {
    border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm) !important;
}

/* Result cards: coloured top accent, brand-coloured name, friendly chips */
.teacher-div .std__card,
.student-div .std__card {
    overflow: hidden;
    transition: transform var(--ui-transition), box-shadow var(--ui-transition);
}

/* Coloured accent bar on top of each card (green = teachers, blue = students) */
.teacher-div .std__card::before,
.student-div .std__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #2ECC71;
    z-index: 2;
    pointer-events: none;
}

.student-div .std__card::before {
    background-color: #3498DB;
}

@media (hover: hover) {
    .teacher-div:hover .std__card,
    .student-div:hover .std__card {
        transform: translateY(-3px);
        box-shadow: var(--ui-shadow-lg);
    }
}

.teacher-div .c-details h6,
.student-div .c-details h6 {
    color: var(--dark-blue, #1A4C6D);
    font-weight: 700;
}

.teacher-card__head-text span {
    color: #016C2E;
}

.teacher-card-body__text span {
    color: #016C2E;
}

.std-card-body__text,
.teacher-card-body__text {
    color: #3D4B5C;
}

.std-card-body__text > .bi,
.teacher-card-body__text > .bi,
.std-card-body__text .bi {
    color: #3498DB;
}

/* Light grey info badges become soft blue chips */
.std-card-body .badge.text-bg-light,
.std-card-body .badge.bg-light {
    background-color: #E6F2FB !important;
    color: var(--dark-blue, #1A4C6D) !important;
    font-weight: 500;
    border-radius: 50rem;
    padding: .35em .75em;
}

.std__card__badge--danger,
.std__card__badge--warning {
    border-radius: 50rem !important;
    padding: .3rem .65rem !important;
    font-weight: 600 !important;
}

/* "Suggested for you" panel: warm yellow instead of light blue */
.suggested-std-head,
.suggested-std-body {
    background-color: #FFF8E1;
}

.suggested-std-head {
    border-top: 4px solid var(--yellow, #FFD700);
    align-items: center;
}

.suggested-student--title {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #8A6D00;
}

.btn-suggested {
    color: #8A6D00;
}

/* Friendly empty state */
.list-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: #FFFFFF;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}

.list-empty-state > .bi {
    display: block;
    font-size: 2.25rem;
    color: #3498DB;
    margin-bottom: .5rem;
}

.list-empty-state h6 {
    color: var(--dark-blue, #1A4C6D);
    font-size: 1.125rem;
    margin-bottom: .25rem;
}

.list-empty-state p {
    color: var(--ui-muted);
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 767.98px) {
    /* 16px+ inputs stop iOS Safari from zooming the page when a field is tapped */
    input.form-control,
    textarea.form-control,
    select.form-select,
    select.form-control,
    .subscribe-content__input,
    .select2-container .select2-search__field {
        font-size: 1rem;
    }

    .card-blue-header,
    .std-list-header,
    .messenger-head {
        padding: .875rem 1rem;
    }

    .card-blue-content,
    .std-list-content,
    .messenger-content {
        padding: 1rem;
    }

    .card-blue-header__title,
    .std-list-header__title,
    .messenger-head__title {
        font-size: 1.25rem;
    }

    .first-card-blue {
        padding: 2rem 0;
    }

    .other-card-blue {
        padding-bottom: 2rem;
    }

    .back-to-btn {
        margin-bottom: 2rem;
    }

    /* Stack button groups that would otherwise overflow */
    .std__card-btn {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------- touch devices */
@media (pointer: coarse) {
    /* Comfortable tap targets (~44px, Apple/Google guidance) */
    .btn:not(.btn-sm):not(.btn-link):not(.btn-close),
    select.form-select,
    input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .page-link {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 36px;
    }

    .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }

    /* Hover-only zoom sticks after a tap on touch screens */
    .hover-effect:hover {
        transform: none !important;
    }

    /* Messages' action links are hover-revealed on desktop; always show them on touch */
    .message-body-inner-wrap-inner a {
        visibility: visible;
    }
}

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

    .hover-effect:hover {
        transform: none !important;
    }
}

/* ---------------------------------------------------------------- high contrast (Windows) */
@media (forced-colors: active) {
    .btn,
    .card,
    .form-control,
    .form-select {
        border: 1px solid CanvasText;
    }
}

/* ---------------------------------------------------------------- print */
@media print {
    .navbar,
    .footer,
    .msg_box,
    .chat-body,
    .navbar-toggler,
    .btn,
    .dt-paging,
    .dt-length,
    .dt-search {
        display: none !important;
    }

    body {
        overflow: visible;
    }

    .card {
        box-shadow: none;
        border: 1px solid #CCC !important;
        break-inside: avoid;
    }
}