/* ═══════════════════════════════════════════════════
   PORTFOLIO — Custom stylesheet
   Companion to Tailwind CDN classes in index.html
   ═══════════════════════════════════════════════════ */

/* ---- GLOBAL ---- */
::selection {
  background: #3b82f6;
  color: #fff;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- NAVBAR LINKS ---- */
.nav-link {
  font-family: 'Syne', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #4b5563;          /* gray-600 */
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}

.nav-link:hover {
  background-color: #eff6ff; /* blue-50 */
  color: #1d4ed8;           /* blue-700 */
}

.mobile-link {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: #4b5563;
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
  transition: color 0.15s;
}

.mobile-link:hover {
  color: #1d4ed8;
}

/* ---- SECTION LABELS ---- */
.section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3b82f6;
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

/* ---- STAT CARDS ---- */
.stat-card {
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: 0.75rem;
  border-width: 1px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* ---- PAPER / PUBLICATION CARDS ---- */
.paper-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.paper-card:hover {
  border-color: #bfdbfe;          /* blue-200 */
  box-shadow: 0 4px 20px rgba(59,130,246,.12);
  transform: translateY(-2px);
}

/* ---- TAGS / PILLS ---- */
.tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ---- RESEARCH CARDS (expandable) ---- */
.research-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.research-card:hover {
  border-color: #fbbf24;    /* amber-400 */
  box-shadow: 0 4px 20px rgba(245,158,11,.10);
}

/* Remove default marker */
.research-card summary::-webkit-details-marker { display: none; }
.research-card summary::marker { display: none; content: ''; }

/* ---- SOFTWARE CARDS ---- */
.software-card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.software-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

/* ---- TIMELINE ---- */
.timeline-item {
  position: relative;
  padding-left: 1.5rem;
  padding-bottom: 1.25rem;
}

.timeline-dot {
  position: absolute;
  left: -0.3125rem;
  top: 0.2rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #bfdbfe;
}

/* ---- SKILL BARS ---- */
.skill-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---- LINE CLAMP ---- */
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ---- SCROLLBAR (subtle) ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- ANIMATION ---- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── PRINT ── */
@media print {
  nav, #mobile-menu { display: none !important; }
  section { break-inside: avoid; }
}

/* ── ACTIVE NAV LINK ── */
.nav-link.active-link {
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   DARK MODE
   Toggle with .dark on <html>
   ═══════════════════════════════════════════════════ */

/* Body & default sections (gray-50 bg) */
html.dark body {
  background-color: #0f172a;   /* slate-900 */
  color: #e2e8f0;             /* slate-200 */
}

/* Navbar */
html.dark nav#navbar {
  background: rgba(15, 23, 42, 0.92);
  border-bottom-color: #1e293b;
}
html.dark nav#navbar a,
html.dark nav#navbar span.font-heading {
  color: #cbd5e1;
}
html.dark .nav-link { color: #94a3b8; }
html.dark .nav-link:hover,
html.dark .nav-link.active-link {
  background-color: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}
html.dark .mobile-link { color: #94a3b8; }
html.dark .mobile-link:hover { color: #93c5fd; }

html.dark #theme-toggle { color: #94a3b8; }
html.dark #theme-toggle:hover { background-color: #1e293b; }
html.dark #icon-sun,
html.dark #icon-moon { color: #fbbf24; }

/* Mobile hamburger */
html.dark #mobile-toggle { color: #94a3b8; }
html.dark #mobile-toggle:hover { color: #e2e8f0; }

/* Stats bar & bg-white sections */
html.dark section.bg-white,
html.dark section[class*="bg-white"] {
  background-color: #1e293b;  /* slate-800 */
}

/* Stats bar border */
html.dark .bg-white.border-b {
  border-bottom-color: #334155;
}

/* Section titles */
html.dark .section-title { color: #f1f5f9; }

/* Descriptive paragraphs under section titles */
html.dark .section-title + p,
html.dark .mb-10 > p.text-gray-600 {
  color: #94a3b8;
}

/* Paper/Publication cards */
html.dark .paper-card {
  background: #1e293b;
  border-color: #334155;
}
html.dark .paper-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.15);
}
html.dark .paper-card h3 { color: #f1f5f9; }
html.dark .paper-card .text-gray-400 { color: #64748b; }
html.dark .paper-card .text-gray-500 { color: #94a3b8; }
html.dark .paper-card .text-gray-600 { color: #94a3b8; }
html.dark .paper-card .border-gray-100 { border-color: #334155; }

/* Research cards */
html.dark .research-card {
  background: #1e293b;
  border-color: #334155;
}
html.dark .research-card:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.12);
}
html.dark .research-card h3 { color: #f1f5f9; }
html.dark .research-card .text-gray-400,
html.dark .research-card .text-gray-500 { color: #94a3b8; }
html.dark .research-card .text-gray-600 { color: #94a3b8; }
html.dark .research-card .border-gray-100 { border-color: #334155; }
html.dark .research-card .bg-gray-100 { background-color: #334155; }
html.dark .research-card svg { color: #94a3b8; }

/* Software cards */
html.dark .software-card {
  border-color: #334155 !important;
}
html.dark .software-card[class*="from-blue-50"]  { background: linear-gradient(135deg, rgba(30,58,138,0.3), rgba(49,46,129,0.3)); }
html.dark .software-card[class*="from-teal-50"]  { background: linear-gradient(135deg, rgba(19,78,74,0.3), rgba(6,78,59,0.3)); }
html.dark .software-card[class*="from-purple-50"]{ background: linear-gradient(135deg, rgba(88,28,135,0.3), rgba(112,26,117,0.3)); }
html.dark .software-card h3 { color: #e2e8f0 !important; }
html.dark .software-card p.text-gray-700 { color: #94a3b8; }

/* Stat cards */
html.dark .stat-card {
  border-color: #334155 !important;
}
html.dark .stat-card[class*="from-blue-50"]   { background: linear-gradient(135deg, rgba(30,64,175,0.2), rgba(30,64,175,0.3)); }
html.dark .stat-card[class*="from-teal-50"]   { background: linear-gradient(135deg, rgba(13,148,136,0.2), rgba(13,148,136,0.3)); }
html.dark .stat-card[class*="from-emerald-50"]{ background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.3)); }
html.dark .stat-card[class*="from-purple-50"] { background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(139,92,246,0.3)); }
html.dark .stat-card .text-gray-700 { color: #cbd5e1; }
html.dark .stat-card .text-gray-500 { color: #64748b; }

/* About section — bio card */
html.dark .bg-white.rounded-xl,
html.dark div[class*="bg-white"][class*="rounded-xl"] {
  background-color: #1e293b;
  border-color: #334155;
}
html.dark .bg-white.rounded-xl p.text-gray-700,
html.dark .bg-white.rounded-xl .text-gray-700 { color: #94a3b8; }
html.dark .bg-white.rounded-xl .text-gray-900 { color: #f1f5f9; }
html.dark .bg-white.rounded-xl .text-gray-600 { color: #94a3b8; }
html.dark .bg-white.rounded-xl .text-gray-500 { color: #64748b; }

/* Contact card gradient */
html.dark div[class*="from-blue-50"][class*="to-indigo-50"] {
  background: linear-gradient(135deg, rgba(30,58,138,0.25), rgba(49,46,129,0.25));
  border-color: #334155;
}
html.dark div[class*="from-blue-50"][class*="to-indigo-50"] h3 { color: #e2e8f0; }
html.dark div[class*="from-blue-50"][class*="to-indigo-50"] a { color: #94a3b8; }
html.dark div[class*="from-blue-50"][class*="to-indigo-50"] a:hover { color: #93c5fd; }

/* Tags/Pills — make them subtler in dark mode */
html.dark .tag { opacity: 0.85; }
html.dark .pill { opacity: 0.85; }

/* Timeline */
html.dark .border-blue-200 { border-color: #1e3a5f; }
html.dark .timeline-dot { border-color: #0f172a; box-shadow: 0 0 0 2px #1e3a5f; }
html.dark .timeline-item .text-gray-900,
html.dark .font-heading.text-gray-900 { color: #f1f5f9; }
html.dark .timeline-item .text-gray-500 { color: #64748b; }
html.dark .timeline-item .text-gray-600 { color: #94a3b8; }

/* Skill bars */
html.dark .skill-row .text-gray-700 { color: #cbd5e1; }
html.dark .skill-row .bg-gray-100 { background-color: #334155; }

/* Methodology cards */
html.dark .rounded-xl[class*="bg-blue-50"]   { background: rgba(30,64,175,0.15); border-color: #334155; }
html.dark .rounded-xl[class*="bg-teal-50"]   { background: rgba(13,148,136,0.15); border-color: #334155; }
html.dark .rounded-xl[class*="bg-purple-50"] { background: rgba(139,92,246,0.15); border-color: #334155; }
html.dark .rounded-xl h3[class*="text-blue-800"]  { color: #93c5fd; }
html.dark .rounded-xl h3[class*="text-teal-800"]  { color: #5eead4; }
html.dark .rounded-xl h3[class*="text-purple-800"]{ color: #c4b5fd; }
html.dark .rounded-xl p.text-gray-700 { color: #94a3b8; }

/* Summary table */
html.dark .bg-gray-50.rounded-xl { background: #1e293b; border-color: #334155; }
html.dark .bg-gray-50.rounded-xl .border-gray-200 { border-color: #334155; }
html.dark .bg-gray-50.rounded-xl h3 { color: #f1f5f9; }
html.dark table thead tr { background: #0f172a !important; }
html.dark table th { color: #94a3b8; }
html.dark table tr.bg-white { background: #1e293b; }
html.dark table tr.bg-gray-50 { background: #162032; }
html.dark table td { color: #94a3b8; }
html.dark table td.font-semibold { color: #f1f5f9; }

/* Footer is already dark — just fine-tune */
html.dark footer { background: #020617; }

/* Scrollbar dark */
html.dark ::-webkit-scrollbar-thumb { background: #334155; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Selection */
html.dark ::selection { background: #2563eb; }

/* =======================================================
   HOW TO ADD A NEW CHAPTER / SECTION:

   1. Copy any <section> block in index.html
   2. Give it a unique id (e.g. id="new-chapter")
   3. Update the title and content
   4. Add a nav link:
        Desktop: <a href="#new-chapter" class="nav-link">New Chapter</a>
        Mobile:  <a href="#new-chapter" class="mobile-link">New Chapter</a>
   5. Alternate backgrounds: use no bg class (gray-50 default)
      or add class="bg-white" to the section for a white background
   ======================================================= */