:root{
  --hgc-sticky-offset: 85px;
}

/* Frontend styles */
.hgc-container body {
  margin: 0;
}
.hgc-container h1 {
  text-align: center;
  margin-bottom: 1rem;
}

.calculator-container {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  padding: 1.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: #333;
}
.parents {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.parent-field {
  flex: 1 1 480px;
  position: relative;
}
label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.25rem;
}

.multi-select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
  min-height: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: text;
  background: #fff;
}
.multi-select input {
  border: none;
  flex: 1;
  /* Laat het inputveld krimpen zodat labels op dezelfde regel blijven
     tot de beschikbare ruimte vol is. Een lagere minimale breedte voorkomt
     dat het tweede label meteen op een nieuwe regel terechtkomt. */
  min-width: 60px;
  padding: 6px;
  outline: none;
}
.tag {
  display: flex;
  align-items: center;
  background: #e0e0e0;
  border-radius: 12px;
  padding: 2px 8px;
  margin: 2px;
  font-size: 0.9rem;
}
.tag.combo {
  background: #d6e9ff;
}
.tag .x {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: #555;
  margin-left: 6px;
}

.suggestions {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  /* On small screens, let the suggestion box expand to the full width of its parent */
  width: 100%;
  min-width: 100%;
}
.suggestions .group {
  font-weight: 700;
  padding: 4px 8px;
  font-size: 1rem;
  color: #fff;
  background: #ef7d00;
  position: sticky;
  top: 0;
  border-bottom: 1px solid #eee;
}
.suggestions .item {
  padding: 6px 10px;
  cursor: pointer;
}
.suggestions .item:hover {
  background-color: #fdfdfd;
  cursor: pointer;
  filter: brightness(0.95);
}
button {
  font-size: 0.95rem;
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}
th,
td {
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
th {
  background: #f0f0f0;
}

/* ====== Badges  ====== */
.hgc .trait-badge {
  display: inline-block;
  padding: 4px 10px;
  margin: 2px 6px 2px 0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.hgc .badge-incomplete {
  background: #00983a;
}
.hgc .badge-incomplete-super {
  background: #00983a;
}
.hgc .badge-recessive {
  background: #ef7d00;
}
.hgc .badge-recessive-het {
  background: #747474;
} /* 100% het */
.hgc .badge-recessive-poss-het {
  background: #f2af00;
} /* 1–99% het */
.hgc .badge-dominant {
  background: #7030a0;
}
.hgc .badge-polygenic {
  background: #2a6f9d;
}

.hidden {
  display: none;
}

/* Toggle switch */
.hgc .hgc-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.hgc .hgc-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  user-select: none;
}

.hgc .hgc-switch input[type="checkbox"] {
  width: 42px;
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background: #e2e5e9;
  border-radius: 24px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
  border: 1px solid #d0d4d9;
}

.hgc .hgc-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.hgc .hgc-switch input[type="checkbox"]:checked {
  background: #ef7d00;
  border-color: #ef7d00;
}

.hgc .hgc-switch input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.hgc .hgc-switch-label {
  font-weight: 500;
}
/* ====== Layout container ====== */
.hgc {
  font-size: 16px;
  color: #222;
}

/* ====== Header: parents + actions (toggle/clear onder de parents) ====== */
.hgc-header {
  display: grid;
  grid-template-columns: 1fr; /* één kolom: eerst parents, daaronder actions */
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

/* Parents area (2 columns with center X on desktop) */
.hgc-parents {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: 12px;
}

/* Parent card */
.hgc-parent-label {
  font-size: clamp(0.9rem, 0.5vw, 1rem);
  margin: 6px 0 -3px 2px;
}
.hgc .select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e3e6eb;
  border-radius: 8px;
  background: #fff;
  /* Ensure suggestion lists positioned absolutely within this container are relative to it */
  position: relative;
}
.hgc .select input[type="text"] {
  border: none;
  outline: none;
  min-width: 140px;
  padding: 6px 4px;
  font-size: 14px;
}

.hgc-cross {
  text-align: center;
  font-weight: 600;
  color: #656d76;
  padding-top: 34px;
}

/* Toggle + Clear ONDER de parents, links uitgelijnd */
.hgc-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* responsive: allow Share button to move to next line */
  justify-self: start; /* niet meer rechts */
  padding-top: 0; /* uitlijnen met de overige content */
  margin-top: 4px; /* kleine ruimte onder de parents */
}

.hgc-actions #shareBtn.btn-share{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Toggle style (reusable) */
.hgc .hgc-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  font-size: 14px;
  color: #333;
}
.hgc .hgc-switch input[type="checkbox"] {
  width: 42px;
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background: #e2e5e9;
  border-radius: 24px;
  border: 1px solid #d0d4d9;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.hgc .hgc-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.hgc .hgc-switch input[type="checkbox"]:checked {
  background: #ef7d00;
  border-color: #ef7d00;
}
.hgc .hgc-switch input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}
.hgc .hgc-switch-label {
  font-weight: 500;
  font-size: 12px;
  line-height: normal;
}

