@charset "utf-8";
body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    padding-top: 5.0rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}

.card {
    border-radius: 0.8rem!important;
}

.card-img-overlay {
    border-radius: 0.8rem!important;
}

.rounded-xl {
    border-radius: 0.8rem!important;
}

.rounded-xl-bottom {
    border-bottom-right-radius: 0.8rem !important;
    border-bottom-left-radius: 0.8rem !important;
}

.rounded-xl-top {
    border-top-left-radius: 0.8rem !important;
    border-top-right-radius: 0.8rem !important;
}


.text-profile-position {
    font-weight: 400;
}

.text-profile-bio {
    /* font-family: "Raleway"; */
    font-weight: 400;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.inline-badge {
    height: 16px;
    vertical-align: -10%;
    margin-right: 2px;
    line-break: unset;
}

.no-break {
    white-space: nowrap;
}

.cover-image {
    width: 180px;
    max-height: 120px;
}

.abstract-body {
    min-height: 100px;
}

img.lazy {
    background-image: url('images/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
}

div.lazy {
    background-image: url('images/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
}

.badge-publication {
    font-size: 100%;
}

.email-text {
    font-family: Source Code Pro, monospace;
}

.badge-custom {
    font-size: 100%;
}

.email-text {
    font-family: Courier, monospace;
}

.text-black {
  color: #000 !important;
}

a.text-black:link,
a.text-black:visited{
  color: #000;
  text-decoration: none;
}
a.text-black:hover,
a.text-black:active{
  color: #000;
  text-decoration: none;
}

/* ===== i18n Language Toggle ===== */
.lang-zh {
    display: none !important;
}

html.lang-active-zh .lang-en {
    display: none !important;
}

html.lang-active-zh .lang-zh {
    display: inline !important;
}

/* Language toggle switch */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d0dde8;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.8rem;
    margin-left: 0.75rem;
    cursor: pointer;
    vertical-align: middle;
}

.lang-toggle-label {
    padding: 0.2rem 0.5rem;
    color: #999;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.4;
}

.lang-toggle-label:hover {
    color: #4a7298;
}

.lang-toggle-active {
    background-color: #4a7298;
    color: #fff !important;
    font-weight: 500;
}

.lang-toggle-divider {
    width: 1px;
    background-color: #d0dde8;
    height: 1rem;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/* ===== Dark Mode Overrides ===== */
[data-theme="dark"] body {
    background-color: #121212 !important;
    color: #e0e0e0;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .card,
[data-theme="dark"] .navbar {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text,
[data-theme="dark"] .nav-link,
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] a.text-black {
    color: #e0e0e0 !important;
}

/* Update particles background color for dark mode */
[data-theme="dark"] #particles-js {
    background-color: #121212 !important;
}

/* Ensure hovered links stay readable */
[data-theme="dark"] a.text-black:hover,
[data-theme="dark"] a.text-black:active {
    color: #90caf9 !important;
}

/* 1. Override the explicit 'bg-white' class on the outer container */
[data-theme="dark"] .bg-white {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* 2. Override the hardcoded inline rgba(255,255,255) in the mobile view */
[data-theme="dark"] .d-md-none .w-100 {
    background-color: rgba(30, 30, 30, 0.9) !important;
}

/* 3. Darken the internal border lines so they don't glow bright gray */
[data-theme="dark"] .border-gray {
    border-color: #333 !important;
}

/* 4. Ensure titles and headers stay crisp and white */
[data-theme="dark"] .bg-white h5,
[data-theme="dark"] .bg-white h6 {
    color: #ffffff !important;
}

/* 5. Brighten the 'text-muted' class (the abstract text) so it's readable on dark backgrounds */
[data-theme="dark"] .text-muted {
    color: #aaaaaa !important; 
}

[data-theme="dark"] .text-black {
    color: #e0e0e0 !important;
}

/* 6. Bulletproof targeting for author lists and publication details */
[data-theme="dark"] .bg-white p.small,
[data-theme="dark"] .bg-white p.small a,
[data-theme="dark"] .bg-white p.small span:not(.badge),
[data-theme="dark"] .d-md-none .w-100 p.small,
[data-theme="dark"] .d-md-none .w-100 p.small a,
[data-theme="dark"] .d-md-none .w-100 p.small span:not(.badge) {
    color: #e0e0e0 !important;
}

/* 7. Restore the slightly dimmer color for the abstract paragraph so it maintains visual hierarchy */
[data-theme="dark"] .bg-white p.text-muted,
[data-theme="dark"] .d-md-none .w-100 p.text-muted {
    color: #aaaaaa !important;
}