/* ==================================================
   Dark Mode — toggle button + supplementary overrides
   The theme's own .bg-dark / .text-light utility classes
   (already used ~160+ times throughout style.css) handle
   most of the page when applied to <body>. This file only
   patches the custom components added for CEMLab that
   the theme's dark cascade doesn't already cover.
=================================================== */

.dark-mode-toggle .btn-dark-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: white;
    color: var(--color-heading);
    font-size: 16px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.dark-mode-toggle .btn-dark-toggle:hover {
    background: var(--bg-gray);
}

.navbar.white .dark-mode-toggle .btn-dark-toggle {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--white);
}

.navbar.white .dark-mode-toggle .btn-dark-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.bg-dark .dark-mode-toggle .btn-dark-toggle {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
}

body.bg-dark .dark-mode-toggle .btn-dark-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang-toggle .btn-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #9e9e9e2b;
    color: var(--color-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.lang-toggle .btn-lang-toggle:hover {
    background: var(--bg-gray);
}

.navbar.white .lang-toggle .btn-lang-toggle {
    border-color: rgba(255, 255, 255, 0.4);
    color: #03a9f4;
}

.navbar.white .lang-toggle .btn-lang-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.bg-dark .lang-toggle .btn-lang-toggle {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
}

body.bg-dark .lang-toggle .btn-lang-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Members directory (team.html) */
body.bg-dark .result-count,
body.bg-dark .members-directory .filter-bar label {
    color: var(--white-secondary);
}

/* Scientific Production (resources.html) */
body.bg-dark .scientific-production .result-count {
    color: var(--white-secondary);
}

/* Publications table (team-details.html) */
body.bg-dark .table {
    color: var(--white);
}

body.bg-dark .table thead th {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.2);
}

body.bg-dark .table td,
body.bg-dark .table th {
    border-color: rgba(255, 255, 255, 0.1);
}

body.bg-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--white);
}

body.bg-dark .text-muted {
    color: var(--white-secondary) !important;
}

/* ============================================================================
   Dark mode surfaces
   body.bg-dark + body.text-light (set by assets/js/dark-mode.js) turned all text
   white, but the theme's cards keep their white backgrounds - white on white.
   These rules give every card surface a dark ground and readable ink.

   Tokens first, so a surface colour is changed in one place.
   ========================================================================== */
body.bg-dark {
    --cemlab-dark-surface: #1c1c24;
    --cemlab-dark-surface-2: #23232d;
    --cemlab-dark-border: rgba(255, 255, 255, 0.12);
    --cemlab-dark-ink: #f2f2f5;
    --cemlab-dark-ink-muted: #b9b9c6;
}

/* Card and panel surfaces across the site. */
body.bg-dark .item,
body.bg-dark .blog-style-one,
body.bg-dark .blog-item-box .item,
body.bg-dark .sidebar-item,
body.bg-dark .publication-item,
body.bg-dark .pub-field,
body.bg-dark .pub-search,
body.bg-dark .project-style-one-item,
body.bg-dark .project-style-two-item,
body.bg-dark .card-style-one-two,
body.bg-dark .testimonial-style-three,
body.bg-dark .cemlab-topic-card,
body.bg-dark .member-card,
body.bg-dark .empty-state,
body.bg-dark .cemlab-pagination li > a,
body.bg-dark .cemlab-pagination li > span {
    background: var(--cemlab-dark-surface);
    border-color: var(--cemlab-dark-border);
    color: var(--cemlab-dark-ink);
}

/* Headings and links inside those surfaces must not stay near-black. */
body.bg-dark .item h2, body.bg-dark .item h3, body.bg-dark .item h4,
body.bg-dark .item h5, body.bg-dark .item a,
body.bg-dark .sidebar-item h4, body.bg-dark .sidebar-item a,
body.bg-dark .publication-item a, body.bg-dark .pub-title,
body.bg-dark .cemlab-topic-body h4,
body.bg-dark .blog-title, body.bg-dark .widget-title {
    color: var(--cemlab-dark-ink);
}

body.bg-dark p,
body.bg-dark .pub-meta,
body.bg-dark .blog-one-meta,
body.bg-dark .cemlab-pagination__summary,
body.bg-dark .cemlab-topic-body p {
    color: var(--cemlab-dark-ink-muted);
}

/* Form controls were white-on-white too. */
body.bg-dark input[type="text"],
body.bg-dark input[type="search"],
body.bg-dark input[type="email"],
body.bg-dark select,
body.bg-dark textarea,
body.bg-dark .form-control {
    background: var(--cemlab-dark-surface-2);
    border-color: var(--cemlab-dark-border);
    color: var(--cemlab-dark-ink);
}

