/* ==========================================================================
   Sky-aesthetic theme — shared across every page of the portfolio.
   Inspired by Saining Xie's academic minimalism, retuned with sky-blue as
   the dominant accent tone. Link, heading, nav-brand, and card colors all
   come from the Tailwind sky palette (500–700) on a slate-700 body text.

   Palette reference:
     sky-50   #F0F9FF   (card backgrounds)
     sky-100  #E0F2FE
     sky-200  #BAE6FD   (card borders)
     sky-300  #7DD3FC
     sky-400  #38BDF8   (link hover)
     sky-500  #0EA5E9   (main link color)
     sky-600  #0284C7
     sky-700  #0369A1   (headings, nav brand)
     sky-800  #075985
     sky-900  #0C4A6E
     slate-700 #334155  (body text)
   ========================================================================== */

/* Override the template's `--themecolor` CSS variable (originally #2a98f9
   in css/style.css:8) with sky-900. Everything the template uses the
   variable for — active nav-link color, hover-underline background,
   services/contact icon tints — automatically picks up the new value.
   Specific rules I've already overridden (like .navbar-brand:after) still
   win because they set the property directly, not via var(). */
:root {
    --themecolor: #0C4A6E;
}

/* --------- Typography ---------------------------------------------------- */

body,
.ftco-section,
.ftco-section p,
.ftco-section li,
.ftco-section span:not(.icon):not(.oi) {
    font-family: "Lato", "Poppins", Verdana, Helvetica, sans-serif !important;
    color: #334155;
}

/* !important on <p> so it overrides inline color:#000 on paragraphs.
   NO !important on <li> spans so inline brand colors (e.g., Google
   colored letters) can still win over this rule. */
.ftco-section p {
    color: #334155 !important;
}
.ftco-section li span:not(.icon):not(.oi) {
    color: #334155;
}

/* --------- Headings ------------------------------------------------------ */

.ftco-section h1,
.ftco-section h2,
.ftco-section h3,
.ftco-section h4,
.ftco-section h5,
.ftco-section h6 {
    font-family: "Lato", "Poppins", sans-serif !important;
    font-weight: 700;
    color: #0C4A6E !important; /* sky-900: deeper default accent */
    letter-spacing: -0.01em;
}

/* --------- Navbar brand -------------------------------------------------- */

#navbar-brand,
.navbar-brand {
    font-family: "Lato", sans-serif !important;
    font-weight: 700;
    color: #0C4A6E !important;
    letter-spacing: -0.01em;
}

/* Rotating name ("Huy Le" / "Le Huy"):
   Dark sky-900 text so the name reads as the clear foreground element —
   strong contrast on both the white navbar background AND on top of the
   sky-400 circle that sits behind it. Higher z-index pushes the text
   above the circle so the circle remains a backdrop accent.

   IMPORTANT: main.js wraps the actual text in <span class="wrap"> on every
   tick, and css/style.css has `.navbar-brand span { color: #000; }` which
   targets that inner span directly (specificity 11). We therefore MUST set
   the color on `.wrap` itself, not just on `.txt-rotate` — otherwise
   inheritance loses to the template's direct-span rule and the text
   renders black. */
.navbar-brand .txt-rotate,
#navbar-brand .txt-rotate,
.navbar-brand .txt-rotate .wrap,
#navbar-brand .txt-rotate .wrap,
.navbar-brand .txt-rotate > .wrap,
#navbar-brand .txt-rotate > .wrap {
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: #0C4A6E !important; /* sky-900 — dark, pops cleanly on white + pastel circle */
    position: relative;
    z-index: 2; /* lift above the ::after circle for clear foreground */
}

/* Original template's circle layout behind the brand (40x40, left:-12px)
   retinted as a darker sky-400 accent. Explicit z-index keeps the circle
   firmly in the background (behind text which sits at z-index:2). */
.navbar-brand:after,
#navbar-brand:after {
    background: #BAE6FD !important; /* sky-200 — soft pastel, high contrast with dark text */
    width: 40px !important;
    height: 40px !important;
    left: -12px !important;
    border-radius: 50% !important;
    z-index: 0 !important; /* explicitly behind the rotating text */
    animation: sky-breathe 4.5s ease-in-out infinite;
}

