/* ==========================================================================
   CEMLab — site-specific styles layered on top of the template.
   Covers the client's review notes: brand lockup with the ENIS logo and the
   justified intro paragraph with the CEMLab watermark.
   ========================================================================== */

:root {
    --cemlab-accent: #7476ff;
    --cemlab-ink: #14133b;
}

/* --------------------------------------------------------------------------
   1. Brand lockup — CEMLab logo with the ENIS logo to its right
   -------------------------------------------------------------------------- */

.navbar-brand.brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-lockup .brand-divider {
    width: 1px;
    height: 34px;
    background: currentColor;
    opacity: 0.25;
    flex: 0 0 auto;
}

.brand-lockup .logo-enis {
    max-height: 46px;
    width: auto;
}

/* If the ENIS logo file is not present yet, hide the divider so the header
   does not show a stray separator. */
.brand-lockup.no-partner-logo .brand-divider,
.brand-lockup.no-partner-logo .logo-enis {
    display: none;
}

.footer-brand-lockup {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-brand-lockup .logo-enis {
    max-height: 40px;
    width: auto;
}

@media (max-width: 767px) {
    .brand-lockup .brand-divider {
        display: none;
    }

    .brand-lockup .logo-enis {
        max-height: 32px;
    }
}

/* --------------------------------------------------------------------------
   1b. Solid navbar — every page except the home page
   The template overlays a transparent bar on the hero. Away from the hero that
   left the nav sitting on top of the breadcrumb image, so inner pages use this
   solid white bar instead, identical on all of them.
   -------------------------------------------------------------------------- */

nav.navbar.cemlab-nav.cemlab-nav-solid {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    border: 0;
    border-bottom: 1px solid rgba(20, 19, 59, 0.08);
    box-shadow: 0 2px 14px rgba(20, 19, 59, 0.06);
    padding: 18px 0;
    margin: 0;
}

/* Links and the language toggle sit on white now, so they must be dark. */
nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav > li > a,
nav.navbar.cemlab-nav.cemlab-nav-solid .attr-nav > ul > li > a,
nav.navbar.cemlab-nav.cemlab-nav-solid .btn-lang-toggle {
    color: var(--color-heading, #14133b);
}

nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav > li > a:hover,
nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav > li.active > a {
    color: var(--cemlab-accent);
}

nav.navbar.cemlab-nav.cemlab-nav-solid .btn-lang-toggle {
    border-color: rgba(20, 19, 59, 0.2);
}

nav.navbar.cemlab-nav.cemlab-nav-solid .btn-lang-toggle:hover {
    border-color: var(--cemlab-accent);
    color: var(--cemlab-accent);
}

/* The dark logo is the right one against white. */
nav.navbar.cemlab-nav.cemlab-nav-solid .navbar-brand > img.logo {
    display: block;
}

/* The breadcrumb banner reserved 260px of top padding to clear the overlaid
   nav. In normal flow that is just dead space, so pull it back. */
body.has-solid-nav .breadcrumb-area {
    padding-top: 120px;
    padding-bottom: 120px;
}

@media (max-width: 767px) {
    body.has-solid-nav .breadcrumb-area {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (max-width: 1023px) {
    nav.navbar.cemlab-nav.cemlab-nav-solid {
        padding: 12px 0;
    }
}

/* --------------------------------------------------------------------------
   2. Laboratory intro paragraph
   Client note: the text must be justified and sit on a "CEMLab" background,
   on the same line as the text.
   -------------------------------------------------------------------------- */

.cemlab-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 26px 30px;
    border-radius: 10px;
    background: rgba(116, 118, 255, 0.05);
}

.cemlab-intro p,
p.cemlab-intro {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    margin-bottom: 0;
}

/* The watermark sits behind the text, vertically centred on the same line. */
.cemlab-intro::before {
    content: "CEMLab";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(56px, 12vw, 150px);
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--cemlab-accent);
    opacity: 0.07;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

body.dark-mode .cemlab-intro,
.dark-mode .cemlab-intro {
    background: rgba(116, 118, 255, 0.1);
}

/* --------------------------------------------------------------------------
   3. Members directory + profile links
   -------------------------------------------------------------------------- */

.member-card .m-name a {
    color: var(--cemlab-ink);
    transition: color 0.2s ease;
}

.member-card .m-name a:hover {
    color: var(--cemlab-accent);
}

.member-card .m-university {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   4. Publications page
   -------------------------------------------------------------------------- */

/* Search + year-range filter, shared by the publications page and each
   member profile. */

.pub-search {
    margin-bottom: 30px;
}

.pub-search-bar {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
}

.pub-search-bar > i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    pointer-events: none;
}

.pub-search-bar input[type="search"] {
    flex: 1;
    padding: 14px 18px 14px 46px;
    border: 1px solid #e3e3ef;
    border-radius: 30px;
    font-size: 15px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pub-search-bar input[type="search"]:focus {
    outline: none;
    border-color: var(--cemlab-accent);
    box-shadow: 0 0 0 4px rgba(116, 118, 255, 0.12);
}

.pub-search-bar .btn {
    flex: 0 0 auto;
}

.pub-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin-top: 16px;
}

.pub-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pub-field label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.65;
    margin: 0;
}

.pub-field select {
    min-width: 150px;
    padding: 10px 14px;
    border: 1px solid #e3e3ef;
    border-radius: 6px;
    background: #fff;
}

.pub-field select:focus {
    outline: none;
    border-color: var(--cemlab-accent);
}

.pub-field-actions {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.pub-reset {
    border: 0;
    background: none;
    padding: 0;
    font-size: 14px;
    color: var(--cemlab-accent);
    text-decoration: underline;
    cursor: pointer;
}

.pub-result-count {
    margin: 18px 0 0;
    font-size: 14px;
    opacity: 0.75;
}

.pub-result-count strong {
    font-size: 16px;
    opacity: 1;
}

@media (max-width: 575px) {
    .pub-search-bar {
        flex-wrap: wrap;
    }

    .pub-search-bar input[type="search"] {
        width: 100%;
        flex-basis: 100%;
    }

    .pub-field select {
        min-width: 130px;
    }
}

/* While the filter fetch is in flight the old results stay put, dimmed, so the
   list does not collapse and bounce the page under the reader. */
#pub-results {
    transition: opacity 0.15s ease;
}

#pub-results.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.publication-item {
    padding: 20px 0;
    border-bottom: 1px solid #ececf5;
}

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

.publication-item .pub-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.publication-item .pub-meta {
    font-size: 14px;
    opacity: 0.75;
}

.publication-item .pub-type {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(116, 118, 255, 0.12);
    color: var(--cemlab-accent);
    font-size: 12px;
    margin-left: 8px;
}

/* Web of Science / Scopus, set apart from the publication type next to it. */
.publication-item .pub-type--indexed {
    background: rgba(48, 164, 108, 0.14);
    color: #218358;
}

/* The CEMLab co-authors of a paper, each linking to their profile. */
.publication-item .pub-members {
    margin-top: 8px;
    font-size: 13px;
}

.publication-item .pub-members > span {
    opacity: 0.6;
    margin-right: 4px;
}

.publication-item .pub-members a {
    color: var(--cemlab-accent);
}

.publication-item .pub-members a:hover {
    text-decoration: underline;
}

.publication-item .pub-members span[aria-hidden] {
    margin: 0 6px;
    opacity: 0.4;
}

.empty-state {
    padding: 60px 20px;
    text-align: center;
    border: 1px dashed #d9d9e7;
    border-radius: 10px;
}

.empty-state i {
    font-size: 34px;
    opacity: 0.35;
    margin-bottom: 14px;
    display: block;
}

/* --------------------------------------------------------------------------
   4b. Floating site tools — language + theme, bottom-left
   Mirrors the assistant launcher on the bottom-right.
   -------------------------------------------------------------------------- */

.site-tools {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(20, 19, 59, 0.1);
    border-radius: 40px;
    background: #fff;
    color: var(--cemlab-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(20, 19, 59, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-tool:hover {
    transform: translateY(-2px);
    border-color: var(--cemlab-accent);
    box-shadow: 0 14px 32px rgba(20, 19, 59, 0.2);
}

.dark-mode-toggle .btn-dark-toggle {
    width: 46px;
    padding: 0;
    justify-content: center;
    font-size: 16px;
}

/* Flags: show the language you would switch TO. i18n.js writes the current
   language onto <html lang>, so no extra script is needed here. */
.site-tools .flag {
    display: none;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(20, 19, 59, 0.12);
    flex: 0 0 auto;
}

.site-tools .flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

html[lang="en"] .site-tools .flag-fr,
html:not([lang="fr"]) .site-tools .flag-fr {
    display: block;
}

html[lang="fr"] .site-tools .flag-en {
    display: block;
}

html[lang="fr"] .site-tools .flag-fr {
    display: none;
}

/* Dark mode: the template flips these classes on <body>. */
body.bg-dark .site-tool {
    background: #1d1c44;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
}

body.bg-dark .site-tool:hover {
    border-color: var(--cemlab-accent);
}

@media (max-width: 575px) {
    .site-tools {
        left: 14px;
        bottom: 14px;
        gap: 8px;
    }

    .site-tool {
        height: 42px;
        padding: 0 13px;
    }

    .dark-mode-toggle .btn-dark-toggle {
        width: 42px;
        padding: 0;
    }
}

/* --------------------------------------------------------------------------
   5. About banner — single illustration
   --------------------------------------------------------------------------
   The theme's banner carries two illustrations and positions them by order:
   :first-child bottom-left at 25% (hidden under 1400px) and :nth-child(2)
   bottom-right at 35%. The decorative robot hand was dropped, so the mascot
   is now :first-child and would inherit the wrong slot — and disappear on
   laptops. These rules pin it to the right-hand slot at every width the
   wrapper itself is still visible (the theme hides the wrapper below 992px).
   -------------------------------------------------------------------------- */

.banner-seven-illustration--single img:first-child {
    right: 0;
    left: auto;
    bottom: 0;
    max-width: 35%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .banner-seven-illustration--single img:first-child {
        display: block;
        max-width: 30%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .banner-seven-illustration--single img:first-child {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Research Topics cards ------------------------------------------------
   Equal-height cards so a long description does not leave a ragged grid. */
.cemlab-topic-card {
    display: flex;
    gap: 18px;
    height: 100%;
    padding: 26px 24px;
    border: 1px solid rgba(20, 19, 59, 0.10);
    border-radius: 10px;
    background: #fff;
    transition: box-shadow .25s ease, transform .25s ease;
}

.cemlab-topic-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(20, 19, 59, 0.10);
}

.cemlab-topic-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    color: var(--cemlab-accent, #7476ff);
    background: rgba(116, 118, 255, 0.10);
}

.cemlab-topic-body h4 {
    margin-bottom: 8px;
    font-size: 19px;
    line-height: 1.35;
}

.cemlab-topic-body p {
    margin-bottom: 8px;
}

.cemlab-topic-link {
    font-weight: 600;
    color: var(--cemlab-accent, #7476ff);
}

/* Dark mode uses the same tokens the rest of the site does. */
body.dark-mode .cemlab-topic-card,
html[data-theme="dark"] .cemlab-topic-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

/* ---- Navigation width ------------------------------------------------------
   Six flat items (CEMLab, Events, Research Topics, Members, Publications,
   Contact) no longer fit Bootstrap's 1140px container beside the logo and the
   right-hand attributes, so the bar wrapped onto a second line. Widen the nav's
   own container and stop the labels breaking mid-phrase; "Research Topics" and
   "Axes de recherche" are the two that used to wrap. */
nav.navbar.cemlab-nav > .container {
    max-width: 1560px;
    width: 100%;
}

nav.navbar.cemlab-nav ul.nav.navbar-nav > li > a {
    white-space: nowrap;
}

/* Reclaim horizontal room at the sizes where it is tightest, rather than
   shrinking the type everywhere. */
@media (min-width: 992px) and (max-width: 1399px) {
    nav.navbar.cemlab-nav ul.nav.navbar-nav > li > a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 15px;
    }
}

/* Below the desktop breakpoint the menu becomes the mobile sidenav, which is a
   vertical list - nowrap there would clip long labels instead of helping. */
@media (max-width: 991px) {
    nav.navbar.cemlab-nav ul.nav.navbar-nav > li > a {
        white-space: normal;
    }
}

/* ============================================================================
   Pagination
   Laravel's stock paginator is Tailwind markup; this site loads no Tailwind, so
   the controls rendered as bare text. resources/views/vendor/pagination/cemlab
   emits these classes instead.
   ========================================================================== */
.cemlab-pagination {
    margin-top: 40px;
    text-align: center;
}

.cemlab-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cemlab-pagination li > a,
.cemlab-pagination li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(20, 19, 59, 0.12);
    border-radius: 8px;
    background: #fff;
    color: var(--color-heading, #14133b);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cemlab-pagination li > a:hover {
    background: var(--cemlab-accent, #7476ff);
    border-color: var(--cemlab-accent, #7476ff);
    color: #fff;
}

.cemlab-pagination li.active > span {
    background: var(--cemlab-accent, #7476ff);
    border-color: var(--cemlab-accent, #7476ff);
    color: #fff;
}

.cemlab-pagination li.disabled > span {
    opacity: .45;
    cursor: not-allowed;
}

.cemlab-pagination li.ellipsis > span {
    border-color: transparent;
    background: transparent;
}

.cemlab-pagination__summary {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--color-body, #5a5a7a);
}

/* ---- Members carousel (about-us.html) -------------------------------------
   One card per member, built from the dataset by cemlab-static.js. Members
   have no photos, so each card uses the same initials avatar and group colour
   as the members directory. */
.members-swiper-wrap {
    position: relative;
}

.members-swiper {
    padding: 10px 4px 20px;
}

.members-swiper .swiper-slide {
    height: auto;
}

.member-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 36px 22px 30px;
    border-radius: 10px;
    background: var(--bg-gray, #f0f2f4);
    transition: box-shadow .25s ease, transform .25s ease;
}

.member-slide:hover {
    box-shadow: var(--box-shadow-regular, 0 10px 30px rgba(0, 0, 0, .08));
    transform: translateY(-4px);
}

.member-slide__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
}

.member-slide__name {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-heading, #000662);
}

.member-slide__grade {
    display: inline-block;
    margin-bottom: 12px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.member-slide__org {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--color-paragraph, #60616c);
}

.members-swiper-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.members-swiper-nav button {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(116, 118, 255, .35);
    border-radius: 50%;
    background: transparent;
    color: var(--cemlab-accent, #7476ff);
    transition: background .2s ease, color .2s ease;
}

.members-swiper-nav button:hover,
.members-swiper-nav button:focus-visible {
    background: var(--cemlab-accent, #7476ff);
    color: #fff;
}

body.dark-mode .member-slide,
html[data-theme="dark"] .member-slide {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .member-slide__name,
html[data-theme="dark"] .member-slide__name {
    color: #fff;
}

/* ============================================================================
   Navbar redesign
   Frosted sticky bar with a brand gradient edge; on desktop the links sit in a
   soft pill track and the current page is a filled gradient pill. The bar
   tightens and lifts once the page scrolls (.is-scrolled, set in cemlab-spa.js).
   Markup is unchanged, so every page picks this up.
   ========================================================================== */
:root {
    --cemlab-nav-grad: linear-gradient(135deg, #7476ff 0%, #5b5ef0 55%, #44b6e9 100%);
}

nav.navbar.cemlab-nav.cemlab-nav-solid {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(20, 19, 59, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    padding: 16px 0;
    transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease;
}

/* Brand gradient edge along the top of the bar. */
nav.navbar.cemlab-nav.cemlab-nav-solid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cemlab-nav-grad);
}

nav.navbar.cemlab-nav.cemlab-nav-solid.is-scrolled {
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px -12px rgba(20, 19, 59, 0.25);
}

nav.navbar.cemlab-nav .brand-lockup img.logo {
    transition: max-height .3s ease;
}

nav.navbar.cemlab-nav.is-scrolled .brand-lockup .logo-enis {
    max-height: 38px;
}

@media (min-width: 1024px) {
    /* The link track. */
    nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav {
        display: flex;
        flex-direction: row; /* Bootstrap's .navbar-nav defaults to column */
        align-items: center;
        gap: 2px;
        padding: 5px;
        border-radius: 999px;
        background: rgba(116, 118, 255, 0.07);
        border: 1px solid rgba(116, 118, 255, 0.12);
    }

    nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li > a {
        position: relative;
        display: block;
        padding: 10px 18px !important;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: .1px;
        color: var(--color-heading, #14133b);
        transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li > a:hover {
        color: var(--cemlab-accent);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 12px -4px rgba(116, 118, 255, 0.35);
    }

    nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li.active > a,
    nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li.active > a:hover {
        color: #fff;
        background: var(--cemlab-nav-grad);
        box-shadow: 0 8px 18px -6px rgba(91, 94, 240, 0.6);
    }

    /* Login: gradient pill with a sliding arrow. */
    nav.navbar.cemlab-nav.cemlab-nav-solid .attr-nav li.button > a.btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border: 0;
        border-radius: 999px;
        background: var(--cemlab-nav-grad);
        color: #fff;
        font-weight: 600;
        box-shadow: 0 10px 22px -10px rgba(91, 94, 240, 0.8);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    nav.navbar.cemlab-nav.cemlab-nav-solid .attr-nav li.button > a.btn::after {
        display: none;
    }

    nav.navbar.cemlab-nav.cemlab-nav-solid .attr-nav li.button > a.btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 26px -10px rgba(91, 94, 240, 0.9);
    }

    nav.navbar.cemlab-nav.cemlab-nav-solid .attr-nav li.button > a.btn i {
        transition: transform .2s ease;
    }

    nav.navbar.cemlab-nav.cemlab-nav-solid .attr-nav li.button > a.btn:hover i {
        transform: translateX(4px);
    }
}

/* Tighter pills where the bar is narrowest. */
@media (min-width: 1024px) and (max-width: 1399px) {
    nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li > a {
        padding: 9px 12px !important;
        font-size: 14px;
    }

    nav.navbar.cemlab-nav.cemlab-nav-solid .attr-nav li.button > a.btn {
        padding: 10px 18px;
    }
}

/* Mobile sidenav: the current page gets an accent marker. */
@media (max-width: 1023px) {
    nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li.active > a {
        color: var(--cemlab-accent);
        box-shadow: inset 3px 0 0 var(--cemlab-accent);
        padding-left: 12px !important;
    }
}

/* Dark mode. */
body.bg-dark nav.navbar.cemlab-nav.cemlab-nav-solid {
    background: rgba(16, 15, 44, 0.8);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

body.bg-dark nav.navbar.cemlab-nav.cemlab-nav-solid.is-scrolled {
    background: rgba(16, 15, 44, 0.92);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1024px) {
    body.bg-dark nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }

    body.bg-dark nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li > a {
        color: rgba(255, 255, 255, 0.85);
    }

    body.bg-dark nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li > a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }

    body.bg-dark nav.navbar.cemlab-nav.cemlab-nav-solid ul.nav.navbar-nav > li.active > a {
        color: #fff;
        background: var(--cemlab-nav-grad);
    }
}

/* ============================================================================
   Login page (login.html)
   Two panels: a gradient brand panel and the sign-in form.
   ========================================================================== */
.cemlab-login {
    display: grid;
    grid-template-columns: 5fr 7fr;
    max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 70px -30px rgba(20, 19, 59, 0.35);
    border: 1px solid rgba(20, 19, 59, 0.06);
}

.cemlab-login__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 56px 48px;
    overflow: hidden;
    color: #fff;
    background: var(--cemlab-nav-grad, linear-gradient(135deg, #7476ff 0%, #5b5ef0 55%, #44b6e9 100%));
}

/* Soft glowing circles behind the brand panel's text. */
.cemlab-login__aside::before,
.cemlab-login__aside::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.cemlab-login__aside::before {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -120px;
}

.cemlab-login__aside::after {
    width: 220px;
    height: 220px;
    bottom: -90px;
    left: -70px;
}

.cemlab-login__aside-inner {
    position: relative;
    z-index: 1;
}

.cemlab-login__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}

.cemlab-login__aside-title {
    margin-bottom: 12px;
    font-size: 34px;
    line-height: 1.2;
    color: #fff;
}

.cemlab-login__aside p {
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.85);
}

.cemlab-login__perks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cemlab-login__perks li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    font-weight: 500;
}

.cemlab-login__perks i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 15px;
}

.cemlab-login__aside-logo {
    position: relative;
    z-index: 1;
    max-width: 150px;
    opacity: .95;
    /* The only light logo is still coloured; render it white on the gradient. */
    filter: brightness(0) invert(1);
}

.cemlab-login__main {
    padding: 56px 56px 44px;
}

.cemlab-login__title {
    margin-bottom: 10px;
    font-size: 28px;
}

.cemlab-login__desc {
    margin-bottom: 32px;
    color: var(--color-paragraph, #60616c);
}

.cemlab-field {
    margin-bottom: 20px;
}

.cemlab-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading, #14133b);
}

.cemlab-field__control {
    position: relative;
    display: flex;
    align-items: center;
}

.cemlab-field__control > i {
    position: absolute;
    left: 18px;
    color: #9a9bb5;
    pointer-events: none;
    transition: color .2s ease;
}

.cemlab-field__control input {
    width: 100%;
    height: 56px;
    padding: 0 52px 0 48px;
    border: 1.5px solid rgba(20, 19, 59, 0.12);
    border-radius: 14px;
    background: var(--bg-gray, #f5f6fa);
    color: var(--color-heading, #14133b);
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.cemlab-field__control input:focus {
    outline: 0;
    border-color: var(--cemlab-accent, #7476ff);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(116, 118, 255, 0.15);
}

.cemlab-field__control:focus-within > i {
    color: var(--cemlab-accent, #7476ff);
}

.cemlab-field__toggle {
    position: absolute;
    right: 8px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #9a9bb5;
}

.cemlab-field__toggle:hover,
.cemlab-field__toggle:focus-visible {
    color: var(--cemlab-accent, #7476ff);
    background: rgba(116, 118, 255, 0.1);
}

.cemlab-field__error {
    display: block;
    min-height: 0;
    margin-top: 6px;
    font-size: 13px;
    color: #e5484d;
}

/* Same slot as the error, shown while the field is still valid. */
.cemlab-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.65;
}

.cemlab-field.has-error input {
    border-color: #e5484d;
    box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.12);
}

.cemlab-field.is-valid input {
    border-color: #2f9e6b;
}

/* Live notes on the sign-up page (inscription.js): one status line per field… */
.cemlab-field__status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
}

.cemlab-field__status::before,
.cemlab-rules li::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif; /* the theme ships Pro */
    font-weight: 900;
    width: 14px;
    text-align: center;
    flex: none;
}

.cemlab-field__status.is-ok { color: #2f9e6b; }
.cemlab-field__status.is-ok::before { content: "\f00c"; }
.cemlab-field__status.is-bad { color: #e5484d; }
.cemlab-field__status.is-bad::before { content: "\f00d"; }
.cemlab-field__status.is-pending { opacity: 0.65; }
.cemlab-field__status.is-pending::before { content: "\f110"; animation: cemlab-spin 1s linear infinite; }

/* …and a checklist for the password: each rule ticks as it is met. */
.cemlab-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 4px 16px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.cemlab-rules li {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.6;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.cemlab-rules li::before { content: "\f111"; font-weight: 400; font-size: 9px; }
.cemlab-rules li.is-ok { color: #2f9e6b; opacity: 1; }
.cemlab-rules li.is-ok::before { content: "\f00c"; font-weight: 900; font-size: inherit; }
.cemlab-rules li.is-bad { color: #e5484d; opacity: 1; }
.cemlab-rules li.is-bad::before { content: "\f00d"; font-weight: 900; font-size: inherit; }
.cemlab-rules li.is-pending::before { content: "\f110"; font-weight: 900; font-size: inherit; animation: cemlab-spin 1s linear infinite; }

@keyframes cemlab-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cemlab-field__status.is-pending::before,
    .cemlab-rules li.is-pending::before { animation: none; }
}

.cemlab-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 28px;
    font-size: 14px;
}

.cemlab-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    color: var(--color-paragraph, #60616c);
}

.cemlab-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--cemlab-accent, #7476ff);
}

.cemlab-login__link {
    font-weight: 600;
    color: var(--cemlab-accent, #7476ff);
}

.cemlab-login__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 14px;
    background: var(--cemlab-nav-grad, linear-gradient(135deg, #7476ff 0%, #5b5ef0 55%, #44b6e9 100%));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 14px 28px -12px rgba(91, 94, 240, 0.8);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.cemlab-login__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -12px rgba(91, 94, 240, 0.9);
}

.cemlab-login__submit i {
    transition: transform .2s ease;
}

.cemlab-login__submit:hover i {
    transform: translateX(4px);
}

.cemlab-login__submit.is-loading {
    opacity: .7;
    pointer-events: none;
}

.cemlab-login__alert {
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
}

.cemlab-login__alert.is-info {
    background: rgba(116, 118, 255, 0.1);
    color: #4b4dcf;
}

.cemlab-login__alert.is-error {
    background: rgba(229, 72, 77, 0.1);
    color: #c9363b;
}

.cemlab-login__alert.is-success {
    background: rgba(48, 164, 108, 0.12);
    color: #218358;
}

.cemlab-login__help {
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(20, 19, 59, 0.08);
    font-size: 14px;
    text-align: center;
    color: var(--color-paragraph, #60616c);
}

.cemlab-login__help a {
    font-weight: 600;
    color: var(--cemlab-accent, #7476ff);
}

@media (max-width: 991px) {
    .cemlab-login {
        grid-template-columns: 1fr;
    }

    .cemlab-login__aside {
        padding: 40px 32px;
    }

    .cemlab-login__main {
        padding: 40px 32px 32px;
    }
}

@media (max-width: 575px) {
    .cemlab-login {
        border-radius: 18px;
    }

    .cemlab-login__aside,
    .cemlab-login__main {
        padding: 32px 20px;
    }

    .cemlab-login__aside-title {
        font-size: 26px;
    }

    .cemlab-login__title {
        font-size: 23px;
    }

    .cemlab-login__row {
        flex-wrap: wrap;
    }
}

/* Dark mode. */
body.bg-dark .cemlab-login {
    background: #15143a;
    border-color: rgba(255, 255, 255, 0.08);
}

body.bg-dark .cemlab-login__title,
body.bg-dark .cemlab-field label {
    color: #fff;
}

body.bg-dark .cemlab-field__control input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

body.bg-dark .cemlab-field__control input:focus {
    background: rgba(255, 255, 255, 0.08);
}

body.bg-dark .cemlab-login__help {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   Seken-inspired breadcrumb, text motion and scroll percentage
   (markup: .breadcrumb__area on inner pages; behaviour: assets/js/cemlab-fx.js)
   ========================================================================== */

/* ---- Breadcrumb ----------------------------------------------------------- */
.breadcrumb__before {
    position: relative;
}

/* Angled cut into the page below the banner's bottom-right corner. */
.breadcrumb__before::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 520px;
    height: 70px;
    background: var(--white, #fff);
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 3;
}

body.bg-dark .breadcrumb__before::before {
    background: var(--dark, #1f1f1f);
}

.breadcrumb__area {
    position: relative;
    overflow: hidden;
    margin: 16px 16px 0;
    padding: 150px 0 130px;
    border-radius: 22px;
    background-color: #0d0c2b;
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

/* Film-grain texture over the glows. */
.breadcrumb__area::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/shape/breadcrumb/grain.png) center / cover;
    opacity: .06;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

.breadcrumb__shapes > * {
    position: absolute;
    pointer-events: none;
}

/* Blurred colour glows in the CEMLab palette, drifting slowly. */
.breadcrumb__glow {
    width: 620px;
    height: 620px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .75;
    z-index: 0;
}

.breadcrumb__glow--1 { left: -180px; top: -260px; background: #7476ff; animation: fx-drift 14s ease-in-out infinite alternate; }
.breadcrumb__glow--2 { left: 32%; top: 120px; background: #2f2ab8; animation: fx-drift 18s ease-in-out infinite alternate-reverse; }
.breadcrumb__glow--3 { right: -160px; top: -240px; background: #44b6e9; opacity: .55; animation: fx-drift 16s ease-in-out infinite alternate; }

.breadcrumb__shape--squiggle { top: 70px; left: 6%; z-index: 1; }
.breadcrumb__shape--dot { bottom: 56px; left: 12%; z-index: 1; }
.breadcrumb__shape--triangle { top: 42%; left: 36%; z-index: 1; opacity: .8; }
.breadcrumb__shape--chip { top: 64px; right: 7%; width: 110px; z-index: 1; }

.fx-up-down { animation: fx-up-down 1.4s ease-in-out infinite alternate; }
.fx-left-right { animation: fx-left-right 1.4s ease-in-out infinite alternate; }
.fx-glide { animation: fx-glide 9s ease-in-out infinite alternate; }
.fx-glide-reverse { animation: fx-glide-reverse 9s ease-in-out infinite alternate; }

@keyframes fx-up-down { to { transform: translateY(-16px); } }
@keyframes fx-left-right { to { transform: translateX(-16px); } }
@keyframes fx-glide { 50% { transform: translateX(22vw); } 100% { transform: translateX(0); } }
@keyframes fx-glide-reverse { 0% { transform: translateX(0); } 50% { transform: translateX(-18vw); } 100% { transform: translateX(8vw); } }
@keyframes fx-drift { to { transform: translate(60px, 40px) scale(1.08); } }

.breadcrumb__area .container {
    position: relative;
    z-index: 2;
}

.breadcrumb__content {
    text-align: center;
}

.breadcrumb__title {
    margin: 0 0 26px;
    font-size: clamp(34px, 5.4vw, 68px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}

.breadcrumb__menu ul {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 44px;
    margin: 0;
    padding: 0 4px 12px;
    list-style: none;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #7476ff 0%, #59f4ff 100%) 1;
}

.breadcrumb__menu li {
    position: relative;
    line-height: 1;
}

.breadcrumb__menu li:not(:last-child)::before {
    content: "/";
    position: absolute;
    top: 50%;
    right: -27px;
    transform: translateY(-50%);
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
}

.breadcrumb__menu li span,
.breadcrumb__menu li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
}

.breadcrumb__menu li a:hover {
    color: #59f4ff;
}

.breadcrumb__menu li.active span {
    color: rgba(255, 255, 255, .75);
}

@media (max-width: 991px) {
    .breadcrumb__area {
        margin: 0;
        border-radius: 0;
        padding: 110px 0 100px;
    }

    .breadcrumb__before::before {
        width: 300px;
        height: 46px;
    }

    .breadcrumb__shape--triangle {
        display: none;
    }
}

@media (max-width: 575px) {
    .breadcrumb__area {
        padding: 90px 0 80px;
    }

    .breadcrumb__before::before {
        width: 180px;
        height: 32px;
    }

    .breadcrumb__shape--chip {
        width: 70px;
        top: 24px;
        right: 16px;
    }

    .breadcrumb__shape--squiggle {
        top: 20px;
    }

    .breadcrumb__menu ul {
        gap: 34px;
    }

    .breadcrumb__menu li:not(:last-child)::before {
        right: -21px;
    }
}

/* The old banner reserved space for the nav; the new one sits below it. */
body.has-solid-nav .breadcrumb__area {
    margin-top: 16px;
}

@media (max-width: 991px) {
    body.has-solid-nav .breadcrumb__area {
        margin-top: 0;
    }
}

/* ---- Breadcrumb title: letters rise in ------------------------------------ */
.fx-word {
    display: inline-block;
    white-space: nowrap;
}

.fx-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) rotate(4deg);
}

.breadcrumb__area.is-in .fx-char {
    animation: fx-char-in .9s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: calc(var(--i) * 45ms + 150ms);
}

@keyframes fx-char-in {
    to { opacity: 1; transform: none; }
}

/* Hidden only once cemlab-fx.js has armed the banner, so no-JS still shows it. */
.breadcrumb__area.fx-armed .breadcrumb__menu {
    opacity: 0;
    transform: translateY(20px);
}

.breadcrumb__area.is-in .breadcrumb__menu {
    animation: fx-fade-up .8s ease forwards;
    animation-delay: calc(var(--fx-chars, 8) * 45ms + 350ms);
}

/* ---- Section titles: words flip up ------------------------------------------ */
[data-fx="words"] {
    perspective: 500px;
}

.fx-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .08em;
    margin-bottom: -.08em;
}

.fx-w-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(70%) rotateX(-80deg);
    transform-origin: 50% 100%;
}

[data-fx="words"].is-in .fx-w-inner {
    animation: fx-word-in .8s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(var(--i) * 70ms);
}

@keyframes fx-word-in {
    to { opacity: 1; transform: none; }
}

/* ---- Blocks: fade up in a stagger ------------------------------------------- */
[data-fx="fade"] {
    opacity: 0;
    transform: translateY(60px);
}

[data-fx="fade"].is-in {
    animation: fx-fade-up .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: var(--fx-delay, 0ms);
}

@keyframes fx-fade-up {
    to { opacity: 1; transform: none; }
}

/* ---- Scroll percentage ------------------------------------------------------ */
#scroll-percentage {
    position: fixed;
    right: 32px;
    bottom: 110px;
    z-index: 1000;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: conic-gradient(#7476ff 0%, #44b6e9 var(--fx-progress, 0%), rgba(116, 118, 255, .15) var(--fx-progress, 0%));
    box-shadow: 0 10px 28px -10px rgba(91, 94, 240, .6);
    opacity: 0;
    visibility: hidden;
    transform: scale(0) translateY(40px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), visibility .3s;
}

#scroll-percentage.active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#scroll-percentage:hover {
    transform: translateY(-3px);
}

#scroll-percentage-value {
    display: grid;
    place-items: center;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 50%;
    background: #fff;
    color: #5b5ef0;
    font-size: 12px;
    font-weight: 700;
}

#scroll-percentage-value i {
    font-size: 16px;
}

body.bg-dark #scroll-percentage-value {
    background: var(--dark, #1f1f1f);
    color: #fff;
}

@media (max-width: 767px) {
    #scroll-percentage {
        right: 18px;
        bottom: 90px;
        width: 50px;
        height: 50px;
    }
}

/* ---- Reduced motion: show everything, animate nothing ----------------------- */
@media (prefers-reduced-motion: reduce) {
    .fx-char,
    .fx-w-inner,
    [data-fx="fade"],
    .breadcrumb__area .breadcrumb__menu {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .breadcrumb__shapes > * {
        animation: none !important;
    }
}

/* ============================================================================
   Member photos — round avatars in the About carousel and on each profile
   ========================================================================== */
.member-slide__avatar--photo,
.member-profile-avatar--photo {
    position: relative;
    overflow: hidden;
    padding: 4px;
    background: var(--cemlab-nav-grad, linear-gradient(135deg, #7476ff 0%, #5b5ef0 55%, #44b6e9 100%));
}

/* The crop circle clips the photo, so a zoomed image never covers the ring. */
.avatar-crop {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #e9e9f4;
}

.avatar-crop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-slide__avatar--photo {
    box-shadow: 0 12px 26px -12px rgba(91, 94, 240, 0.7);
    transition: transform .4s ease;
}

.member-slide:hover .member-slide__avatar--photo {
    transform: scale(1.05);
}

/* Profile card */
.member-profile-card {
    max-width: 340px;
    margin: 0 auto;
    padding: 40px 28px 32px;
    border-radius: 22px;
    text-align: center;
    background: var(--bg-gray, #f0f2f4);
}

.member-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    margin: 0 auto 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 20px 40px -18px rgba(91, 94, 240, 0.7);
}

.member-profile-avatar--photo {
    padding: 6px;
}

.member-profile-avatar--photo .avatar-crop {
    border-width: 5px;
}

.member-profile-card__name {
    margin-bottom: 8px;
    font-size: 22px;
}

/* Name, grade, CV: one block each, stacked and centred. */
.member-profile-card__grade-row,
.member-profile-card__cv-row {
    display: block;
    text-align: center;
}

.member-profile-card__cv-row {
    margin-top: 16px;
}

.member-profile-card__cv.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    font-size: 14px;
    line-height: 1;
}

.member-profile-card__grade {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(116, 118, 255, 0.12);
    color: var(--cemlab-accent, #7476ff);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 575px) {
    .member-profile-avatar {
        width: 160px;
        height: 160px;
        font-size: 52px;
    }
}

body.bg-dark .member-profile-card {
    background: rgba(255, 255, 255, 0.04);
}

body.bg-dark .member-profile-card__name {
    color: #fff;
}

body.bg-dark .avatar-crop {
    border-color: var(--dark, #1f1f1f);
}

/* ============================================================================
   Sticky header fix
   style.css sets body { overflow-x: hidden }, which makes <body> a scroll
   container and silently disables position: sticky for everything inside it.
   "clip" hides horizontal overflow the same way without that side effect.
   The nav was also sticky inside a <header> exactly its own height, so it had
   no room to stick; the header itself is the sticky element now.
   ========================================================================== */
body {
    overflow-x: clip;
}

body.has-solid-nav > .wrapper > header,
body.has-solid-nav > header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav.navbar.cemlab-nav.cemlab-nav-solid {
    position: relative;
}

/* Member profile: label / value rows in the affiliation panel (had no styles,
   so each label ran straight into its value). */
.member-meta-list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.member-meta-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(20, 19, 59, 0.08);
    color: var(--color-heading, #14133b);
}

.member-meta-list li:last-child {
    border-bottom: 0;
}

.member-meta-list .label {
    flex: 0 0 150px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--cemlab-accent, #7476ff);
}

body.bg-dark .member-meta-list li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Member area (/dashboard) — an approved member's own space
   -------------------------------------------------------------------------- */

.dash {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.dash__side {
    position: sticky;
    top: 110px;
    padding: 24px;
    border: 1px solid #ececf5;
    border-radius: 16px;
    background: #fff;
}

.dash__who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ececf5;
}

.dash__who strong,
.dash__who span {
    display: block;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dash__who span {
    font-size: 12px;
    opacity: 0.6;
}

.dash__avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.dash__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cemlab-accent);
    color: #fff;
    font-weight: 700;
}

.dash__nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: inherit;
    font-size: 15px;
}

.dash__nav a i {
    width: 18px;
    text-align: center;
    opacity: 0.7;
}

.dash__nav a:hover {
    background: rgba(116, 118, 255, 0.08);
}

.dash__nav a.is-active {
    background: rgba(116, 118, 255, 0.14);
    color: var(--cemlab-accent);
    font-weight: 600;
}

.dash__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid #ececf5;
    background: none;
    color: #c9363b;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.dash__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.dash__head h1 {
    margin: 0;
    font-size: 32px;
}

.dash__main .cemlab-login__alert {
    margin: 0 0 20px;
}

.dash-card {
    padding: 26px;
    margin-bottom: 22px;
    border: 1px solid #ececf5;
    border-radius: 16px;
    background: #fff;
}

.dash-card h2 {
    margin: 0 0 18px;
    font-size: 20px;
}

.dash-card--welcome p {
    max-width: 640px;
    margin-bottom: 22px;
}

.dash-muted {
    display: block;
    font-size: 13px;
    opacity: 0.65;
}

.dash-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--cemlab-accent);
    font-weight: 600;
}

/* Overview figures */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.dash-stat {
    padding: 20px;
    border: 1px solid #ececf5;
    border-radius: 14px;
    background: #fff;
}

.dash-stat__num {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.dash-stat__lbl {
    font-size: 13px;
    opacity: 0.65;
}

.dash-stat--primary .dash-stat__num {
    color: var(--cemlab-accent);
}

.dash-stat--success .dash-stat__num {
    color: #218358;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.dash-grid .dash-card {
    margin-bottom: 0;
}

.dash-bar {
    margin-bottom: 14px;
}

.dash-bar__label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 14px;
}

.dash-bar__label small {
    font-weight: 400;
    opacity: 0.6;
}

.dash-bar__track {
    height: 8px;
    border-radius: 8px;
    background: #ececf5;
    overflow: hidden;
}

.dash-bar__track span {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: var(--cemlab-accent);
}

.dash-pub {
    padding: 10px 0;
    border-bottom: 1px solid #ececf5;
}

.dash-pub:last-of-type {
    border-bottom: 0;
}

.dash-pub a {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

/* Forms */
.dash-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

.dash-field--full {
    grid-column: 1 / -1;
}

.dash-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
}

.dash-field input[type="text"],
.dash-field input[type="email"],
.dash-field input[type="url"],
.dash-field input[type="number"],
.dash-field select,
.dash-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #dcdcec;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font-size: 15px;
}

.dash-field input:focus,
.dash-field select:focus,
.dash-field textarea:focus {
    outline: none;
    border-color: var(--cemlab-accent);
    box-shadow: 0 0 0 4px rgba(116, 118, 255, 0.14);
}

.dash-field small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.6;
}

.dash-field.has-error input,
.dash-field.has-error select,
.dash-field.has-error textarea {
    border-color: #e5484d;
}

.dash-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #e5484d;
}

.dash-check {
    margin-top: 10px;
    font-weight: 400;
}

.dash-photo {
    display: flex;
    align-items: center;
    gap: 24px;
}

.dash-photo__preview {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
}

.dash-photo__preview--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ececf5;
    font-size: 40px;
    opacity: 0.6;
}

.dash-form__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.dash-form__actions .dash-link {
    margin: 0;
}

/* Publications list */
.dash-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.dash-filter label {
    margin: 0;
    font-weight: 600;
}

.dash-filter select {
    padding: 9px 12px;
    border: 1px solid #dcdcec;
    border-radius: 10px;
}

.dash-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid #ececf5;
}

.dash-row:first-child {
    padding-top: 0;
}

.dash-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.dash-row__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dash-row__body .pub-type {
    margin: 0 6px 0 0;
}

.dash-row__actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.dash-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #dcdcec;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    cursor: pointer;
}

.dash-icon-btn:hover {
    border-color: var(--cemlab-accent);
    color: var(--cemlab-accent);
}

.dash-icon-btn--danger:hover {
    border-color: #e5484d;
    color: #e5484d;
}

@media (max-width: 991px) {
    .dash {
        grid-template-columns: 1fr;
    }

    .dash__side {
        position: static;
    }

    .dash-grid,
    .dash-form__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .dash-photo {
        flex-direction: column;
        align-items: flex-start;
    }

    .dash-card {
        padding: 20px;
    }
}

/* Dark mode */
body.bg-dark .dash__side,
body.bg-dark .dash-card,
body.bg-dark .dash-stat,
body.bg-dark .dash-icon-btn {
    background: #15143a;
    border-color: rgba(255, 255, 255, 0.08);
}

body.bg-dark .dash-field input,
body.bg-dark .dash-field select,
body.bg-dark .dash-field textarea,
body.bg-dark .dash-filter select {
    background: #1d1c4a;
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body.bg-dark .dash__who,
body.bg-dark .dash__logout,
body.bg-dark .dash-pub,
body.bg-dark .dash-row {
    border-color: rgba(255, 255, 255, 0.08);
}

body.bg-dark .dash-bar__track {
    background: rgba(255, 255, 255, 0.1);
}