.f3 {
  --female-color: rgb(196, 138, 146);
  --male-color: rgb(120, 159, 172);
  --background-color: rgb(33, 33, 33);

  font-family: 'Roboto', sans-serif;

  /* A4: reference the card-scale tokens defined in main.css :root.
     The library renders SVG, so these map to SVG presentation attributes
     via JS in chart.js. The CSS vars are here as the single source of truth
     so changing them in main.css ripples through automatically. */
  --f3-card-width: var(--card-width, 220px);
  --f3-card-font-size: var(--card-font-size, 13px);
  --f3-card-avatar-size: var(--card-avatar-size, 40px);
}

.f3 * {
  box-sizing: border-box;
}

.f3 .cursor-pointer {
  cursor: pointer;
}
.f3 svg.main_svg {
  width: 100%;
  height: 100%;
}
.f3 svg.main_svg text {
  fill: currentColor;
}
.f3 rect.card-female, .f3 .card-female .card-body-rect, .f3 .card-female .text-overflow-mask {
  fill: var(--female-color);
}
.f3 rect.card-male, .f3 .card-male .card-body-rect, .f3 .card-male .text-overflow-mask {
  fill: var(--male-color);
}
.f3 .card-genderless .card-body-rect, .f3 .card-genderless .text-overflow-mask {
  fill: lightgray;
}
.f3 .card_add .card-body-rect {
  fill: #3b5560;
  stroke-width: 4px;
  stroke: #fff;
  cursor: pointer;
}
.f3 g.card_add text {
  fill: #fff;
}
.f3 .card-main-outline {
  stroke: currentColor;
  stroke-width: 3px;
}
.f3 .card_family_tree rect {
  transition: 0.3s;
}
.f3 .card_family_tree:hover rect {
  transform: scale(1.1);
}
.f3 .card_add_relative {
  cursor: pointer;
  color: #fff;
  transition: 0.3s;
}
.f3 .card_add_relative circle {
  fill: rgba(0, 0, 0, 0);
}
.f3 .card_add_relative:hover {
  color: black;
}
.f3 .card_edit.pencil_icon {
  color: #fff;
  transition: 0.3s;
}
.f3 .card_edit.pencil_icon:hover {
  color: black;
}
.f3 .card_break_link, .f3 .link_upper, .f3 .link_lower, .f3 .link_particles {
  transform-origin: 50% 50%;
  transition: 1s;
}
.f3 .card_break_link {
  color: #fff;
}
.f3 .card_break_link.closed .link_upper {
  transform: translate(-140.5px, 655.6px);
}
.f3 .card_break_link.closed .link_upper g {
  transform: rotate(-58deg);
}
.f3 .card_break_link.closed .link_particles {
  transform: scale(0);
}
.f3 .input-field input {
  height: 2.5rem !important;
}
.f3 .input-field > label:not(.label-icon).active {
  -webkit-transform: translateY(-8px) scale(0.8);
  transform: translateY(-8px) scale(0.8);
}
.f3.f3-cont {
  width:100%;
  height:900px;
  max-height:70vh;
  background-color: var(--background-color);
  color:#fff;
}
.f3 {
  position: relative;
  display: flex;
}




/* ── Deceased cards (living = 'N') ──────────────────────────────────────────── */
/*
 * Warm sepia tone — keeps male/female readable but signals "historical".
 * Dashed outline separates from living relatives without being jarring.
 * No grayscale filter — keeps avatar photos legible.
 */
.f3 .card.card-deceased {
  outline: 2px dashed rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
  border-radius: 8px;
}
.f3 .card.card-deceased .card-inner {
  background-color: #8b6f47 !important;   /* warm walnut brown */
  opacity: 0.85;
}
/* Keep uploaded photos in full colour — reset blend mode so the image
   sits on top of the brown card-inner layer without being desaturated. */
.f3 .card.card-deceased img {
  opacity: 0.9;
  mix-blend-mode: normal;
}


/* form-info */
.f3-form input[type="text"],
.f3-form textarea,
.f3-form select {
  width: 100%;
  padding: 8px 12px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
  background: var(--background-color);
  color: currentColor;
}

.f3-form input[type="text"]:focus,
.f3-form textarea:focus,
.f3-form select:focus {
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
}

.f3-form button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin: 10px 0;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.f3-form button[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

.f3-cancel-btn {
  background-color: #ccc;
}

.f3-form .f3-delete-btn {
  background-color: transparent;
  border: 1px solid #f44336;
  color: #f44336;
  width: 100%;
  padding: 5px 10px;
}

.f3-delete-btn:hover {
  background-color: #da190b;
  border-color: #da190b;
  color: #fff;
}

.f3-delete-btn:disabled {
  opacity: 0.5;
  background-color: transparent;
  color: #f44336;
  cursor: not-allowed;
}

.f3-radio-group {
  margin: 15px 0;
}

.f3-radio-group label {
  margin-right: 15px;
  cursor: pointer;
}

.f3-radio-group input[type="radio"] {
  margin-right: 5px;
}

.f3-info-field-label, .f3-form-field label {
  font-weight: bold;
  font-size: 12px;
  display: block;
  opacity: 0.8;
}

.f3-info-field-value {
  font-weight: normal;
  display: block;
  border: none;
  outline: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 1px;
  margin-bottom: 10px;
  min-height: 18px;
}

.f3-form-buttons {
  text-align: right;
}

.f3-form-title {
  text-align: center;
}

.f3-form.non-editable .f3-form-buttons, .f3-form.non-editable .f3-delete-btn {
  display: none;
}

.f3-close-btn {
  cursor: pointer;
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 30px;
  color: #fff;
}

.f3-edit-btn {
  position: relative;
  top: -1px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: inline-block;
}

.f3-add-relative-btn {
  cursor: pointer;
  width: 27px;
  height: 27px;
  margin-right: 5px;
  display: inline-block;
}

/* card-html */

.f3 div.card {
  cursor: pointer;
  color: #fff;
  position: relative;
  line-height: 1.2;
}

.f3 div.card-image-circle {
  border-radius: 50%;
  padding: 5px;
  width: 90px;
  height: 90px;
}

.f3 div.card-image-circle div.card-label {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, 50%);
  max-width: 150%;
  min-height: 22px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 3px;
  padding: 0 5px;
}