@keyframes sky-breathe {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-50%) scale(1.06);
        opacity: 0.82;
    }
}

/* Mobile: fix navbar-brand width so the toggler button doesn't shift
   as the rotating text types/deletes characters.
   Only applies at <=991.98px where the toggler is visible. */
@media (max-width: 991.98px) {
    .navbar-brand,
    #navbar-brand {
        width: 110px;  /* fixed width — prevents flex reflow during text rotation */
        min-width: 110px;
        flex-shrink: 0;
    }

    /* Pin the toggler & theme-toggle so they never move regardless of brand content width */
    .ftco_navbar .navbar-toggler,
    .ftco_navbar .theme-toggle {
        flex-shrink: 0;
    }

    .ftco_navbar .navbar-toggler {
        margin-left: auto;
    }

    /* Ensure the nav container uses a stable flex layout */
    #ftco-navbar .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
    .navbar-brand .txt-rotate,
    #navbar-brand .txt-rotate,
    .navbar-brand:after,
    #navbar-brand:after {
        animation: none !important;
    }
}

/* Keep nav links readable & on-theme */
.ftco_navbar .nav-link {
    font-family: "Lato", "Poppins", sans-serif !important;
}
.ftco_navbar .nav-link:hover,
.ftco_navbar .nav-item.active > .nav-link {
    color: #0C4A6E !important;
}

/* --------- In-content links ---------------------------------------------- */
/* Covers <p>, <li>, <span>, <div>, and <td> wrapped links across pages so the
   Jekyll publication include (archive-single.html) and other table/div links
   are themed consistently. Buttons and nav links are excluded explicitly. */

