/* =============================================================================
   Streamlit look-alike: default Streamlit theme (follows the system light /
   dark setting, like Streamlit does) + the custom CSS from the original app.
   ============================================================================= */
:root {
  --st-bg: #ffffff;
  --st-secondary-bg: #f0f2f6;
  --st-text: #31333f;
  --st-muted: rgba(49, 51, 63, 0.6);
  --st-border: rgba(49, 51, 63, 0.2);
  --st-primary: #ff4b4b;
  --st-primary-soft: rgba(255, 75, 75, 0.1);
  --st-link: #0068c9;
  --sidebar-w: 336px;
  /* Brand colors: changed live by the color picker (app.js) */
  --brand: #0c2a4d;
  --hero-1: #0b2545;
  --hero-2: #13508f;
  --hero-3: #1d7fd6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --st-bg: #0e1117;
    --st-secondary-bg: #262730;
    --st-text: #fafafa;
    --st-muted: rgba(250, 250, 250, 0.6);
    --st-border: rgba(250, 250, 250, 0.2);
    --st-primary-soft: rgba(255, 75, 75, 0.15);
    --st-link: #3d9df3;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--st-text);
  background: var(--st-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--st-link); }
p { margin: 0 0 1rem; }
h1, h2, h3, h4, h5 { font-family: inherit; color: inherit; margin: 0; line-height: 1.2; }
h1 { font-size: 2.75rem; font-weight: 700; padding: 1.25rem 0 1rem; }
h2 { font-size: 2.25rem; font-weight: 600; padding: 1rem 0; letter-spacing: -0.005em; }
h3 { font-size: 1.75rem; font-weight: 600; padding: 0.5rem 0 1rem; letter-spacing: -0.005em; }
h4 { font-size: 1.5rem; font-weight: 600; padding: 0.75rem 0 1rem; }
hr { border: none; border-bottom: 1px solid var(--st-border); margin: 2em 0; }
ul { padding-left: 1.5rem; margin: 0 0 1rem; }
li { margin: 0.2em 0; }
.spacer { height: 2.5rem; }
.caption { font-size: 0.875rem; color: var(--st-muted); margin: 0; }

/* ---------------------------------------------------------------- sidebar */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 100;
  background-color: var(--brand); overflow-y: auto;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
