/* -------------------------
   Tabbar status dots
------------------------- */

.tabbtn {
  position: relative;
  padding-right: 28px;
}

.tabbtn::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #cbd5e1;
  box-shadow: 0 0 0 3px #f8fafc;
}

/* empty */
.tabbtn.is-empty::after {
  background: #fff;
  border: 1px solid #cbd5e1;
}

/* partial */
.tabbtn.is-partial::after {
  background: #6366F1;
  border: 0;
  opacity: 0.8;
}

/* complete */
.tabbtn.is-filled::after {
  background: #04AA6D;
  border: 0;
}

/* invalid wins */
.tabbtn.is-invalid::after {
  background: #dc2626;
  border: 0;
  box-shadow: 0 0 0 3px #fee2e2;
}


/* -------------------------
   Profile completeness card
------------------------- */

.profile-completeness {
  margin: 0;
  padding: 10px 12px;
  box-shadow: none;
  display: grid;
  gap: 8px;
}

.pc-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.pc-head strong {
  font-size: 13px;
  color: #111;
  font-variant-numeric: tabular-nums;
}

.pc-breakdown {
  display: grid;
  gap: 7px;
}

.pc-mini {
  display: grid;
  grid-template-columns: 120px minmax(120px, 1fr) 52px;
  gap: 8px;
  align-items: center;
}

.pc-label {
  font-weight: 600;
}

.pc-label--mandatory {
  color: #E78A47;
}

.pc-label--recommended {
  color: #0E47CB;
}

.pc-label--optional {
  color: #868E96;
}

.pc-mini strong {
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pc-mini-bar {
  height: 7px;
  background: #eeeeee;
  border-radius: 999px;
  overflow: hidden;
}

.pc-mini-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width 0.2s ease;
}

.pc-mini--mandatory .pc-mini-bar span {
  background: #E78A47;
}

.pc-mini--recommended .pc-mini-bar span {
  background: #0E47CB;
}

.pc-mini--optional .pc-mini-bar span {
  background: #868E96;
}

/* Gold when complete */
.pc-mini.is-complete .pc-mini-bar span {
  background: linear-gradient(90deg, #d4af37, #f6d365);
  animation: goldPulse 0.6s ease;
}

.pc-mini.is-complete .pc-label {
  color: #b8962e;
  font-weight: 700;
}

@keyframes goldPulse {
  0% {
    transform: scaleX(0.9);
    opacity: 0.6;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.pc-mini--clickable {
  cursor: pointer;
  border-radius: 8px;
  padding: 3px 4px;
}

.pc-mini--clickable:hover {
  background: #f2f2f2;
}


/* -------------------------
   Sidenav status dots
------------------------- */

.sidenav a {
  position: relative;
  padding-right: 28px;
}

/* neutral selected state */
.sidenav a[aria-current="true"],
.sidenav a.is-empty[aria-current="true"],
.sidenav a.is-partial[aria-current="true"],
.sidenav a.is-filled[aria-current="true"] {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  color: #ffffff !important;
}

/* keep all non-invalid backgrounds neutral */
.sidenav a.is-empty,
.sidenav a.is-partial,
.sidenav a.is-filled {
  background: #fff;
  border-color: #eee;
}

.sidenav a::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #cbd5e1;
  box-shadow: 0 0 0 3px #f8fafc;
}

/* empty */
.sidenav a.is-empty::after {
  background: #fff;
  border: 1px solid #cbd5e1;
}

/* partial */
.sidenav a.is-partial::after {
  background: #6366F1;
  opacity: 0.8;
  border: 0;
}

/* complete */
.sidenav a.is-filled::after {
  background: #04AA6D;
  border: 0;
}

/* invalid wins */
.sidenav a.is-invalid {
  border-color: #fecaca;
}

.sidenav a.is-invalid::after {
  background: #dc2626;
  border: 0;
  box-shadow: 0 0 0 3px #fee2e2;
}

.sidenav a.is-invalid[aria-current="true"] {
  background: #fff1f2;
  border-color: #fca5a5;
}


/* Modal list container */
.cm-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cm-row:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.cm-row::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6366f1;
}

.cm-label {
  font-weight: 500;
  color: #0f172a;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-path {
  justify-self: end;
  min-height: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 7px;
}

.cm-path:empty {
  display: none;
}

.cm-header {
  font-size: 13px;
  color: #475569;
}

.cm-hint {
  margin-left: 6px;
  color: #94a3b8;
  font-size: 12px;
}


/* ---------------------------------------------------------
   Validation error rows inside completeness / error modal
--------------------------------------------------------- */

.cm-row.cm-row--error {
  grid-template-columns: 14px minmax(0, 1fr) auto;
  grid-template-areas:
    "dot label path"
    ". message message";

  align-items: start;
  gap: 6px 12px;
}

.cm-row.cm-row--error::before {
  grid-area: dot;
  margin-top: 7px;
}

.cm-row.cm-row--error .cm-label {
  grid-area: label;
  min-width: 0;

  font-weight: 700;
  line-height: 1.25;

  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-row.cm-row--error .cm-path {
  grid-area: path;
  justify-self: end;
  max-width: 220px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-row.cm-row--error .cm-error-message {
  grid-area: message;
  min-width: 0;

  margin-top: 6px;
  color: #374151;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.altpath-note {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid #f0c36a;
  border-left: 4px solid #f0ad1e;
  border-radius: 10px;
  background: #fff8e6;
  color: #4b3a12;
}

.altpath-note__kicker {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.altpath-note__text {
  font-size: 14px;
  font-weight: 600;
}

.altpath-note__text code {
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(120, 90, 20, .18);
  font-size: 12px;
}

.altpath-note__message {
  margin-top: 4px;
  font-size: 13px;
  opacity: .85;
}