/* =========================
   Base resets & globals
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}



/* =========================
   Typography
   ========================= */
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
}

p.lead {
  font-size: 1.15rem;
  line-height: 1.6;
}

/* =========================
   Navbar
   ========================= */
#mainNav {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

#mainNav .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.05em;
}

#mainNav .nav-link {
  font-weight: 600;
}

/* =========================
   Masthead / Hero
   ========================= */
.masthead {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.masthead-heading {
  font-size: 2.75rem;
}

.masthead-subheading {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* =========================
   Divider (stars)
   ========================= */
.divider-custom {
  margin: 1.25rem 0 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divider-custom-line {
  width: 100%;
  max-width: 7rem;
  height: 0.25rem;
  background-color: #2c3e50;
  border-radius: 1rem;
}

.divider-custom-icon {
  color: #2c3e50;
  font-size: 1.5rem;
  margin: 0 1rem;
}

.divider-light .divider-custom-line {
  background-color: #ffffff;
}

.divider-light .divider-custom-icon {
  color: #ffffff;
}

/* =========================
   Portfolio cards
   ========================= */
.portfolio-item {
  cursor: pointer;
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
}

.portfolio-item img {
  transition: transform 0.3s ease;
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-item-caption {
  position: absolute;
  inset: 0;
  background-color: rgba(44, 62, 80, 0.85);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-item-caption {
  opacity: 1;
}

/* =========================
   Modal plot containers
   ========================= */
#myPCA,
#myTSNE,
#myHclust,
#myHeatmap,
#myUMAP {
  background-color: #f8f9fa;
  border-radius: 0.75rem;
  border: 1px solid #dee2e6;
}

/* Make SVG responsive */
svg {
  max-width: 100%;
  height: auto;
}

/* =========================
   D3 / visualization helpers
   ========================= */
.axis path,
.axis line {
  stroke: #333;
}

.axis text {
  font-size: 12px;
  fill: #333;
}

.tooltip {
  position: absolute;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 0.85rem;
  border-radius: 0.25rem;
  pointer-events: none;
  z-index: 10;
  font-family: monospace;
}

/* =========================
   About section
   ========================= */
#about p {
  opacity: 0.95;
}

/* =========================
   Footer
   ========================= */
.footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #2c3e50;
  color: #ffffff;
}

.footer p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* =========================
   Utility helpers
   ========================= */
.text-monospace {
  font-family: monospace;
}

.code-inline {
  background-color: #f1f3f5;
  padding: 0.2rem 0.35rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.9em;
}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 768px) {
  .masthead-heading {
    font-size: 2.2rem;
  }

  .masthead-subheading {
    font-size: 1.1rem;
  }
}



/* ===== GLOBAL BACKGROUND ===== */
body {
  background-color: #000000;
  color: #eaeaea;
}

/* ===== PANELS (cards on dark bg) ===== */
/* Make Data Source panel narrower */
.data-panel {
  max-width: 340px;     /* adjust: 360–480px sweet spot */
  margin: 0 auto;       /* center inside column */
  font-size: 1rem;

}
.output-panel {
  background: #111111;
  border: 1px solid #2a2a2a;
  color: #eaeaea;
}

/* ===== TOOL BUTTONS ===== */
.tool-square {
  background: #111111;
  border: 2px solid #2a2a2a;
  color: #eaeaea;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.tool-square:hover {
  background: #0d6efd;
  color: #ffffff;
  border-color: #0d6efd;
}

/* ===== FORM CONTROLS ===== */
.form-control,
.form-select {
  background-color: #0f0f0f;
  color: #eaeaea;
  border: 1px solid #333;
}

.form-control::file-selector-button {
  background: #1f1f1f;
  color: #eaeaea;
  border: none;
}

.form-control:focus,
.form-select:focus {
  background-color: #0f0f0f;
  color: #ffffff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25);
}

/* ===== TEXT HELPERS ===== */
.form-text {
  color: #9ca3af;
}

/* ===== NAVBAR (already dark, refine) ===== */
.navbar {
  border-bottom: 1px solid #222;
}

/* ===== OUTPUT CONTAINERS (plots) ===== */
#myPCA,
#myHclust,
#myHeatmap,
#myUMAP {
  background: #000000;
  color: #eaeaea;
}

/* ===== CSS: make the right table scrollable + match dark background==== */

#rightData {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #222;
  border-radius: 0.5rem;
   padding-right: 1rem;   /* try 0.75rem – 1.5rem */
}

/* Stack spacing on left */
.tool-panel {
  margin-bottom: 1.25rem;
}

/* Prevent PCA SVG from being clipped
#myPCA {
  background: #ffffff;
  color: #000000;
  padding: 12px;
  width: 100%;
  overflow: auto;         
  padding: 12px;          
} */

/* Prevent plot SVG from being clipped */
/* All plot containers: invisible until plot renders */
#myPCA,
#myTSNE,
#myUMAP,
#myScatter,
#myPairs,
#myHeatmap,
#myHclust {
  background: transparent;
  padding: 0;
  width: 100%;
  overflow: auto;
  min-height: 0;       /* no placeholder height */
}

/* When plot exists, add this class to get white plot frame */
#myPCA.has-plot,
#myTSNE.has-plot,
#myUMAP.has-plot,
#myScatter.has-plot,
#myPairs.has-plot,
#myHeatmap.has-plot,
#myHclust.has-plot {
  background: #ffffff;
  color: #ffffff;
  padding: 12px;
  width: 100%;
  overflow: auto;         /* allows scroll if needed */
  padding: 12px;          /* breathing room */
  border-radius: 12px;     /* optional */
}


/* Ensure the SVG can render fully */
#myPCA svg,
#myTSNE svg,
#myUMAP svg,
#myScatter svg,
#myPairs svg,
#myHeatmap svg,
#myHclust svg {
  display: block;
  max-width: none;        /* don't force shrink */
}


  /*Embedded console styles (add/tweak as you like) */
 

    /* Embedded console */
    #consolePanel {
      background: #0b0f14;
      color: #d7e2f0;
      border-radius: .75rem;
      border: 1px solid rgba(255,255,255,.08);
      overflow: hidden;
    }

    #consoleHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .5rem .75rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      font-size: .9rem;
    }

    #consoleOut {
      height: 130px;
      overflow-y: auto;
      padding: .75rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: .9rem;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .c-line { margin: 0 0 .35rem 0; }
    .c-log  { color: #d7e2f0; }
    .c-warn { color: #ffe08a; }
    .c-err  { color: #ff9aa2; }
    .c-meta { color: #8aa4c6; }

    #consoleControls {
      display: flex;
      gap: .5rem;
      padding: .5rem .75rem;
      border-top: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
    }

    #consoleControls input {
      flex: 1;
      background: #0f1620;
      color: #d7e2f0;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: .5rem;
      padding: .4rem .6rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 1rem;
      outline: none;
    }

    #consoleControls input::placeholder { color: rgba(215,226,240,.55); }

    .btn-console {
      border-radius: .5rem;
      border: 1px solid rgba(255,255,255,.12);
      background: #111a26;
      color: #d7e2f0;
      padding: .4rem .6rem;
      font-size: 1rem;
    }

    .btn-console:hover { background: #152236; }

.sdk-example {
  background: #0b0f14;
  color: #d7e2f0;
  border: 0.5px solid #2a2a2a;
  border-radius: 1px;
  padding: 5px;
  margin-bottom: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.05;
  white-space: pre;
}

.sdk-example .title {
  color: #8aa4c6;
  margin-bottom: 1px;
  font-weight: 600;
}