/* Action buttons */
.hgc .btn,
.hgc-modal-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  min-width: 116px;
  padding: 6px 20px;
  background: #ef7d00;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  font-size: clamp(1rem, 0.8vw, 1.2rem) !important;
  line-height: 1.2;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.hgc .btn:hover,
.hgc-modal-actions .btn:hover,
.hgc .btn:focus-visible,
.hgc-modal-actions .btn:focus-visible {
  background-color: #474747;
  opacity: 1 !important;
}

.hgc .btn:disabled,
.hgc .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.hgc .btn:disabled:hover,
.hgc .btn[disabled]:hover {
  filter: none;
}

.hgc .btn .btn-icon,
.hgc-modal-actions .btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 0;
  flex: 0 0 18px;
}

.hgc .btn svg,
.hgc-modal-actions .btn svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.hgc .btn svg path,
.hgc-modal-actions .btn svg path {
  fill: currentColor;
}
.btn-export svg path {
  stroke: currentColor;
  stroke-width: 0.6;
}

.hgc .btn .btn-label,
.hgc-modal-actions .btn .btn-label {
  display: inline-block;
  line-height: 1.2;
}

.hgc .btn.btn-clear .btn-label {
  line-height: 1.2;
}
/* Tags used by the multiselect */
.hgc .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #eeeeee;
  color: #333;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.hgc .tag.combo {
  background: #c3c4c7;
  color: #333333;
}
.hgc .tag .x {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

/* ====== Table ====== */
.hgc table#results {
  border: 1px solid #eeeeee;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

/* Interne cellen blijven subtiel */
.hgc th,
.hgc td {
  border-bottom: 1px solid #eaeaea;
}

/* Optioneel: geen extra rand onder de laatste rij */
.hgc table#results tr:last-child td {
  border-bottom: none;
}

.hgc table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.hgc th,
.hgc td {
  padding: 6px 4px !important;
  border-bottom: 1px solid #eaeaea;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}
.hgc th {
  background: #eeeeee;
  color: #444;
  font-weight: 600;
  font-size: clamp(1.05rem, 0.8vw, 1.2rem);
}
.hgc tr:hover td {
  filter: brightness(0.95);
}
.hgc .hidden {
  display: none;
}

/* ====== foutmelding ====== */
.hgc-notice {
  border: 1px solid #d63638;
  background: #fff5f5;
  color: #1e1e1e;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.35;
}

.hgc-notice.is-info {
  border-color: #ef7d00;
  background: #fff4e8;
}


/* ====== Responsive ====== */
@media (max-width: 720px) {
  .hgc-header {
    grid-template-columns: 1fr; /* alles onder elkaar */
    gap: 10px;
  }
  .hgc-parents {
    grid-template-columns: 1fr; /* parent 1, dan X, dan parent 2 (maar X apart tonen) */
    gap: 6px;
  }
  /* Toon de X los als divider */
  .hgc-cross {
    order: 2;
    width: 100%;
    text-align: center;
    padding-top: 6px;
    margin-bottom: -20px;
  }
  .hgc-parent:nth-child(1) {
    order: 1;
  }
  .hgc-parent:nth-child(3) {
    order: 3;
  }

  /* Toggle en Clear onder de parents, boven de tabel; uitlijnen links */
  .hgc-actions {
    justify-self: start;
    gap: 10px;
  }

  /* Kleinere paddings */
  .hgc .select {
    padding: 8px 10px;
  }
  .hgc .select input[type="text"] {
    min-width: 120px;
  }
  .hgc th,
  .hgc td {
    padding: 6px 4px !important;
    font-size: 13px;
  }
  .hgc .trait-badge {
    font-size: 12px;
    padding: 3px 8px;
  }
}

/* === Forceer toggle + Clear ONDER de invoervelden (desktop én mobiel) === */
.hgc .hgc-header {
  display: grid;
  grid-template-columns: 1fr !important; /* één kolom: eerst parents, daaronder actions */
  align-items: start;
  gap: 12px;
  margin-bottom: 30px;
}

.hgc .hgc-header .hgc-actions {
  justify-self: start !important; /* niet meer rechts */
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 0 !important; /* geen optische ophoging */
  margin-top: 4px; /* kleine ruimte onder de parents */
}

.hgc .hgc-header .hgc-cross {
  padding-top: 0 !important; /* was 34px; nu niet nodig */
}

/* Desktop: parents naast elkaar laten staan met 'X' ertussen */
@media (min-width: 721px) {
  .hgc .hgc-parents {
    grid-template-columns: 1fr 40px 1fr !important;
  }
}

/* --- Notes ---
Prefer using the .hgc wrapper + .hgc-header/.hgc-parents layout.
The older .hgc-container/.calculator-container styles are kept for backwards compatibility.
--- */


/* Spacing between action buttons 
.hgc .hgc-actions .btn + .btn {
  margin-right: 10px;
}
*/

/* Share modal */
.hgc-modal.hidden {
  display: none;
}
.hgc-modal.open {
  display: flex;
}
.hgc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}
.hgc-modal-content {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}
.hgc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hgc-modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
}
.hgc-modal-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.hgc-modal-actions {
  display: grid;
  gap: 10px;
}
.hgc-modal-actions .btn {
  width: 100%;
  text-align: center;
}


