/* Pure White Premium Design - Pastel Dark Blue Theme */
body {
  font-family: 'Noto Sans', sans-serif;
  background: #ffffff;
  color: #1f2937;
}

/* Make standard sections transparent to respect body background */
.hero, .section, .hero.is-light, .section.has-background-light {
  background-color: transparent !important;
}

/* Crisp Cards with Colorful Shadows */
.box, .text-center[style*="border"], .table-container.box {
  background: #ffffff !important;
  border: 1px solid #f3f4f6 !important;
  box-shadow: 0 10px 30px -5px rgba(0, 50, 98, 0.1) !important;
  border-radius: 16px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.box:hover, .text-center[style*="border"]:hover, .table-container.box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -5px rgba(0, 50, 98, 0.2) !important;
  border-color: rgba(0, 50, 98, 0.3) !important;
}

/* Main titles */
.title.publication-title {
  color: #111827 !important;
  font-weight: 800;
  display: inline-block;
}

.title.is-3 {
  color: #1f2937 !important;
  font-weight: 800;
  display: inline-block;
}

/* Buttons */
.button.is-dark {
  background: linear-gradient(135deg, #001f3f, #003262, #336699) !important;
  background-size: 200% auto !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(0, 50, 98, 0.3);
  transition: all 0.3s ease;
}

.button.is-dark:hover {
  background-position: right center !important;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 50, 98, 0.5);
}

/* Table styling */
.table {
  background-color: transparent !important;
}
.table thead th {
  color: #374151 !important;
  background-color: #f9fafb !important;
}
.table tbody tr {
  background-color: transparent !important;
  transition: background-color 0.2s ease;
}
.table tbody tr:hover {
  background-color: rgba(243, 244, 246, 0.6) !important;
}
.has-background-primary-light,
tr.has-background-primary-light td,
tr.has-background-primary-light th {
  background-color: rgba(245, 158, 11, 0.15) !important; /* Distinct amber highlight */
}

/* Abstract Highlight */
#abstract .box {
  background: #ffffff !important;
  border: 2px solid rgba(0, 50, 98, 0.5) !important;
  box-shadow: 0 0 25px rgba(0, 50, 98, 0.15) !important;
}

#abstract .box:hover {
  box-shadow: 0 0 35px rgba(0, 50, 98, 0.25) !important;
}

/* Images have a subtle border radius inside boxes */
.box img {
  border-radius: 8px;
}

/* Footer Links */
.footer {
  background: #ffffff !important;
  border-top: 1px solid #f3f4f6;
}

.footer .icon-link {
    font-size: 25px;
    color: #003262;
    transition: all 0.3s ease;
}
.footer .icon-link:hover {
    color: #001f3f;
    transform: translateY(-2px);
}

.footer .content a:not(.icon-link) {
    color: #003262 !important;
    font-weight: 600;
}

.footer .content a:not(.icon-link):hover {
    text-decoration: underline;
    color: #001f3f !important;
}

.link-block a {
    margin-top: 5px;
    margin-bottom: 5px;
}

.publication-authors a {
   color: #003262 !important;
   font-weight: 600;
   transition: all 0.2s ease;
}

.publication-authors a:hover {
    color: #001f3f !important;
    text-decoration: none;
}