body.bg-dark ::placeholder {
    color: var(--cemlab-dark-ink-muted);
    opacity: 1;
}

/* ---- Hover ----------------------------------------------------------------
   In dark mode the light-theme hovers washed out to near-invisible. Lift the
   surface and add a ring instead of relying on a brightness change alone. */
body.bg-dark .item:hover,
body.bg-dark .blog-style-one:hover,
body.bg-dark .publication-item:hover,
body.bg-dark .project-style-one-item:hover,
body.bg-dark .project-style-two-item:hover,
body.bg-dark .cemlab-topic-card:hover,
body.bg-dark .card-style-one-two:hover {
    background: var(--cemlab-dark-surface-2);
    border-color: var(--cemlab-accent, #7476ff);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    transform: translateY(-3px);
}

body.bg-dark a:hover,
body.bg-dark .sidebar-item a:hover,
body.bg-dark .item a:hover {
    color: var(--cemlab-accent, #7476ff);
}

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

/* Keyboard users get the same affordance as the mouse. */
body.bg-dark a:focus-visible,
body.bg-dark button:focus-visible,
body.bg-dark input:focus-visible,
body.bg-dark select:focus-visible {
    outline: 2px solid var(--cemlab-accent, #7476ff);
    outline-offset: 2px;
}

/* ============================================================================
   Dark mode, round two — found by screenshotting every page in both themes.

   Three separate causes, all producing text the same colour as what sat behind
   it:

   1. news-article.css was extracted from a light-only template. Its colour ramp
      is scoped to .cemlab-article and had no dark variant, so the article title
      and body stayed near-black while the page went dark, and the sidebar kept
      a white card in the middle of a dark page.
   2. The news sidebar (recent posts, categories, archives) and the members
      directory take link colours from the base theme, which are dark navy.
   3. The header "Login" pill is near-white on white.
   ========================================================================== */

/* ---- 1. The ported article layout ---------------------------------------- */
body.bg-dark .cemlab-article {
    --rr-common-white: #1c1c24;
    --rr-common-black: #f2f2f5;
    --rr-text-body: #c9c9d4;
    --rr-heading-primary: #f2f2f5;
}

body.bg-dark .cemlab-article,
body.bg-dark .cemlab-article p,
body.bg-dark .cemlab-article li,
body.bg-dark .cemlab-article .dec,
body.bg-dark .cemlab-article .dec-2,
body.bg-dark .cemlab-article .dec-3,
body.bg-dark .cemlab-article .blog__details-body {
    color: #c9c9d4;
}

body.bg-dark .cemlab-article h1,
body.bg-dark .cemlab-article h2,
body.bg-dark .cemlab-article h3,
body.bg-dark .cemlab-article h4,
body.bg-dark .cemlab-article h5,
body.bg-dark .cemlab-article .title,
body.bg-dark .cemlab-article strong {
    color: #f2f2f5;
}

/* The meta row sat at rgba(5,5,5,.7) — invisible on a dark ground. */
body.bg-dark .cemlab-article .blog__details-meta li,
body.bg-dark .cemlab-article .blog__details-meta li a,
body.bg-dark .cemlab-article .post-meta li {
    color: #b9b9c6;
}

/* Cards inside the article layout: pull quote, sidebar widgets, author box. */
body.bg-dark .cemlab-article .sidebar__widget,
body.bg-dark .cemlab-article .blog__details-content-quite,
body.bg-dark .cemlab-article .blog__details-content-author-box,
body.bg-dark .cemlab-article .sidebar-post,
body.bg-dark .cemlab-article .search__bar {
    background: #1c1c24;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f2f2f5;
}

body.bg-dark .cemlab-article .sidebar__widget a,
body.bg-dark .cemlab-article .sidebar__widget-category a,
body.bg-dark .cemlab-article .sidebar-post a,
body.bg-dark .cemlab-article .sidebar-post .title,
body.bg-dark .cemlab-article .blog__details-bottom-tags a {
    color: #f2f2f5;
}

body.bg-dark .cemlab-article .sidebar__widget a:hover,
body.bg-dark .cemlab-article .sidebar__widget-category a:hover {
    color: var(--cemlab-accent, #7476ff);
}

/* The contact widget's mail and phone links were white on a white card. */
body.bg-dark .cemlab-article .sidebar__widget p a {
    color: #c9c9d4;
}

/* ---- 2. News sidebar and members directory ------------------------------- */
body.bg-dark .sidebar-item a,
body.bg-dark .sidebar-item .post-date,
body.bg-dark .sidebar-item li,
body.bg-dark .sidebar-item .title h4,
body.bg-dark .recent-post .info a,
body.bg-dark .category .sidebar-info a,
body.bg-dark .archives .sidebar-info a,
body.bg-dark .members-directory a,
body.bg-dark .member-card a,
body.bg-dark .member-card h4 {
    color: #f2f2f5;
}

body.bg-dark .members-directory a:hover,
body.bg-dark .member-card a:hover {
    color: var(--cemlab-accent, #7476ff);
}

/* Counts beside a category read as secondary. */
body.bg-dark .sidebar-item .sidebar-info span {
    color: #b9b9c6;
}

/* ---- 3. Header login pill ------------------------------------------------ */
body.bg-dark .attr-nav li.button > a,
body.bg-dark li.button > a {
    background: var(--cemlab-accent, #7476ff);
    color: #ffffff;
}

/* ---- Remaining card links ------------------------------------------------
   Deliberately last and deliberately narrow: colours only, never layout. */
body.bg-dark .blog-area .item h2 a,
body.bg-dark .blog-area .item h3 a,
body.bg-dark .blog-area .item h4 a,
body.bg-dark .blog-area .info a {
    color: #f2f2f5;
}

/* ---- Round three: what the second screenshot pass still showed ------------ */

/* The category rows put their colour on the inner spans, not the <a>, so
   colouring the link alone left the label and the count unchanged. */
body.bg-dark .cemlab-article .sidebar__widget-category a span,
body.bg-dark .cemlab-article .sidebar__widget-category a i,
body.bg-dark .cemlab-article .sidebar__widget-tags a,
body.bg-dark .sidebar__widget-category a span {
    color: #e8e8ee;
}

body.bg-dark .cemlab-article .sidebar__widget-category a:hover span,
body.bg-dark .cemlab-article .sidebar__widget-category a:hover i {
    color: var(--cemlab-accent, #7476ff);
}

/* The recent-post category label was muted to the point of vanishing against
   the darker card; lift it to the secondary ink used elsewhere. */
body.bg-dark .cemlab-article .sidebar-post .post-meta li {
    color: #a9a9ba;
}

/* "Get In Touch" is a yellow pill with white text — about 1.7:1. The button
   already carries its own background, so only the label needs correcting. */
body.bg-dark .cemlab-article .rr-btn,
body.bg-dark .rr-btn {
    color: #14133b;
    font-weight: 600;
}

/* ---- Round four: the members directory's own chrome -----------------------
   The stat chips, the grade filter and the pagination are Bootstrap-ish
   components that kept white surfaces on a dark page. The pagination was the
   worst of them: pages 2-10 were light grey on white and effectively gone. */
body.bg-dark .stat-chip {
    background: var(--cemlab-dark-surface);
    border-color: var(--cemlab-dark-border);
    color: var(--cemlab-dark-ink);
}

/* The figure itself is set in the theme's dark navy, which all but disappears
   on a dark chip — lift it to the accent so it stays the loudest thing there. */
body.bg-dark .stat-chip strong,
body.bg-dark .stat-chip b,
body.bg-dark .stat-chip .value,
body.bg-dark .stat-chip span:first-child,
body.bg-dark .stat-chip > *:first-child {
    color: #9a9cff;
}

body.bg-dark .stat-chip small,
body.bg-dark .stat-chip span:last-child {
    color: var(--cemlab-dark-ink-muted);
}

body.bg-dark .filter-bar select,
body.bg-dark .filter-bar input {
    background: var(--cemlab-dark-surface-2);
    border-color: var(--cemlab-dark-border);
    color: var(--cemlab-dark-ink);
}

body.bg-dark .result-count {
    color: var(--cemlab-dark-ink-muted);
}

body.bg-dark .pagination .page-link,
body.bg-dark .pagination li > a,
body.bg-dark .pagination li > span,
body.bg-dark .pagination li > button {
    background: var(--cemlab-dark-surface);
    border-color: var(--cemlab-dark-border);
    color: var(--cemlab-dark-ink);
}

body.bg-dark .pagination .page-link:hover,
body.bg-dark .pagination li > a:hover,
body.bg-dark .pagination li > button:hover,
body.bg-dark .pagination .active .page-link,
body.bg-dark .pagination li.active > a,
body.bg-dark .pagination li.active > span,
body.bg-dark .pagination li.active > button {
    background: var(--cemlab-accent, #7476ff);
    border-color: var(--cemlab-accent, #7476ff);
    color: #ffffff;
}

body.bg-dark .pagination .disabled .page-link,
body.bg-dark .pagination li.disabled > span,
body.bg-dark .pagination li.disabled > button {
    opacity: .45;
}