.hgc-print-header,
.hgc-print-footer {
  display: none;
}

/* Export and Print buttons stay hidden until a successful calculation has results. */
#exportBtn, #printBtn {
  display: none;
}

.hgc-print-header {
  align-items: center;
  gap: 10px;
}

.hgc-print-logo img {
  display: block;
  max-width: 220px;
  max-height: 90px;
  width: auto;
  height: auto;
}

.hgc-print-site-name,
.hgc-print-title {
  font-size: 28px;
  font-weight: 700;
  color: #222;
}

@media print {
  @page {
    size: auto;
    margin: 8mm 10mm 12mm;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body,
  body > *,
  .hgc,
  .hgc * {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }

  body.hgc-print-active > * {
    display: none !important;
  }

  body.hgc-print-active > .hgc-print-mount {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body.hgc-print-active .hgc,
  body.hgc-print-active .hgc * {
    visibility: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .hgc {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: #111;
    font-size: 12pt;
    overflow: visible !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    background: #fff !important;
    border: 0 !important;
  }

  .hgc .hgc-notice,
  .hgc .hgc-actions,
  .hgc .suggestions,
  .hgc .tag .x,
  .hgc .select input,
  .hgc-modal {
    display: none !important;
  }

  .hgc-print-header,
  .hgc-print-footer {
    display: block !important;
    text-align: left;
  }

  .hgc-print-header {
    display: block !important;
    margin: 0 0 10px !important;
  }

  .hgc-print-logo {
    margin-bottom: 8px;
  }

  .hgc-print-title {
    margin: 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid #ef7d00;
    font-size: 26pt;
    line-height: 1.15;
    font-family: 'StoneSansITCStd-Bold';
    color: #474747;
  }

  .hgc-print-footer {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #d9d9d9;
    font-size: 10pt;
    color: #666;
    text-align: left;
  }

  .hgc-header {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  .hgc .hgc-parents {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    margin: 0 0 12px !important;
  }

  .hgc .hgc-cross {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    font-size: 18pt;
    line-height: 1;
    color: #53647d;
    padding-top: 30px;
  }

  .hgc-parent {
    break-inside: avoid;
    page-break-inside: avoid;
    min-width: 0;
  }

  .hgc-parent-label {
    margin: 0 0 8px 0;
    font-size: 12pt;
    font-weight: 700;
  }

  .hgc .select {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid #d7dbe2;
    border-radius: 8px;
    background: #fff !important;
    box-shadow: none !important;
  }

  .hgc .tag {
    display: inline-flex !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #e9e9e9 !important;
    color: #31445d !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 10pt;
    line-height: 1.2;
  }

  .hgc table#results {
    display: table !important;
    width: 100% !important;
    margin-top: 0 !important;
    border: 1px solid #d8d8d8;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  .hgc table#results thead {
    display: table-header-group !important;
  }

  .hgc table#results tfoot {
    display: table-footer-group !important;
  }

  .hgc table#results tbody {
    display: table-row-group !important;
  }

  .hgc table#results thead th {
    background: #efefef !important;
    color: #374151 !important;
    font-weight: 700;
  }

  .hgc table#results th,
  .hgc table#results td {
    padding: 10px 12px;
    border-bottom: 1px solid #d8d8d8;
    vertical-align: top;
  }

  .hgc table#results tr:last-child td {
    border-bottom: 0;
  }

  .hgc table#results tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .hgc table#results th,
  .hgc table#results td {
    word-break: break-word;
  }

  .hgc table#results th:first-child,
  .hgc table#results td:first-child {
    white-space: nowrap !important;
    word-break: normal !important;
  }

  .hgc-print-footer {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .hgc .trait-badge {
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .hgc .badge-incomplete,
  .hgc .badge-incomplete-super {
    background: #00983a !important;
  }

  .hgc .badge-recessive {
    background: #ef7d00 !important;
  }

  .hgc .badge-recessive-het {
    background: #747474 !important;
  }

  .hgc .badge-recessive-poss-het {
    background: #f2af00 !important;
  }

  .hgc .badge-dominant {
    background: #7030a0 !important;
  }

  .hgc .badge-polygenic {
    background: #2a6f9d !important;
  }
}