/* =========================================================
   Theme tokens
   ========================================================= */
:root {
  --primaryColor: #1c2b39;
  --secondaryColor: #00a0e3;
  --tertiaryColor: #e3b400;
  
  --badgeColor1: #ea9c2e;
  --badgeColor2: #7f19ba;
  --badgeColor3: #1949ba;
  --badgeColor4: #19ba32;

  --blue: #00a0e3; /* type 1 default */
  --blue-text-safe: #0078aa;

  --comp: #e34300;
  --comp-text-safe: #d84000;
  --comp-muted: #b74d20;
  --comp-soft: #e0a085;

  --neutral-ink: #1c2b39;
  --neutral-bg: #f5f7fa;
}

/* =========================================================
   Base / Typography
   ========================================================= */
#NewPersonWidget h1,
#NewPersonWidget h2,
#NewPersonWidget h3,
#NewPersonWidget h4,
#NewPersonWidget h5,
#NewPersonWidget h6 {
  text-transform: uppercase;
}
#NewPersonWidget h4 {
  margin-bottom: 0.25em;
}

/* =========================================================
   Layout containers
   ========================================================= */
#NewPersonWidget section {
  margin-top: 4em;
}

.panel-text .wrapper .container {
  max-width: 95% !important;
}

.new-person-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
  gap: 1em;
  margin-top: 1em;
  align-items: stretch;
}

/* =========================================================
   Person cards
   ========================================================= */
.person-card {
  background: #edeef1;
  /*! padding: 1em; */
  box-shadow: 1px 1px 2px rgba(74, 74, 75, 0.17);
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  align-items: start;
}

.person-card * {
  margin: 0;
}
.person-card > div {
  width: 100%;
}

.person-card h6 {
  color: var(--secondaryColor);
}


.person-card .name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5em;
  row-gap: 0.25em;
  justify-content: space-between;
  background: var(--secondaryColor);
  padding: 0.5em 1em;
  box-sizing: border-box;
}

.person-card .name > h2,
.person-card .name > h3 {
  margin: 0;
  white-space: nowrap;
  flex: 0 1 auto;
  color: #fff;
}

.person-card .name > .badge {
  flex: 0 0 auto;
  margin-left: 0;
  width: auto;
  max-width: 100%;
  font-size: 0.7rem;
}

.person-card .card-content {
  padding: 0.5em 1em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.person-card .card-content-section {
  display: flex;
  flex-direction: column;
}

.person-card .card-content-section > * {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.person-card h3 {
  font-size: 1.1em;
}
.person-card p {
  margin: 0;
}

/* =========================================================
   Badge (driven by --badge-color)
   ========================================================= */
/* Map types to a color variable */
#NewPersonWidget .badge--type1 {
  --badge-color: var(--badgeColor1);
} /* New Person */
#NewPersonWidget .badge--type2 {
  --badge-color: var(--badgeColor2);
} /* New Again */
#NewPersonWidget .badge--type3 {
  --badge-color: var(--badgeColor3);
} /* New to Program or 3rd state */
#NewPersonWidget .badge--type4 {
  --badge-color: var(--badgeColor4);
} /* New to Program or 4th state */

/* Base badge styles; keep this after the type classes */
.person-card .badge {
  --badge-color: var(--secondaryColor);
  display: flex;
  align-items: center;
  gap: 0.35em;
  position: relative;
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
  color: #ffffff;
  padding: 0.25em 0.75em;
  background-color: var(--badge-color);
}

/* Icon inside badge uses currentColor */
.person-card .badge i {
  margin-right: 0.4em;
  vertical-align: -0.12em;
  color: currentColor;
  opacity: 0.9;
}

/* Motion keyframes (no underline version) */
@keyframes badge-pop {
  0% {
    transform: translateY(-2px) scale(0.98);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes badge-breathe {
  0%,
  100% {
    text-shadow: none;
  }
  50% {
    text-shadow: 0 0 0.35rem
      color-mix(in srgb, var(--badge-color) 45%, transparent);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .person-card .badge {
    animation: none !important;
  }
}

/* =========================================================
   Household contacts / icons
   ========================================================= */
.icons {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
  font-size: 1.25rem;
}

.icons i {
  margin-right: 0.4em;
  color: var(--secondaryColor);
}

.household-contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  width: 100%;
}

.household .household-contact + .household-contact {
  border-top: 1px solid
    color-mix(in srgb, var(--secondaryColor) 15%, transparent);
}

.household ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================================================
   Empty state and date picker
   ========================================================= */
.empty-state {
  background: #fff4f4;
  border: 1px solid #ffcccc;
  padding: 1em;
  border-radius: 4px;
  margin: 1em 0;
  text-align: center;
}

.date-picker-container {
  margin-bottom: 1em;
  font-size: 1em;
}

.date-picker-container input[type="date"] {
  padding: 0.4em;
  font-size: 1em;
}

.picker-container {
  display: flex;
  flex-direction: column;
}

.picker-container > select, .picker-container > input {
  width: fit-content;
  background-color: #E9E9ED;
  padding: 0.65em 1em !important;
  text-align: center;
}

.pickerLabel {
  font-size: 0.75rem;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
  .new-person-cards {
    grid-template-columns: 1fr;
  }
  .picker-container > * {
     width: 100%;
   }
  .person-card .name > .badge {
    margin-left: 0;          /* centered/left on its own line if you prefer */
  }
}

@media (max-width: 480px) {
  .person-card {
    padding: 0.75em;
  }
  .person-card h3 {
    font-size: 1em;
  }
  .person-card .badge {
    font-size: 0.75em;
    padding: 0.2em 0.6em;
  }
}