/* Base styles retention */
.dnerf { font-variant: small-caps; }
.teaser .hero-body { padding-top: 0; padding-bottom: 3rem; }
.teaser { font-family: 'Google Sans', sans-serif; }
.publication-banner video { position: relative; left: auto; top: auto; transform: none; object-fit: fit; }
.publication-venue { color: #555; width: fit-content; font-weight: bold; }
.publication-awards { color: #003262; width: fit-content; font-weight: bolder; }
.author-block { display: inline-block; }
.publication-video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; border-radius: 10px !important; }
.publication-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.results-carousel { overflow: hidden; }
.results-carousel .item { margin: 5px; overflow: hidden; padding: 20px; font-size: 0; }
.results-carousel video { margin: 0; }
.slider-pagination .slider-page { background: #000000; }
.eql-cntrb { font-size: smaller; }

/* --- Dark Mode Styles --- */
body.dark-mode {
  background: #0d1117 !important;
  color: #c9d1d9 !important;
}

body.dark-mode .hero, 
body.dark-mode .section, 
body.dark-mode .hero.is-light, 
body.dark-mode .section.has-background-light {
  background-color: transparent !important;
}

body.dark-mode .box, 
body.dark-mode .text-center[style*="border"], 
body.dark-mode .table-container.box {
  background: #161b22 !important;
  color: #d0d7de !important;
  border-color: #30363d !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .box:hover, 
body.dark-mode .text-center[style*="border"]:hover, 
body.dark-mode .table-container.box:hover {
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.6) !important;
  border-color: #8b949e !important;
}

body.dark-mode .title.publication-title,
body.dark-mode .title.is-3,
body.dark-mode .title.is-2,
body.dark-mode .title.is-5,
body.dark-mode .metric-number {
  color: #f0f6fc !important;
}

/* Bulma hard-codes several light-theme text colors, so we restate them for dark mode. */
body.dark-mode .content,
body.dark-mode .content p,
body.dark-mode .content li,
body.dark-mode .content blockquote,
body.dark-mode .subtitle,
body.dark-mode .publication-venue,
body.dark-mode .publication-awards {
  color: #d0d7de !important;
}

body.dark-mode strong,
body.dark-mode .content strong,
body.dark-mode .has-text-weight-bold {
  color: #f0f6fc !important;
}

body.dark-mode code,
body.dark-mode pre {
  background-color: #21262d !important;
  color: #ffb3c1 !important;
}

body.dark-mode pre code {
  background-color: transparent !important;
  color: inherit !important;
}

body.dark-mode .button.is-dark {
  background: linear-gradient(135deg, #1f6feb, #388bfd) !important;
}

body.dark-mode .table thead th {
  color: #c9d1d9 !important;
  background-color: #21262d !important;
  border-color: #30363d !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

body.dark-mode .table tbody tr:hover {
  background-color: rgba(48, 54, 61, 0.6) !important;
}

body.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(even),
body.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(even) td {
  background-color: #1b2230 !important;
}

body.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(odd),
body.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(odd) td {
  background-color: transparent !important;
}

body.dark-mode .has-background-primary-light,
body.dark-mode tr.has-background-primary-light td,
body.dark-mode tr.has-background-primary-light th {
  background-color: rgba(31, 111, 235, 0.2) !important; 
}

body.dark-mode #abstract .box {
  background: #161b22 !important;
  border-color: rgba(56, 139, 253, 0.5) !important;
  box-shadow: 0 0 25px rgba(56, 139, 253, 0.15) !important;
}

body.dark-mode #abstract .box:hover {
  box-shadow: 0 0 35px rgba(56, 139, 253, 0.25) !important;
}

body.dark-mode .footer {
  background: #0d1117 !important;
  border-top-color: #30363d !important;
}

body.dark-mode .footer .icon-link,
body.dark-mode .footer .content a:not(.icon-link),
body.dark-mode .publication-authors a {
  color: #58a6ff !important;
}

body.dark-mode .footer .icon-link:hover,
body.dark-mode .footer .content a:not(.icon-link):hover,
body.dark-mode .publication-authors a:hover {
  color: #79c0ff !important;
}

/* Adjust text colors */
body.dark-mode .tw-text-gray-500,
body.dark-mode .tw-text-gray-600,
body.dark-mode p.tw-text-gray-600,
body.dark-mode p.tw-text-gray-500,
body.dark-mode div.tw-text-gray-600 {
  color: #a9b4bf !important;
}

body.dark-mode .tw-text-gray-900 {
  color: #f0f6fc !important;
}

/* Dark mode toggle button styles */
body.dark-mode #darkModeToggle {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #f0f6fc !important;
}

body.dark-mode #darkModeToggle:hover {
  background-color: #30363d !important;
}

#darkModeToggle {
  transition: all 0.3s ease;
}
#darkModeToggle:hover {
  transform: scale(1.1);
}