.f3 div.card-image-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.f3 div.card-image-circle svg {
  width: 100%;
  height: 100%;
  padding: 5px;
  border-radius: 50%;
  object-fit: cover;
}

.f3 div.card-image-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.f3 div.card-rect {
  padding: 5px;
  border-radius: 3px;
  width: 120px;
  min-height: 70px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.f3 div.card-image-rect {
  width: 200px;
  min-height: 70px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.f3 div.card-image-rect .person-icon {
  height: 70px;
  width: 70px;
  object-fit: cover;
  flex: 0 0 auto;
  padding: 5px;
  margin-right: 10px;
}

.f3 div.card-image-rect img {
  height: 70px;
  width: 70px;
  object-fit: cover;
  flex: 0 0 auto;
  padding: 5px;
  margin-right: 10px;
  border-radius: 8px;
}

.f3 div.card-image-rect svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
  padding: 5px;
  border-radius: 7px;
}

.f3 div.card-image-rect div.card-label {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.f3 div.card-image-rect div.card-label div:first-child {
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.2;
}

.f3 div.card-image-rect div.card-label div:last-child {
  font-size: 0.72em;
  opacity: 0.78;
  line-height: 1.2;
  margin-top: 2px;
}

.f3 div.mini-tree {
  text-align: right;
  position: absolute;
  top: -15px;
  right: -2px;
  z-index: -1;
}
.f3 div.mini-tree svg {
  width: 55px;
}

.f3 div.card > div {
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.8);
}

.f3 .card-inner {
  outline: 0px solid rgba(255, 255, 255, 1);
  transition: outline 0.5s ease-in-out;
}

.f3 div.card-female .card-inner, .f3 div.card-female .person-icon svg {
  background-color: var(--female-color);
}
.f3 div.card-male .card-inner, .f3 div.card-male .person-icon svg {
  background-color: var(--male-color);
}
.f3 div.card-genderless .card-inner, .f3 div.card-genderless .person-icon svg {
  background-color: lightgray;
}

.f3 div.card-new-rel .card-inner, .f3 div.card-new-rel .person-icon svg {
  background-color: var(--background-color);
}

.f3 div.card-to-add .card-inner {
  background-color: var(--background-color);
  border: 1px solid;
}

.f3 div.card-to-add .card-inner .card-label {
  margin: 0 auto;
}

.f3 div.card-to-add .person-icon {
  display: none;
}

.f3 div.card-new-rel .card-inner {
  border-width: 1px;
  border-style: dashed;
  outline: 0px !important;
}
.f3 div.card-new-rel.card-female .card-inner, .f3 div.card-to-add.card-female .card-inner {
  border-color: var(--female-color);
  color: var(--female-color);
}
.f3 div.card-new-rel.card-male .card-inner, .f3 div.card-to-add.card-male .card-inner {
  color: var(--male-color);
  border-color: var(--male-color);
}

.f3 div.card:hover > div {
  transform: translate(0, -2px);
}
.f3 div.card-main .card-inner, .f3 div.card:hover .card-inner {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
}

.f3 div.card-main .card-inner {
  outline: 4px solid rgba(220, 220, 220, 1);
}

.f3 div.card-inner.f3-path-to-main {
  outline: 4px solid rgba(255, 255, 255, 1);
}

.f3 .link {
  transition: stroke-width 0.2s ease-in-out;
}

/* Link types — classes are stamped by applyLinkClasses() in chart.js.
   CSS overrides the stroke / stroke-width SVG attributes the library sets inline. */
.f3 .link.link-parent {
  stroke: #e5e7eb;
  stroke-width: 1.5px;
}

/* Marriage — gold. Rose blended into the female card fill (same hue family);
   gold is clear of both the blue male and pink female cards. */
.f3 .link.link-spouse {
  stroke: #e0b45c;
  stroke-width: 2px;
  stroke-dasharray: 5 3;
}

/* Intercaste marriage — brighter red (5.3:1 on the dark background), slightly thicker, same dash pattern */
.f3 .link.link-intercaste {
  stroke: #ff5a5f;
  stroke-width: 2.5px;
}

/* Hover highlight must stay last and out-specify the type rules above */
.f3 .link.f3-path-to-main,
.f3 .link.link-parent.f3-path-to-main,
.f3 .link.link-spouse.f3-path-to-main,
.f3 .link.link-intercaste.f3-path-to-main {
  stroke-width: 4px;
}





.f3-form-cont {
  position: relative;
  z-index: 4;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: var(--background-color);
  overflow: auto;
  flex: 0 0 auto;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.f3-form-cont.opened {
  width: 350px;
}

.f3-form {
  padding: 20px;
}

.f3-history-controls {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.f3-back-button, .f3-forward-button {
  width: 30px;
  height: 30px;
  transition: opacity 0.3s ease;
  cursor: pointer;
  display: inline-block;
  background-color: transparent;
  border: none;
  margin-right: 10px;
}


.f3-back-button.disabled, .f3-forward-button.disabled {
  opacity: 0.5;
}