.ftco-section p a,
.ftco-section li a,
.ftco-section span a,
.ftco-section td a,
.ftco-section div a:not(.nav-link):not(.navbar-brand):not(.button):not(.external-link) {
    font-weight: 700;
    color: #0369A1 !important; /* sky-700: main tone, overrides inline color */
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
.ftco-section p a:hover,
.ftco-section li a:hover,
.ftco-section span a:hover,
.ftco-section td a:hover,
.ftco-section div a:not(.nav-link):not(.navbar-brand):not(.button):not(.external-link):hover {
    color: #0EA5E9 !important; /* sky-500: lighter pop on hover */
    text-decoration: underline;
}

/* ==================================================================
   Publication entries — visual hierarchy
   ------------------------------------------------------------------
   Within each row we build a clear reading order through color, weight,
   and size, all within one coherent sky+slate palette:

       Title   (sky-900, 800wt, 1.1em)      ← dominant, first read
       You     (sky-900, 700wt)             ← ties you to the title
       Others  (slate-500, 500wt)           ← recessive supporting cast
       Venue   (sky-700, 700wt italic)     ← secondary prominence
       Year    (slate-500, 400wt)          ← metadata
       Award   (amber-600, 700wt)           ← warm accent, pops
       Workshop(sky-600, 600wt, underline) ← sub-link, lower rank
       Buttons (slate-600 label + sky-500 icon, sky-700 hover)
   ================================================================== */

/* Remove border from the last publication entry so it doesn't create
   a double-line with the footer's border-top */
.resume-wrap:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Base table text */
.publication-table,
.publication-table td,
.publication-table p {
    color: #334155 !important;
    font-family: "Lato", "Poppins", sans-serif !important;
}

/* --- Title (most prominent) ---
   Covers both <a class="pub1"> (linked paper) and <span class="pub1">
   (unlinked paper) so the title looks visually identical whether or
   not it has a clickable URL. Only the anchor variant hovers. */
.publication-table .pub1,
.publication-table a.pub1,
.publication-table span.pub1,
.publication-table .pub1 b,
.publication-table a.pub1 b,
.publication-table span.pub1 b {
    color: #0C4A6E !important; /* sky-900 */
    font-weight: 800 !important;
    font-size: 1em;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
.publication-table a.pub1:hover,
.publication-table a.pub1:hover b {
    color: #0EA5E9 !important; /* sky-500 pop (hover only on anchor) */
    text-decoration: underline;
}

/* --- Author list ---
   All authors use the SAME sky-700 color — linked, unlinked, Huy, others,
   all indistinguishable by color. The only differentiation is font weight:
   Huy renders at 800 (extra bold) to mark "this is me"; every other author
   renders at 500 (medium). Hover still deepens the color on linked names
   for an interaction cue. */
.publication-table .authors-info,
.publication-table .authors-info p.authors-line,
.publication-table .authors-info p.authors-line * {
    color: #0369A1 !important; /* sky-700 — same as venue, links, theme accent */
    font-weight: 500 !important;
    font-size: 1em;
    line-height: 1.45;
}
.publication-table .authors-info a {
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
.publication-table .authors-info a:hover {
    color: #0C4A6E !important; /* sky-900 on hover — slightly deeper */
    text-decoration: underline;
}
/* Your own name — SAME color as every other author, distinguished only
   by a heavier bold weight so the eye still picks you out in the list.
   Selectors include .ftco-section to beat the broad link rule's specificity
   (.ftco-section div a:not(...) = 0-5-2). */
.ftco-section .publication-table .authors-info a.pub-me,
.ftco-section .publication-table .authors-info .pub-me,
.ftco-section .publication-table .authors-info p.authors-line a.pub-me,
.ftco-section .publication-table .authors-info p.authors-line .pub-me {
    color: #0369A1 !important; /* sky-700 — identical to other authors */
    font-weight: 900 !important; /* black weight — heavier than others (500) for clear distinction */
}
.ftco-section .publication-table .authors-info a.pub-me:hover {
    color: #0C4A6E !important;
}

/* --- Venue + year ---
   One color for this level, distinct from authors (sky-700) and title
   (sky-900). Uses sky-800 — sits between the two, giving the venue a
   "sub-heading" feel while keeping the sky-family progression:
       Title (sky-900) > Venue (sky-800) > Authors (sky-700)
*/
.publication-table .pub-venue,
.publication-table .pub-venue *,
.publication-table .pub-year {
    color: #075985 !important; /* sky-800 */
}
.publication-table .pub-venue {
    font-weight: 500;
    font-size: 1em;
}
.publication-table .pub-venue i,
.publication-table .pub-venue i b,
.publication-table .pub-venue > b {
    font-weight: 700;
}
.publication-table .pub-year {
    font-weight: 400;
}

/* --- Award / "Additional" highlight (Oral, Best Paper, Runner-up, …) --- */
.publication-table .pub-additional {
    color: #D97706 !important; /* amber-600 — warm sunset accent */
    font-weight: 700;
    font-size: 1em;
}
.publication-table .pub-additional b {
    color: #D97706 !important;
    font-weight: 700;
}
.publication-table .pub-additional-sep {
    color: #64748B !important;
    font-weight: 400;
}

/* --- Workshop sub-link (lower than title) --- */
.publication-table a.pub-workshop {
    color: #0284C7 !important; /* sky-600 */
    font-weight: 700 !important;
    font-size: 1em;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
.publication-table a.pub-workshop u {
    text-decoration: underline;
}
.publication-table a.pub-workshop:hover {
    color: #0EA5E9 !important; /* sky-500 */
}

/* --- Action buttons (arXiv / Code / Project Page) ---
   Colors match the index-page top contact buttons for consistency:
   slate-700 default, sky-700 hover. Label + icon share the same color
   so the whole button deepens as one unit. Layout is left untouched —
   the template's native Bulma .button.is-small.is-ghost handles it.

   CRITICAL RESET: publication entries are wrapped in <div class="resume-wrap">
   which triggers .resume-wrap .icon in style.css — that rule turns any
   .icon span into a 50x50 themecolor circle with white text (intended for
   CV timeline entries). We must flatten that shape back to inline so our
   publication buttons render correctly. */
.resume-wrap .publication-table .icon,
.publication-table .icon,
.publication-table .pub-btn .icon {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
}
.resume-wrap .publication-table .icon span,
.publication-table .icon span,
.publication-table .pub-btn .icon span {
    color: inherit !important;
    font-size: inherit !important;
}

.publication-table a.pub-btn {
    color: #334155 !important; /* slate-700 — matches index contact buttons */
    font-weight: 700 !important;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
.publication-table a.pub-btn .icon,
.publication-table a.pub-btn .icon i {
    color: #334155 !important; /* slate-700 — icon inherits from button */
}
.publication-table a.pub-btn:hover,
.publication-table a.pub-btn:hover .icon,
.publication-table a.pub-btn:hover .icon i {
    color: #0369A1 !important; /* sky-700 hover — label + icon deepen together */
}

/* --------- Recent News / cards --------
   Neutral light gray (no blue tint) — matches Saining Xie's academic
   minimalism where cards sit on soft warm-neutral backgrounds instead
   of colored tints. */

.update-news-box,
.sky-card {
    background-color: #F5F5F5 !important; /* neutral-100 — pure light gray */
    border: 1px solid #E5E5E5 !important;  /* neutral-200 — soft gray edge */
    color: #334155 !important;
}
.update-news-box strong,
.sky-card strong {
    color: #0C4A6E;
}

/* --------- External contact buttons (Email / Scholar / GitHub / …) ------ */

.external-link.button.is-light {
    color: #334155 !important; /* slate-700 default, matches body text */
    transition: color 0.15s ease-in-out;
}
.external-link.button.is-light:hover {
    color: #0369A1 !important; /* sky-700 on hover */
}

/* --------- Footer -------------------------------------------------------- */

footer.ftco-footer p,
footer.ftco-footer span {
    color: #334155 !important;
}

/* Footer social icons — force slate-700 (matching the index-page top
   contact buttons) so the footer icons look the same across every page.
   The selector below matches the broad link rule's specificity (4 :not
   classes) but comes later in source order, so it wins the cascade. */
footer.ftco-footer a,
footer.ftco-footer div a,
footer.ftco-footer div a:not(.nav-link):not(.navbar-brand):not(.button):not(.external-link),
footer.ftco-footer .footer-icons a,
footer.ftco-footer .col-12 a {
    color: #334155 !important; /* slate-700 — same as index top buttons */
    font-weight: 400 !important;
    transition: color 0.15s ease-in-out;
}
footer.ftco-footer a:hover,
footer.ftco-footer div a:hover,
footer.ftco-footer div a:not(.nav-link):not(.navbar-brand):not(.button):not(.external-link):hover,
footer.ftco-footer .footer-icons a:hover,
footer.ftco-footer .col-12 a:hover {
    color: #0369A1 !important; /* sky-700 hover accent, subtle */
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

/* --------- Theme toggle button ------------------------------------------- */

/* The toggle button lives OUTSIDE the collapsible #ftco-nav so it's
   always visible on mobile next to the hamburger.  On desktop (lg+)
   it sits at the far right after the nav links via order + ml-auto.
   Sizing mirrors .ftco-navbar-light .navbar-nav > .nav-item > .nav-link
   (font-size 23px, padding .7rem top/bottom) so baselines match. */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding-top: .7rem;
    padding-bottom: .7rem;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px;
    color: #334155;
    transition: color 0.2s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* On desktop, add left spacing so it doesn't crowd the last nav link */
@media (min-width: 992px) {
    .theme-toggle {
        padding-left: 20px;
        padding-right: 0;
    }
}
.theme-toggle:hover {
    color: #0369A1;
    transform: rotate(15deg);
}
.theme-toggle:focus {
    outline: none;
}
/* Show/hide sun vs moon icon based on theme */
[data-theme="dark"] .theme-toggle .fa-moon { display: none; }
[data-theme="dark"] .theme-toggle .fa-sun  { display: inline-block; }
.theme-toggle .fa-sun  { display: none; }
.theme-toggle .fa-moon { display: inline-block; }

/* --------- Dark mode overrides ------------------------------------------- */

[data-theme="dark"] body,
[data-theme="dark"] .ftco-section,
[data-theme="dark"] html {
    background-color: #0F172A !important; /* slate-900 */
}

[data-theme="dark"] body,
[data-theme="dark"] .ftco-section,
[data-theme="dark"] .ftco-section p,
[data-theme="dark"] .ftco-section li,
[data-theme="dark"] .ftco-section span:not(.icon):not(.oi) {
    color: #CBD5E1; /* slate-300 */
}

[data-theme="dark"] .ftco-section p {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .ftco-section li span:not(.icon):not(.oi) {
    color: #CBD5E1;
}

/* Headings */
[data-theme="dark"] .ftco-section h1,
[data-theme="dark"] .ftco-section h2,
[data-theme="dark"] .ftco-section h3,
[data-theme="dark"] .ftco-section h4,
[data-theme="dark"] .ftco-section h5,
[data-theme="dark"] .ftco-section h6 {
    color: #7DD3FC !important; /* sky-300 */
}

/* Navbar */
[data-theme="dark"] .ftco_navbar,
[data-theme="dark"] #ftco-navbar,
[data-theme="dark"] .ftco_navbar.bg-white,
[data-theme="dark"] nav.bg-white,
[data-theme="dark"] .ftco-navbar-light {
    background-color: #0F172A !important;
    background: #0F172A !important;
    border-bottom: 1px solid #1E293B;
}
[data-theme="dark"] .ftco_navbar.scrolled,
[data-theme="dark"] .ftco-navbar-light.scrolled {
    background-color: #0F172A !important;
    background: #0F172A !important;
}
/* style.css forces color:#000000 !important on scrolled nav-links.
   Use high-specificity selectors to guarantee override. */
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-link,
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-item > .nav-link,
html[data-theme="dark"] .ftco-navbar-light.scrolled .navbar-nav > .nav-item > .nav-link {
    color: #94A3B8 !important; /* slate-400 */
}
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-link span,
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-item > .nav-link span {
    color: #94A3B8 !important;
}
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-link:hover,
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-link:hover span,
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-item.active > a,
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-item.active > a span,
html[data-theme="dark"] .ftco-navbar-light.scrolled .nav-link.active {
    color: #7DD3FC !important; /* sky-300 */
}
html[data-theme="dark"] .ftco-navbar-light.scrolled .navbar-brand,
html[data-theme="dark"] .ftco-navbar-light.scrolled .navbar-brand span {
    color: #7DD3FC !important;
}
html[data-theme="dark"] .ftco-navbar-light.scrolled .navbar-toggler {
    color: #CBD5E1 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] #navbar-brand,
[data-theme="dark"] .navbar-brand {
    color: #7DD3FC !important; /* sky-300 */
}
[data-theme="dark"] .navbar-brand .txt-rotate,
[data-theme="dark"] #navbar-brand .txt-rotate,
[data-theme="dark"] .navbar-brand .txt-rotate .wrap,
[data-theme="dark"] #navbar-brand .txt-rotate .wrap,
[data-theme="dark"] .navbar-brand .txt-rotate > .wrap,
[data-theme="dark"] #navbar-brand .txt-rotate > .wrap {
    color: #7DD3FC !important;
}

[data-theme="dark"] .navbar-brand:after,
[data-theme="dark"] #navbar-brand:after {
    background: #075985 !important; /* sky-800 */
}

[data-theme="dark"] .ftco_navbar .nav-link {
    color: #94A3B8 !important; /* slate-400 */
}
[data-theme="dark"] .ftco_navbar .nav-link:hover,
[data-theme="dark"] .ftco_navbar .nav-item.active > .nav-link {
    color: #7DD3FC !important; /* sky-300 */
}

/* Mobile menu hamburger */
[data-theme="dark"] .navbar-toggler {
    color: #CBD5E1 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .navbar-toggler .oi {
    color: #CBD5E1 !important;
}

/* Theme toggle in dark */
[data-theme="dark"] .theme-toggle {
    color: #CBD5E1;
}
[data-theme="dark"] .theme-toggle:hover {
    color: #7DD3FC;
}

/* Links */
[data-theme="dark"] .ftco-section p a,
[data-theme="dark"] .ftco-section li a,
[data-theme="dark"] .ftco-section span a,
[data-theme="dark"] .ftco-section td a,
[data-theme="dark"] .ftco-section div a:not(.nav-link):not(.navbar-brand):not(.button):not(.external-link) {
    color: #38BDF8 !important; /* sky-400 */
}
[data-theme="dark"] .ftco-section p a:hover,
[data-theme="dark"] .ftco-section li a:hover,
[data-theme="dark"] .ftco-section span a:hover,
[data-theme="dark"] .ftco-section td a:hover,
[data-theme="dark"] .ftco-section div a:not(.nav-link):not(.navbar-brand):not(.button):not(.external-link):hover {
    color: #7DD3FC !important; /* sky-300 */
}

/* Inline-styled color overrides — many elements use style="color: #000" */
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"] {
    color: #CBD5E1 !important;
}
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#334155"] {
    color: #CBD5E1 !important;
}
[data-theme="dark"] [style*="color: #64748B"],
[data-theme="dark"] [style*="color:#64748B"] {
    color: #94A3B8 !important;
}
[data-theme="dark"] [style*="color: #0C4A6E"],
[data-theme="dark"] [style*="color:#0C4A6E"] {
    color: #7DD3FC !important;
}
[data-theme="dark"] [style*="color: #D97706"],
[data-theme="dark"] [style*="color:#D97706"] {
    color: #FBBF24 !important; /* amber-400 — brighter on dark bg */
}
[data-theme="dark"] [style*="color: #0EA5E9"],
[data-theme="dark"] [style*="color:#0EA5E9"] {
    color: #38BDF8 !important; /* sky-400 — slightly brighter on dark bg */
}

/* Inline background overrides — elements with hardcoded light backgrounds */
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8f9fa"] {
    background-color: #1E293B !important;
}
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"] {
    background-color: #0F172A !important;
}
/* Inline border overrides */
[data-theme="dark"] [style*="border: 1px solid #ddd"],
[data-theme="dark"] [style*="border:1px solid #ddd"] {
    border-color: #334155 !important;
}

/* Profile name heading */
[data-theme="dark"] .ftco-section h1[style] {
    color: #7DD3FC !important;
}

/* News box & cards */
[data-theme="dark"] .update-news-box,
[data-theme="dark"] .sky-card {
    background-color: #1E293B !important; /* slate-800 */
    border-color: #334155 !important; /* slate-700 */
    color: #CBD5E1 !important;
}
[data-theme="dark"] .update-news-box strong,
[data-theme="dark"] .sky-card strong {
    color: #7DD3FC;
}
/* News box scrollbar */
[data-theme="dark"] .update-news-box::-webkit-scrollbar {
    width: 6px;
}
[data-theme="dark"] .update-news-box::-webkit-scrollbar-track {
    background: #1E293B;
}
[data-theme="dark"] .update-news-box::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}

/* External contact buttons */
[data-theme="dark"] .external-link.button.is-light {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .external-link.button.is-light:hover {
    color: #38BDF8 !important;
}

/* Publication table */
[data-theme="dark"] .publication-table,
[data-theme="dark"] .publication-table td,
[data-theme="dark"] .publication-table p {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .publication-table .pub1,
[data-theme="dark"] .publication-table a.pub1,
[data-theme="dark"] .publication-table span.pub1,
[data-theme="dark"] .publication-table .pub1 b,
[data-theme="dark"] .publication-table a.pub1 b,
[data-theme="dark"] .publication-table span.pub1 b {
    color: #7DD3FC !important;
}
[data-theme="dark"] .publication-table a.pub1:hover,
[data-theme="dark"] .publication-table a.pub1:hover b {
    color: #BAE6FD !important; /* sky-200 */
}
[data-theme="dark"] .publication-table .authors-info,
[data-theme="dark"] .publication-table .authors-info p.authors-line,
[data-theme="dark"] .publication-table .authors-info p.authors-line * {
    color: #38BDF8 !important; /* sky-400 */
}
[data-theme="dark"] .publication-table .authors-info a:hover {
    color: #7DD3FC !important;
}
[data-theme="dark"] .ftco-section .publication-table .authors-info a.pub-me,
[data-theme="dark"] .ftco-section .publication-table .authors-info .pub-me,
[data-theme="dark"] .ftco-section .publication-table .authors-info p.authors-line a.pub-me,
[data-theme="dark"] .ftco-section .publication-table .authors-info p.authors-line .pub-me {
    color: #38BDF8 !important; /* sky-400 — same blue as other authors */
    font-weight: 900 !important; /* black weight — heavier than others (500) for clear distinction */
}
[data-theme="dark"] .ftco-section .publication-table .authors-info a.pub-me:hover {
    color: #7DD3FC !important; /* sky-300 — same hover as other authors */
    text-decoration: underline;
}
[data-theme="dark"] .publication-table .pub-venue,
[data-theme="dark"] .publication-table .pub-venue *,
[data-theme="dark"] .publication-table .pub-year {
    color: #7DD3FC !important;
}
[data-theme="dark"] .publication-table .pub-additional {
    color: #FBBF24 !important; /* amber-400 */
}
[data-theme="dark"] .publication-table .pub-additional b {
    color: #FBBF24 !important;
}
[data-theme="dark"] .publication-table a.pub-workshop {
    color: #38BDF8 !important;
}
[data-theme="dark"] .publication-table a.pub-workshop:hover {
    color: #7DD3FC !important;
}
[data-theme="dark"] .publication-table a.pub-btn {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .publication-table a.pub-btn .icon,
[data-theme="dark"] .publication-table a.pub-btn .icon i {
    color: #CBD5E1 !important;
}
[data-theme="dark"] .publication-table a.pub-btn:hover,
[data-theme="dark"] .publication-table a.pub-btn:hover .icon,
[data-theme="dark"] .publication-table a.pub-btn:hover .icon i {
    color: #38BDF8 !important;
}

/* Publication filter dropdown */
[data-theme="dark"] .pubtype-select {
    background-color: #1E293B;
    color: #CBD5E1;
    border-color: #334155;
}

/* Resume wrap border */
[data-theme="dark"] .resume-wrap {
    border-color: #334155 !important;
}

/* Experience page sidebar nav */
[data-theme="dark"] #navi li a {
    color: #94A3B8 !important; /* slate-400 */
}
[data-theme="dark"] #navi li a:hover,
[data-theme="dark"] #navi li a.current {
    color: #7DD3FC !important; /* sky-300 */
}

/* Experience page .text-primary (Skills label) */
[data-theme="dark"] .text-primary {
    color: #38BDF8 !important; /* sky-400 */
}

/* Experience page timeline icons — NOT publication button icons.
   The direct-child combinator (>) ensures we only hit the 50x50 circle
   icons that are immediate children of .resume-wrap, not the inline
   .icon spans nested inside .publication-table buttons. */
[data-theme="dark"] .resume-wrap > .icon {
    background: #075985 !important;
}

/* Footer */
[data-theme="dark"] footer.ftco-footer {
    background-color: #0F172A !important;
    border-top-color: #1E293B !important;
}
[data-theme="dark"] footer.ftco-footer p,
[data-theme="dark"] footer.ftco-footer span {
    color: #94A3B8 !important; /* slate-400 */
}
[data-theme="dark"] footer.ftco-footer a,
[data-theme="dark"] footer.ftco-footer div a,
[data-theme="dark"] footer.ftco-footer div a:not(.nav-link):not(.navbar-brand):not(.button):not(.external-link),
[data-theme="dark"] footer.ftco-footer .footer-icons a,
[data-theme="dark"] footer.ftco-footer .col-12 a {
    color: #94A3B8 !important;
}
[data-theme="dark"] footer.ftco-footer a:hover,
[data-theme="dark"] footer.ftco-footer div a:hover,
[data-theme="dark"] footer.ftco-footer div a:not(.nav-link):not(.navbar-brand):not(.button):not(.external-link):hover,
[data-theme="dark"] footer.ftco-footer .footer-icons a:hover,
[data-theme="dark"] footer.ftco-footer .col-12 a:hover {
    color: #38BDF8 !important;
}

/* Inline SVG logos — dark fills vanish on dark backgrounds.
   brightness(0) flattens to black, invert(1) flips to white. */
[data-theme="dark"] img[src*="mila.svg"],
[data-theme="dark"] img[src*="udem.svg"],
[data-theme="dark"] img[src*="nvidia.svg"],
[data-theme="dark"] img[src*="deepmind.svg"] {
    filter: brightness(0) invert(1);
}

/* Profile photo shadow adjustment */
[data-theme="dark"] img[alt="Huy Le"] {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
    -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
    -moz-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Publication images — white-background PNGs need a soft container in dark mode */
[data-theme="dark"] .publication-table td img {
    background: #ffffff;
    border-radius: 8px;
    padding: 6px;
}

/* Gallery text */
[data-theme="dark"] .project.img {
    border-color: #1E293B;
}

/* Smooth transition for theme switching */
body,
.ftco_navbar,
footer.ftco-footer,
.update-news-box,
.sky-card,
.resume-wrap .icon {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}