/* === Color palette === */
:root{
  --c1:#1f2937;   /* text color */
  --c2:#a9b4c5;   /* border color */
  --c3:#4E5571;   /* accent / brand color */
}

/* === Key-value list used in details panel and header === */
.details-list{
  font-size:.92rem;
  line-height:1.65;
  margin:0; padding:0;
  list-style:none;
}
.details-list li{
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.25rem; overflow:hidden;
}
.details-list .label{
  flex:0 0 138px; font-weight:700; color:var(--c1);
}
.details-list .value{
  flex:1 1 auto; min-width:0; max-width:100%;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:var(--c1);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.details-list .value[data-bs-toggle="tooltip"]{ cursor: help; }

/* === Small copy button beside each field === */
.copy-btn{
  flex:0 0 auto;
  padding:.15rem .45rem;
  font-size:.75rem; line-height:1;
  border:1px solid #cfd6e4;
  border-radius:.35rem;
  background:#fff; color:#6b7280;
  cursor:pointer;
}
.copy-btn:hover{ background:#f3f4f6; color:#111827; }
.copy-btn .fa-check{ display:none; }
.copy-btn.copied .fa-copy{ display:none; }
.copy-btn.copied .fa-check{ display:inline-block; }

/* === Compound name === */
.compound-name{
  font-size:1rem; font-weight:800; color:var(--c1);
  margin:.1rem 0 .4rem 0;
  white-space:normal; overflow-wrap:anywhere;
}

/* === Right rail (sticky button section) === */
.right-rail{ position:relative; padding-bottom:120px; }
#nodeDetails{ position:relative; z-index:2; }
.graph-dock{ position:sticky; bottom:12px; z-index:1; }

/* === Responsive layout tweaks === */
.compound-header{ display:flex; align-items:flex-start; gap:1rem; }
@media (max-width: 767.98px){
  .compound-header{ flex-direction:column; }
  .thumb img{ max-height:150px; }
  .info-col, .downloads-col{ width:100%; }
  .right-rail{ padding-bottom:0; }
  .graph-dock{ position:static; }
}

/* === External link style === */
.blue-link{ color:#0d6efd; text-decoration:underline; }
.blue-link:hover{ text-decoration:none; }

/* === Chemical chips / strips (gallery below graph) === */
.chem-card h6{
  margin:0 0 .5rem 0; color:var(--c1); font-weight:700; font-size:.95rem;
}
.chem-strip{
  display:flex; gap:.5rem; overflow-x:auto; padding:.5rem;
  border:1px solid var(--c2); border-radius:.6rem; background:#fff;
  scrollbar-width:thin;
}
.chem-chip{
  width:86px; flex:0 0 auto; cursor:pointer; user-select:none;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
}
.chem-chip .thumb{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c2); background:#fff; border-radius:.5rem; overflow:hidden;
}
.chem-chip .thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.chem-chip .title{
  width:100%; text-align:center; font-size:.72rem; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#374151;
}
.chem-chip.active .thumb{ outline:2px solid var(--c3); }

/* === Graph view mode tabs (Full / Neighbors) === */
.graph-box{ position:relative; }
.graph-tabs{
  position:absolute; top:10px; left:10px; z-index:10;
  display:inline-flex; gap:0;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(3px);
  border:1px solid var(--c2);
  border-radius:10px;
  padding:4px;
}
.graph-tab{
  appearance:none; border:1px solid var(--c2); background:#fff; color:var(--c1);
  font-weight:700; font-size:.9rem; line-height:1; cursor:pointer;
  padding:6px 10px; transition: all .15s ease; margin-left:-1px;
}
.graph-tab:first-child{ margin-left:0; border-top-left-radius:8px; border-bottom-left-radius:8px; }
.graph-tab:last-child{ border-top-right-radius:8px; border-bottom-right-radius:8px; }
.graph-tab:hover{ background: var(--c2); color:#fff; border-color: var(--c2); }
.graph-tab.is-active{ background: var(--c3); color:#fff; border-color: var(--c3); box-shadow:0 6px 14px rgba(0,0,0,.08); }

/* === NEW: Graph Exports Menu === */
.graph-exports {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.graph-exports .btn-export {
  background: var(--c3);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  border-radius: 10px;
  padding: 8px 16px;
  border: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transition: background .2s ease;
}

.graph-exports .btn-export:hover,
.graph-exports .btn-export:focus {
  background: #3f465e;
  color: #fff;
}

.graph-exports .dropdown-menu {
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 1px solid #e2e8f0;
  padding: 8px 0;
  min-width: 200px;
}

.graph-exports .dropdown-header {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--c2);
  padding: 4px 16px;
}

.graph-exports .dropdown-item {
  padding: 6px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c1);
}

.graph-exports .dropdown-item:hover {
  background-color: #f3f4f6;
  color: var(--c3);
}



:root {
  /* New color palette */
  --color-dark: #2E2D4D;
  --color-secondary: #4E5571;
  --color-mid: #6D7C95;
  --color-light-mid: #889EB3;
  --color-light: #9AB4C7;
  --color-accent: #BDE1EF;

  /* Semantic mappings */
  --primary: var(--color-dark);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* Hero */
.hero-details {
  background: var(--gradient);
  color: #fff;
  text-align: center;
  padding: 4rem 1rem 2rem;
  position: relative;
  z-index: 1;
}

/* Main two-column layout */
.details-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

/* Left: structure image */
.details-image {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.details-image img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Right: info card */
.details-info {
  flex: 1 1 55%;
  background: var(--color-light);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.details-info h2 {
  margin-top: 0;
  color: var(--primary);
  font-size: 2rem;
}
.details-info p,
.details-info li {
  color: var(--color-dark);
  line-height: 1.6;
}
.details-info .meta-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.details-info .meta-list li {
  margin-bottom: 0.5rem;
}
.details-info .meta-list li span {
  font-weight: 600;
  color: var(--secondary);
}
.details-info table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
}
.details-info table th,
.details-info table td {
  border: 1px solid var(--color-mid);
  padding: 0.5rem;
  text-align: left;
}
.details-info table th {
  background: var(--primary);
  color: #fff;
}
.details-info .btn-back {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--primary);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}
.details-info .btn-back:hover {
  background: var(--secondary);
  transform: translateY(-2px);
}