/* 1) Define a uniform grid of fixed-size cells */
.disease-grid-container {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 0;
  margin-top: 6%;
}

.disease-grid-wrapper {
  display: grid;

  /* auto‑fit “as many 150px columns as possible”, but let them
     grow to fill the space (so you never end up with “gaps”
     at the end). */
  grid-template-columns: repeat(
    auto-fit, minmax(300px, 1fr)
  );

  /* allow boxes to size themselves vertically based on content */
  grid-auto-rows: 90px;

  /* space between boxes */
  gap: 2rem;

  /* constrain the entire grid to a sensible max‑width and center it */
  width: 100%;
  max-width: 1200px;   /* tweak to taste */
  margin: 2rem auto;

  /* center all the items in each cell */
  justify-items: center;
  align-items: center;
}

@media (min-width: 1500px) {
  .disease-grid-wrapper {
    display: grid;

    /* auto‑fit “as many 150px columns as possible”, but let them
       grow to fill the space (so you never end up with “gaps”
       at the end). */
    grid-template-columns: repeat(
      auto-fit, minmax(300px, 1fr)
    );

    /* allow boxes to size themselves vertically based on content */
    grid-auto-rows: 90px;

    /* space between boxes */
    gap: 2rem;

    /* constrain the entire grid to a sensible max‑width and center it */
    width: 100%;
    max-width: 1200px;   /* tweak to taste */
    margin: 2rem auto;
    margin-top: 5%;

    /* center all the items in each cell */
    justify-items: center;
    align-items: center;
  }
}

/* 2) Make each box fill its 150×60 cell, and center its text */
.disease-box {
  /* let each box fill its grid‑cell */
  width: 100%;
  height: 100%;
  padding: 0.75rem;

  /* turn on text wrapping so long names break onto multiple lines */
  white-space: normal;
  word-break: break-word;
  text-align: center;

  color: #FFFFFF;
  background: #2C3E50;
  border: 1px solid #888;
  border-radius: 8px;

  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;        /* semi‑bold */
  font-size: 0.95rem;      /* tweak as you like */
  line-height: 1.3;        /* gives breathing room for multi-line text */

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* pop‑in */
.disease-box.in {
  opacity: 1;
  transform: scale(1);
  cursor: not-allowed;

}

.disease-box.unavailable.in {
  opacity: 0.6;             /* visible but dimmed */
}

.disease-box.unavailable {
  filter: grayscale(100%);
  cursor: pointer;
  /*cursor: not-allowed; */
  /* pick safe, contrasting colours */
  color: #111;               /* force readable text */
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
}

/* hover */
.disease-box:hover {
  background: #F1C40F;
  color: #fff;
  border-color: #F1C40F;
  transform: scale(1.05);
  cursor: pointer;
}

.disease-box.lifted {
  /* transform: translateY(-30%); */
  margin-top: -50px;
}





.info-box-disease {
  border-radius: 8px;
  font-size: 16px;
  text-align: left;
  position: absolute;

  display: flex;
  flex-wrap: wrap;

  max-width: 65%;
  margin-left: 1.7%;
  margin-top: 2%;
  top: 10%;     /* adjust as needed */
  /* remove negative bottom margin */

  /* pin to the top of its flex‐parent */
  align-self: flex-start;
}

.info-box-disease p {
    margin: 0;
    font-size: 15px;
    color: #333;
}

.info-box-disease strong {
    color: #1f3a4d; /* Deep blue for emphasis */
    font-weight: bold;
}

.info-box-disease::after {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap properly on smaller screens */
    content: "";
    display: block;
    width: 50%;
    height: 4px;
    background: #1f3a4d; /* Deep blue line */
    margin: 2% 0 0;
    border-radius: 2px;
    z-index: inherit;
}



/* #chart-wrapper {

  height: auto;
  min-height: auto;
  margin-top: -2%;
  overflow: visible;
}


#expression-chart {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  overflow: visible;
}

#expression-chart svg {
  overflow: visible;
} */


#selected-disease-slot{
  display:flex;
  justify-content:flex-end;   /* right-align; change to center/left if you prefer */
  align-items:center;
  gap:.5rem;
  margin: .25rem 0 .5rem;
}


