/* ====== Inline styles for Biology modal ====== */
.modal { display:none; position:fixed; inset:0; z-index:1050; overflow-y:hidden; background:rgba(0,0,0,.5); }
.modal-content.is-open { opacity:1; transform:translateY(0); }

.modal-content { 
  max-width: 920px; 
  max-height: 150vh; /* limit height */
  overflow-y: auto; /* scroll the content, not the overlay */
  margin: 5vh auto; /* center vertically with some spacing */
}

/* Header/Body/Footer */
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:16px 18px; border-bottom:1px solid #e5e7eb; }
.modal-title { margin:0; font-size:1.125rem; line-height:1.4; }
.modal-body { padding:18px; }
.modal-footer { display:flex; justify-content:flex-end; gap:.5rem; padding:16px 18px; border-top:1px solid #e5e7eb; }

/* Buttons & form controls */
.btn { display:inline-block; padding:10px 15px; background:var(--primary-color, #6ca048); color:#fff; border:0; border-radius:6px; cursor:pointer; text-decoration:none; font-weight:600; }
.btn:hover { filter:brightness(0.95); }
.btn.btn-outline { background:transparent; color:var(--primary-color, #6ca048); border:1px solid var(--primary-color, #6ca048); }
.btn.btn-outline:hover { background:var(--primary-color, #6ca048); color:#fff; }

.form-group { margin-bottom:14px; }
.form-group label { display:block; margin-bottom:6px; font-weight:600; }
.form-control { width:100%; padding:10px; border:1px solid var(--border, #e5e7eb); border-radius:6px; font-size:14px; }
.form-control:focus { outline:0; border-color:var(--primary-color, #6ca048); box-shadow:0 0 0 3px rgba(108,160,72,.12); }
.help-text { font-size:.85rem; color:#6b7280; }

/* Two-column grid */
.bio-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.bio-form-row { display:flex; flex-direction:column; gap:6px; }
@media (max-width: 720px) { .bio-form-grid { grid-template-columns: 1fr; } }

/* Label picker & chips */
.label-picker { display:grid; grid-template-columns:minmax(220px,1fr) 2fr; gap:12px; align-items:start; }
@media (max-width: 720px) { .label-picker { grid-template-columns: 1fr; } }

.chip { display:inline-flex; align-items:center; gap:.4rem; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#1e3a8a; font-size:12px; border:1px solid #c7d2fe; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* Simple meta table for view mode */
.meta-table { width:100%; border-collapse:collapse; }
.meta-table th, .meta-table td { text-align:left; vertical-align:top; padding:6px 8px; border-bottom:1px solid #f0f1f3; }
.meta-table th { white-space:nowrap; color:#374151; }

/* small notice */
.notice { padding:10px 12px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:6px; color:#475569; }
.error { padding:10px 12px; background:#fef2f2; border:1px solid #fecaca; border-radius:6px; color:#991b1b; }

/* Card bits for view header */
.card-header { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.card-icon { width:36px; height:36px; border-radius:50%; background:var(--secondary-color, #f0f5eb); display:flex; align-items:center; justify-content:center; }




/* wide variant used by JS */
.modal-wide { max-width: 1120px; }

/* wide variant used by JS */
.modal-extra-wide { max-width: 1500px; }

/* header close button (X) look */
.modal-header .btn[aria-label="Close"] {
  padding: 6px 10px;
  line-height: 1;
  border-radius: 999px;
}

/* make chips wrap nicely inside meta table cells */
.meta-table .chip { margin: 2px 4px 2px 0; }

.meta-table .source-field td:last-child {
  white-space: normal;   
  line-height: 1.4;     
  min-height: 3em;   
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
}

#tab-eu .bio-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}