/* Dark sidebar styling - explicit text contrast */
.sidebar *, .sidebar a { color: #ffffff !important; }
.sidebar__content { padding: 6rem 1.5rem 2rem; }
.sidebar h1.sidebar__title { font-size: 2.25rem; padding: 0 0 0.5rem; }
.sidebar h3 { font-size: 1.5rem; padding: 0.5rem 0 1rem; }
.sidebar hr { border-bottom-color: rgba(255, 255, 255, 0.2); }
.sidebar .caption { color: rgba(255, 255, 255, 0.6) !important; }
.sidebar__collapse, .sidebar__open {
  width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: 0.5rem;
  background: transparent; cursor: pointer; padding: 0;
}
.sidebar__collapse { position: absolute; top: 1.4rem; right: 1rem; }
.sidebar__collapse:hover { background: rgba(255, 255, 255, 0.1); }
.sidebar__collapse svg, .sidebar__open svg { width: 22px; height: 22px; fill: currentColor; }
.sidebar__open {
  position: fixed; top: 1.4rem; left: 1rem; z-index: 90; color: var(--st-text);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.sidebar__open:hover { background: var(--st-secondary-bg); }
.sidebar__backdrop { display: none; }

.aff { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 2rem; }
.aff__logo { flex: 1 1 0; min-width: 0; }
.aff__logo img { width: 85px; max-width: 100%; }
.aff__text { flex: 2.8 1 0; min-width: 0; line-height: 1.5; }
.aff__text small { font-size: 0.875em; }

.connect { display: flex; flex-direction: column; gap: 12px; }
.connect a { text-decoration: none; color: white; display: flex; align-items: center; gap: 10px; }
.connect a:hover span { text-decoration: underline; }
.connect img { width: 22px; height: 22px; object-fit: contain; }

/* ------------------------------------------------------------------- main */
.main { margin-left: var(--sidebar-w); transition: margin-left 0.3s ease; min-height: 100vh; }
.block-container { padding: 6rem 5rem 10rem; max-width: none; }

body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main { margin-left: 0; }
body.sidebar-collapsed .sidebar__open { opacity: 1; pointer-events: auto; }

.banner { width: 100%; height: auto; }

/* ------------------------------------------------- segmented control (tabs) */
.segmented { display: inline-flex; flex-wrap: wrap; }
.segmented button {
  font: inherit; font-size: 1rem; line-height: 1.6; color: var(--st-text);
  background: var(--st-bg); border: 1px solid var(--st-border);
  padding: 0.25rem 0.75rem; min-height: 2.5rem; margin-left: -1px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  position: relative;
}
.segmented button:first-child { border-radius: 0.5rem 0 0 0.5rem; margin-left: 0; }
.segmented button:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.segmented button:hover { color: var(--st-primary); border-color: var(--st-primary); z-index: 1; }
.segmented button[aria-selected="true"] {
  color: var(--st-primary); border-color: var(--st-primary); background: var(--st-primary-soft); z-index: 2;
}
.segmented button:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; z-index: 3; }

/* ---------------------------------------------------------------- columns */
.cols { display: flex; gap: 1rem; align-items: flex-start; width: 100%; }
.cols > * { flex: 1 1 0; min-width: 0; }
.cols--medium { gap: 2rem; }
.cols--large { gap: 4rem; }
.cols + .cols { margin-top: 1rem; }

/* ================== Custom CSS from app.py ================== */
/* HERO CONTAINER STYLING */
.hero-card {
  background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 50%, var(--hero-3) 100%);
  border-radius: 16px;
  padding: 30px;
  color: #ffffff !important;
  margin-bottom: 25px;
}
.hero-card * { color: #ffffff !important; }
.hero-card .hero-red { color: #ff3b3b !important; display: block; }
.hero-card h1 { padding: 0; }
.hero-card h3 { padding: 0; }
.hero-card p { margin: 0 0 25px; }

/* Custom badge styling */
.badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 6px 16px;
  margin-right: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(5px);
  color: inherit;
}

/* Dynamic Feature Cards (Adapts to Light & Dark Mode) */
.feature-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(128, 128, 128, 0.2);
  height: 100%;
}
.feature-title { font-weight: 700; color: #1a202c; font-size: 16px; margin-bottom: 4px; }
.feature-desc { color: #718096; opacity: 0.8; font-size: 13px; line-height: 1.4; }
.cols--stretch { align-items: stretch; }

@media (prefers-color-scheme: dark) {
  .feature-card { background-color: #1e293b !important; border-color: #334155 !important; }
  .feature-title { color: #f8fafc !important; }
  .feature-desc { color: #cbd5e1 !important; }
}

/* ================== Research.py (expanders + videos) ================== */
.expander {
  border: 1px solid var(--st-border); border-radius: 0.5rem; background: var(--st-bg);
}
.expander summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; font-size: 1rem; border-radius: 0.5rem;
}
.expander summary::-webkit-details-marker { display: none; }
.expander summary:hover { color: var(--st-primary); }
.expander summary svg { width: 20px; height: 20px; fill: currentColor; transition: transform 0.2s; flex: none; }
.expander[open] summary svg { transform: rotate(180deg); }
.expander__body { padding: 0 1rem 1rem; }
/* Reduce line spacing and margin inside expander content */
.expander__body p { margin-bottom: 0.3rem !important; line-height: 1.35 !important; font-size: 0.88rem !important; }
.expander__body ul { padding-left: 1.1rem !important; margin-top: 0.2rem !important; margin-bottom: 0.4rem !important; }
.expander__body li { margin-bottom: 0.25rem !important; line-height: 1.3 !important; font-size: 0.85rem !important; }
/* Limit maximum width of YouTube videos to keep them compact */
.expander__body iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; display: block; margin-top: 0.75rem; }
/* Video thumbnail (click to play) */
.yt {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 0.75rem; padding: 0; border: 0;
  border-radius: 8px; overflow: hidden; cursor: pointer; background: #000;
}
.yt img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.06) contrast(1.04); transition: filter 0.2s, transform 0.3s; }
.yt:hover img { filter: brightness(1.12) contrast(1.04); transform: scale(1.03); }
.yt__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); }
.yt__play path:first-child { fill: #212121; fill-opacity: 0.7; transition: fill 0.15s, fill-opacity 0.15s; }
.yt:hover .yt__play path:first-child { fill: #ff0000; fill-opacity: 1; }
.yt__title {
  position: absolute; left: 0; right: 0; top: 0; padding: 8px 10px 18px; text-align: left;
  color: #fff; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
  background: linear-gradient(rgba(0, 0, 0, 0.45), transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.research-row { align-items: flex-start; }

/* ================== publications.py ================== */
.pub-card {
  background-color: white; padding: 15px; border-radius: 8px; border-left: 5px solid var(--hero-3);
  margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
.pub-card--conf { border-left-color: #319795; }
.pub-badge { background-color: #ebf8ff; color: #2b6cb0; font-size: 11px; font-weight: bold; padding: 3px 8px; border-radius: 4px; }
.pub-card--conf .pub-badge { background-color: #e6fffa; color: #234e52; }
.pub-card h4 { margin-top: 8px; margin-bottom: 4px; font-size: 16px; padding: 0; }
.pub-card h4 a { text-decoration: none; color: #1a202c; }
.pub-card h4 a:hover { text-decoration: underline; }
.pub-journal { color: #4a5568; margin-bottom: 0; font-size: 14px; }
.pub-authors { color: #718096; margin-bottom: 2px; font-size: 13px; }

/* ================== Certificates & Patents ================== */
.patent-card {
  align-items: center; background-color: white; padding: 15px; border-radius: 8px; border-left: 5px solid var(--hero-3);
  margin-bottom: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
.patent-card img { width: 100%; border-radius: 6px; }
.patent-card h4 { margin-top: 8px; font-size: 1.15rem; padding: 0 0 0.5rem; color: #1a202c; }
.patent-card__num { color: #4a5568; font-size: 1rem; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.cert-card {
  margin: 0; background: white; border: 1px solid rgba(128, 128, 128, 0.2); border-radius: 10px;
  overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column;
}
.cert-card img { width: 100%; aspect-ratio: 1.42; object-fit: contain; background: #fff; border-bottom: 1px solid rgba(128, 128, 128, 0.15); transition: transform 0.3s; }
.cert-card a:hover img { transform: scale(1.02); }
.cert-card figcaption { padding: 12px 15px; display: flex; flex-direction: column; gap: 4px; color: #1a202c; }
@media (prefers-color-scheme: dark) {
  .patent-card, .cert-card { background-color: #1e293b; border-color: #334155; }
  .patent-card h4, .cert-card figcaption { color: #f8fafc; }
  .patent-card__num { color: #cbd5e1; }
  .cert-card .caption { color: #cbd5e1; }
}

/* ================== experience_education.py ================== */
.md h4 { font-size: 1.5rem; padding: 0.75rem 0 0.25rem; }
.md p { margin-bottom: 1rem; }
.skill-card {
  background-color: #ffffff; border: 1px solid rgba(128, 128, 128, 0.2); border-radius: 10px;
  padding: 12px 15px; margin-bottom: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
.skill-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 8px; color: #1a202c; }
.tool-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background-color: rgba(128, 128, 128, 0.08); border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 6px; padding: 4px 10px; margin: 3px; font-size: 0.82rem; font-weight: 500; color: #31333f;
}
.tool-badge img { width: 16px; height: 16px; object-fit: contain; }
@media (prefers-color-scheme: dark) {
  .skill-card { background-color: #1e293b !important; border-color: #334155 !important; }
  .skill-title, .tool-badge { color: #fafafa; }
}

/* ================== cv.py ================== */
.st-button {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
  font: inherit; font-size: 1rem; color: var(--st-text); text-decoration: none;
  background: var(--st-bg); border: 1px solid var(--st-border); border-radius: 0.5rem;
  padding: 0.25rem 0.75rem; min-height: 2.5rem; cursor: pointer;
}
.st-button:hover { color: var(--st-primary); border-color: var(--st-primary); }
.pdf-frame { width: 100%; height: 900px; border: 0; display: block; }

/* ================== news.py ================== */
.news-badge {
  display: inline-block; background-color: rgba(49, 130, 206, 0.12); color: #3182ce;
  font-weight: 600; font-size: 0.8rem; padding: 3px 10px; border-radius: 12px; margin-bottom: 10px;
}
.news-title-text { font-size: 1.25rem; font-weight: 700; color: var(--st-text); margin-bottom: 8px; }
.news-body-text { font-size: 0.95rem; line-height: 1.6; color: var(--st-text); opacity: 0.9; margin-bottom: 12px; }
.news-link-btn { display: inline-flex; align-items: center; gap: 6px; color: #3182ce !important; font-weight: 600; font-size: 0.9rem; text-decoration: none !important; }
.news-link-btn:hover { text-decoration: underline !important; }
.news-item > div:first-child > * { margin-bottom: 1rem; }
@media (prefers-color-scheme: dark) {
  .news-badge { background-color: rgba(99, 179, 237, 0.2); color: #63b3ed; }
}

/* ============================================================ responsive */
@media (max-width: 1100px) {
  .block-container { padding: 6rem 3rem 8rem; }
}
/* Streamlit stacks columns and turns the sidebar into an overlay on small screens */
@media (max-width: 768px) {
  .main { margin-left: 0 !important; }
  .block-container { padding: 4.5rem 1rem 6rem; }
  .cols { flex-direction: column; gap: 1rem !important; }
  .cols > * { width: 100%; flex: none; }
  .sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, 0.4); }
  body:not(.sidebar-collapsed) .sidebar__backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 99; }
  .sidebar__open { background: var(--st-bg); }
  h2 { font-size: 1.75rem; }
  .pdf-frame { height: 70vh; }
}

/* ============================================================ color picker */
.picker { position: fixed; right: 20px; bottom: 20px; z-index: 200; }
.picker__btn {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: #fff; background: var(--brand);
  border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.picker__btn:hover { filter: brightness(1.25); }
.picker__panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: 280px; padding: 14px;
  background: var(--st-bg); color: var(--st-text); border: 1px solid var(--st-border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.picker__panel[hidden] { display: none; }
.picker__title { font-weight: 700; margin-bottom: 10px; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.swatch { aspect-ratio: 1; border-radius: 10px; cursor: pointer; padding: 0; border: 2px solid transparent; outline: 1px solid var(--st-border); }
.swatch[aria-pressed="true"] { border-color: var(--st-bg); outline: 2px solid var(--st-primary); }
.swatch:hover { transform: scale(1.06); }
.picker__name { font-size: 0.85rem; color: var(--st-muted); margin: 8px 0 12px; min-height: 1.2em; }
.picker__custom { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.picker__custom input[type="color"] { width: 44px; height: 32px; border: 1px solid var(--st-border); border-radius: 6px; padding: 2px; background: none; cursor: pointer; }
.picker__reset { margin-left: auto; font: inherit; font-size: 0.85rem; background: none; border: 0; color: var(--st-link); cursor: pointer; }
@media (max-width: 768px) { .picker__btn span { display: none; } }