/*
#chart-wrapper {
  height: auto;
  margin-top: -2%;
  overflow: visible;
} */

#chart-wrapper {
  display: grid;                 /* two-column grid */
  /* grid-template-columns: 1fr 360px; /* left auto-expands, right fixed */
  grid-template-columns: minmax(0, 1fr) 650px; /* left | right */
  gap: 1rem;
  /* margin-top: 1rem; */
  align-items: start;
}

/* container that holds the iframe */
#expression-chart {
  /*display: block; */
  /* width: 100%; */
  /* height: auto;   /* not 100% */
/*  border: none; */

  grid-column: 1;
  overflow: visible;
  min-width:0;
}

/* style the iframe itself */
#expression-chart > iframe {
  display: block;
  width: 100%;
  /* max-width: 1000px; */
  border: 0;
  margin: 0 auto;
  overflow:hidden;
}

@media (min-width: 1500px) {
  #expression-chart > iframe {
    width: 80%;
    max-width: 1200px;
  }
}

#gene-panel {
  grid-column: 2;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.75rem;
  background: #fff;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  position: sticky;
  top: 1rem;
}

/* tighten the gene panel on narrower screens without changing height */
@media (max-width: 1500px) {
  #chart-wrapper {
    grid-template-columns: minmax(0, 1fr) 480px;
  }

  #gene-panel {
    padding: 0.6rem;
  }
}

@media (max-width: 1500px) {
  #chart-wrapper {
    grid-template-columns: 1fr;
  }

  #gene-panel {
    grid-column: 1;
    position: static;
    width: 100%;
    margin-top: 1rem;
  }

  #expression-chart > iframe {
    width: 55%;
    max-width: 1200px;
  }
}

#gene-table {
  border-collapse: separate;   /* must be separate for border-spacing to work */
  border-spacing: 16px 0;      /* 16px horizontal gap, 0 vertical gap */
}

/* Only rows marked by JS will expand */
#gene-table tr.row-auto { 
  height: auto !important;
}

/* Make sure the hormone cell wraps neatly only on those rows */
#gene-table tr.row-auto td:nth-child(3) {
  white-space: normal;
  vertical-align: top;
}

/* Ensure chip container wraps (your JS already sets display:flex & flex-wrap) */
#gene-table tr.row-auto td:nth-child(3) > div {
  flex-wrap: wrap;
  gap: 0.35rem; /* keep spacing tidy */
}







.tooltip-container-disease {
    left: 69%;
    top: 13%;
    position: absolute;
    display: inline-block;
    z-index: 1000;
}

.tooltip-text-disease {
  visibility: hidden;
  width: 550px; /* Responsive: Max width is 80% of viewport but never more than 250px */
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  text-align: left;
  padding: 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;

  /* Positioning */
  position: absolute;
  transform: translateX(-80%);
  margin-top: 30%;

  /* Visibility & Interaction */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;

  /* Text Wrapping */
  white-space: normal;
  word-wrap: break-word;
}

.tooltip-container-disease:hover .tooltip-text-disease {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 1500px) {
  .tooltip-container-disease {
      left: 44%;
      top: 11%;
      position: absolute;
      display: inline-block;
      z-index: 1000;
  }

  .tooltip-text-disease {
    visibility: hidden;
    width: 550px; /* Responsive: Max width is 80% of viewport but never more than 250px */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: left;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;

    /* Positioning */
    position: absolute;
    transform: translateX(-80%);
    margin-top: 30%;

    /* Visibility & Interaction */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;

    /* Text Wrapping */
    white-space: normal;
    word-wrap: break-word;
  }
}


.db-tag {
  display: block;          
  font-size: 14px;        
  line-height: 1.2;
  color: #1f3a4d; 
  font-weight: bold;
}



.gene-panel-title h3 {
  font-size: 18px;
  font-weight: bold;
  color: #1f3a4d; /* Deep blue to match theme */
  margin-top: 0%; /* More spacing from content */
  margin-left: 0%;
  margin-bottom: 3%;
}