/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

.section-block {
  margin-bottom: 8px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px;

  .section-icon {
    color: var(--md-sys-color-primary, #1074b9);
    font-size: 14px;
  }

  .section-required-tag {
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
}

.kyc-badge {
  background-color: #1976d2;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  line-height: 18px;
}

.kyc-info-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1565c0;
  padding: 8px 12px;
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 6px;
  margin-bottom: 16px;
}

.kyc-info-hint-icon {
  font-size: 18px;
  height: 18px;
  width: 18px;
  color: #1565c0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.form-field {
  width: 100%;
}

.full-width {
  grid-column: 1 / -1;
}

/* KYC Expiry Section */
.kyc-expiry-section {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.kyc-expiry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;

  .kyc-expiry-header-icon {
    color: #d97706;
    font-size: 14px;
  }
}

.kyc-expiry-body {
  padding: 16px;
}

.kyc-expiry-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.kyc-expiry-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  transition: all 0.15s;

  &.active {
    border-color: #1353a0;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgb(19 83 160 / 12%);
  }

  &__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;

    &.green {
      background: #10b981;
    }

    &.amber {
      background: #f59e0b;
    }

    &.red {
      background: #ef4444;
    }
  }

  &__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  &__label {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
  }

  &__cycle {
    font-size: 11px;
    color: #64748b;

    strong {
      color: #334155;
    }
  }

  &__next {
    font-size: 10px;
    font-weight: 600;
    color: #1353a0;
    background: #dbeafe;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.kyc-expiry-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;

  &__icon {
    font-size: 14px;
    flex-shrink: 0;
  }

  &--low {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;

    .kyc-expiry-alert__icon {
      color: #10b981;
    }
  }

  &--medium {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;

    .kyc-expiry-alert__icon {
      color: #f59e0b;
    }
  }

  &--high {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;

    .kyc-expiry-alert__icon {
      color: #ef4444;
    }
  }
}

@media (width <= 768px) {
  .kyc-expiry-cards {
    grid-template-columns: 1fr;
  }
}

/* Verify Field Layout */
.verify-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.verify-input {
  flex: 1;
}

.verify-action {
  padding-top: 8px;
  flex-shrink: 0;
}

.verify-btn-inline {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  height: 36px !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.change-number-btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  height: 36px !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  gap: 6px;

  mat-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }
}

.verify-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;

  &.pending {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
  }

  &.verified {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
  }

  // Not verified, but covered by a declaration — deliberately amber rather than green so it never
  // reads as a passing check.
  &.declared {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
  }
}

// ── PAN declaration summary ────────────────────────────────────────────────
.pan-decl-card {
  margin: -4px 0 16px;
  padding: 12px 14px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  background: #fffbeb;
}

.pan-decl-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pan-decl-card__icon {
  color: #b45309;
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.pan-decl-card__title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
}

.pan-decl-card__date {
  margin-left: auto;
  font-size: 11px;
  color: #b45309;
}

.pan-decl-card__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pan-decl-card__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  font-size: 12.5px;

  .k {
    color: #92400e;
    font-weight: 500;
  }

  .v {
    color: #451a03;
    word-break: break-word;

    &.strong {
      font-weight: 600;
    }
  }
}

.pan-decl-card__note {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #fde68a;
  font-size: 11.5px;
  line-height: 1.5;
  color: #b45309;
}

.pan-decl-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;

  .danger {
    color: #b91c1c;
  }
}

// ── Aadhaar enrolment receipt ──────────────────────────────────────────────
// Blue rather than the declaration's amber: nothing has failed here, the customer simply does not
// hold the document yet.
.aad-rcpt-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -4px 0 16px;
  padding: 10px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  font-size: 12.5px;
  color: #1e40af;

  mat-icon {
    color: #2563eb;
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  button {
    margin-left: auto;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
  }
}

.aad-rcpt-card {
  margin: -4px 0 16px;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.aad-rcpt-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.aad-rcpt-card__icon {
  color: #2563eb;
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.aad-rcpt-card__title {
  font-size: 13px;
  font-weight: 600;
  color: #1e3a8a;
}

.aad-rcpt-card__date {
  margin-left: auto;
  font-size: 11px;
  color: #2563eb;
}

.aad-rcpt-card__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aad-rcpt-card__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  font-size: 12.5px;

  .k {
    color: #1e40af;
    font-weight: 500;
  }

  .v {
    color: #0f172a;
    word-break: break-word;

    &.mono {
      font-family: monospace;
      letter-spacing: 0.02em;
    }
  }
}

.aad-rcpt-card__note {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #bfdbfe;
  font-size: 11.5px;
  line-height: 1.5;
  color: #2563eb;
}

.aad-rcpt-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;

  .danger {
    color: #b91c1c;
  }
}

.verify-icon-ok {
  color: #059669 !important;
  font-size: 20px !important;
}

.toggle-vis-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: #64748b;

  /* Material reserves a 48x48 invisible touch-target + ripple around every
     mat-icon-button by default. Shrinking the button to 28px above doesn't
     shrink that touch-target/ripple with it, so — since the suffix
     container doesn't clip overflow — it visually spills out past the
     field's own border, making the icon look misplaced/half-outside the box. */
  ::ng-deep .mat-mdc-button-touch-target {
    width: 28px !important;
    height: 28px !important;
  }

  ::ng-deep .mat-mdc-button-persistent-ripple,
  ::ng-deep .mat-ripple {
    border-radius: 50%;
  }
}

/* Verification Info Banner */
.verify-info-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: #1e40af;

  .verify-info-icon {
    font-size: 14px;
    color: #2563eb;
    flex-shrink: 0;
  }
}

/* PAN Result Card */
.pan-result-card {
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  overflow: hidden;
  margin-top: -4px;
  margin-bottom: 8px;
}

.pan-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #059669;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.pan-result-ok-icon {
  font-size: 14px;
}

.pan-result-body {
  padding: 10px 14px;
  background: #ecfdf5;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.pan-result-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pan-result-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pan-result-value {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;

  &.name {
    font-size: 15px;
    font-weight: 700;
    color: #065f46;
  }

  &.seeded {
    color: #059669;
  }

  &.not-seeded {
    color: #dc2626;
  }

  &.date {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: #475569;
  }
}

/* Verify error / success */
.verify-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #dc2626;
  padding: 6px 10px;
  background: #fef2f2;
  border-radius: 6px;
  margin-top: -8px;
  margin-bottom: 8px;
}

.verify-success {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #059669;
  padding: 6px 10px;
  background: #ecfdf5;
  border-radius: 6px;
  margin-top: -8px;
  margin-bottom: 8px;
}

.verify-icon-fail {
  color: #dc2626 !important;
  font-size: 20px !important;
}

/* ═══ CIN Progress ═══ */
.cin-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
}

.cin-progress-percent {
  font-size: 12px;
  font-weight: 700;
  color: #1074b9;
  text-align: center;
}

.cin-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cin-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9ca3af;
  transition: color 0.3s ease;

  &.active {
    color: #1074b9;
    font-weight: 600;
  }

  &.done {
    color: #388e3c;
  }
}

.done-icon {
  color: #388e3c;
}

/* ═══ OTP Card ═══ */
.otp-card {
  border-radius: 12px;
  border: 1px solid #e0e7ff;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgb(99 102 241 / 8%);
  margin-bottom: 8px;
}

.otp-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.otp-card__header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #1074b9;
  color: #fff;
  flex-shrink: 0;

  mat-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }
}

.otp-card__header-text {
  display: flex;
  flex-direction: column;
}

.otp-card__title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.otp-card__subtitle {
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
}

.otp-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.otp-card__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 10px;
}

/* Individual digit boxes */
.otp-digits {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.otp-digit-box {
  width: 38px;
  height: 42px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  color: #1e293b;
  background: #f8fafc;
  outline: none;
  transition: all 0.15s ease;
  caret-color: #1074b9;

  &:focus {
    border-color: #1074b9;
    background: #fff;
    box-shadow: 0 0 0 2px rgb(16 116 185 / 12%);
  }

  &.filled {
    border-color: #1074b9;
    background: #eff6ff;
    color: #1074b9;
  }
}

.otp-card__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.otp-card__verify-btn {
  min-width: 140px;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  letter-spacing: 0.02em;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.otp-btn-icon {
  font-size: 15px;
}

.otp-spinner {
  display: inline-block;

  ::ng-deep circle {
    stroke: #fff !important;
  }
}

.otp-card__resend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.otp-card__countdown {
  color: #64748b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;

  strong {
    color: #1074b9;
    font-family: 'Roboto Mono', monospace;
  }
}

.otp-card__resend-text {
  color: #94a3b8;
}

.otp-card__resend-btn {
  color: #1074b9 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 0 6px !important;
  min-width: auto !important;
  text-decoration: underline;
}

/* Aadhaar Verified Result Card */
.aadhaar-result-card {
  border-radius: 10px;
  border: 1px solid #a7f3d0;
  overflow: hidden;
  margin-bottom: 8px;
}

.aadhaar-result-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ecfdf5;
  font-size: 13px;
  font-weight: 600;
  color: #065f46;
}

.aadhaar-result-card__icon {
  color: #059669;
}

.aadhaar-result-card__body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aadhaar-result-card__label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aadhaar-result-card__name {
  font-size: 15px;
  font-weight: 600;
  color: #065f46;
}

@media (width <= 480px) {
  .otp-digits {
    gap: 6px;
  }

  .otp-digit-box {
    width: 40px;
    height: 48px;
    font-size: 18px;
    border-radius: 8px;
  }

  .otp-card__header {
    padding: 12px 14px;
  }

  .otp-card__body {
    padding: 20px 14px;
  }
}

/* PAN-Aadhaar Link Status (read-only) */
.pan-link-status {
  margin-bottom: 8px;
}

.pan-link-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;

  &.linked {
    border-color: #a7f3d0;
    background: #ecfdf5;

    .pan-link-value {
      color: #059669;
    }

    .pan-link-icon {
      color: #059669;
    }
  }

  &.not-linked {
    border-color: #fecaca;
    background: #fef2f2;

    .pan-link-value {
      color: #dc2626;
    }

    .pan-link-icon {
      color: #dc2626;
    }
  }

  &.exempt {
    border-color: #bfdbfe;
    background: #eff6ff;

    .pan-link-value {
      color: #2563eb;
    }

    .pan-link-icon {
      color: #2563eb;
    }
  }
}

.pan-link-icon {
  font-size: 16px;
  color: #64748b;
}

.pan-link-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pan-link-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pan-link-value {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.pan-link-hint {
  font-size: 10px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* PAN-Aadhaar Link Status */
.pan-aadhaar-link {
  display: flex;
  align-items: center;
}

.link-status-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;

  .link-icon {
    font-size: 16px;
    color: #64748b;
  }

  .link-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    display: block;
  }

  .link-value {
    font-size: 12px;
    font-weight: 500;

    &.pending {
      color: #d97706;
    }

    &.na {
      color: #94a3b8;
    }

    &.linked {
      color: #059669;
    }
  }
}

/* Required Badge */
.required-badge {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

/* Warning Hint */
.warning-hint {
  background-color: #fffbeb !important;
  border-color: #fbbf24 !important;
  color: #92400e !important;

  .kyc-info-hint-icon {
    color: #d97706 !important;
  }
}

/* Form 60 not needed text */
.form60-not-needed {
  font-size: 13px;
  color: #059669;
  padding: 8px 12px;
  background: #ecfdf5;
  border-radius: 6px;
  border: 1px solid #a7f3d0;
}

/* Checkbox field */
.checkbox-field {
  display: flex;
  align-items: center;
  padding-top: 10px;
}

/* Read-only Yes/No flag — replaces the disabled mat-checkbox in view mode
   so we don't fight Material's greyed-out disabled checkbox styling. */
.ro-flag {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  &__label {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
  }

  &__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;

    mat-icon {
      font-size: 15px;
      width: 15px;
      height: 15px;
    }

    &--yes {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }

    &--no {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }
  }
}

/* Link select inside status box */
.link-select {
  font-size: 12px;
  margin-top: 2px;
}

/* Doc badge */
.doc-badge {
  background: #7c3aed !important;
}

.kyc-client-type-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 12px;
}

.doc-mandatory-star {
  color: #dc2626;
  font-weight: 700;
}

/* AML Section */
.aml-title .section-icon {
  color: #dc2626 !important;
}

.aml-block-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: #991b1b;

  .aml-block-icon {
    font-size: 16px;
    color: #dc2626;
  }
}

.aml-warn-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: #92400e;

  .aml-warn-icon {
    font-size: 16px;
    color: #d97706;
  }
}

/* Freeze Section */
.freeze-title .section-icon {
  color: #0369a1 !important;
}

/* Photo & Signature Upload */
.photo-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border: 2px dashed #d0d5dd;
  border-radius: 10px;
  background: #f9fafb;
  text-align: center;
  transition:
    border-color 0.15s,
    background 0.15s;

  &:hover {
    border-color: #1353a0;
  }

  &--missing {
    border-color: #dc2626;
    background: #fef2f2;

    &:hover {
      border-color: #b91c1c;
    }
  }

  &__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1353a0;
  }

  &__label {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
  }

  &__req {
    color: #dc2626;
    font-weight: 700;
    margin-left: 2px;
  }

  &__error {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
  }

  &__hint {
    font-size: 11px;
    color: #94a3b8;
  }

  &__btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  &__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;

    &:hover {
      border-color: #1353a0;
      color: #1353a0;
    }

    &--secondary {
      background: #f8fafc;
    }
  }

  &__status {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  &--has-preview {
    border-style: solid;
    border-color: #1353a0;
    background: #fff;
    padding: 12px;
  }
}

/* Upload Preview */
.upload-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;

  &__img {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    object-fit: cover;
    background: #f8fafc;

    &--photo {
      width: 120px;
      height: 120px;
      border-radius: 50%;
    }

    &--sig {
      width: 100%;
      max-width: 250px;
      height: 80px;
      border-radius: 6px;
      object-fit: contain;
    }
  }

  &__actions {
    display: flex;
    gap: 8px;
  }

  &__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all 0.15s;

    &.recrop {
      color: #1353a0;

      &:hover {
        background: #eff6ff;
        border-color: #1353a0;
      }
    }

    &.remove {
      color: #dc2626;

      &:hover {
        background: #fef2f2;
        border-color: #dc2626;
      }
    }
  }
}

@media (width <= 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .photo-sig-grid {
    grid-template-columns: 1fr;
  }
}

.step-header {
  background: #0f172a;
  padding: 16px 24px;
  border-radius: 10px 10px 0 0;
  margin-bottom: 20px;

  &__left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  &__icon {
    font-size: 18px;
    color: #60a5fa;
  }

  &__title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
  }

  &__sub {
    font-size: 11px;
    color: rgb(255 255 255 / 50%);
    margin: 2px 0 0;
  }
}

/* ── Risk dropdown ── */
.risk-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.risk-meter {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;

  &.risk-low {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgb(34 197 94 / 20%);
  }

  &.risk-medium {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgb(245 158 11 / 20%);
  }

  &.risk-high {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgb(239 68 68 / 20%);
  }
}

.risk-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 4px;
}

/* ── Risk gauge in cards ── */
.risk-gauge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.risk-gauge-svg {
  width: 40px;
  height: 24px;
}

.field-prefix-icon {
  display: inline-flex;
  align-items: center;
  padding-left: 4px;
  padding-right: 8px;
  margin-right: 8px;
  border-right: 1.5px solid #cbd5e1;
  line-height: 1;

  mat-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #1565c0;
  }
}

/* ─── Re-edit Info Alert ─── */
.kyc-reedit-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 8px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #1e40af;

  &__icon {
    color: #3b82f6;
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
  }

  strong {
    font-weight: 600;
  }
}

/* ===================== KYC Document chip-grouped picker ===================== */
.kyc-doc-pickbox {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 16px 18px;
  margin: 6px 0 14px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 4%);

  &__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 14px;
  }

  &__icon {
    color: #2563eb;
    background: #eff6ff;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }

  &__titles {
    min-width: 0;
  }

  &__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
  }

  &__sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: #64748b;
  }
}

.kyc-doc-field {
  margin-bottom: 4px;
}

.kyc-doc-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 10px;

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #64748b;
  }
}

.kyc-doc-chip-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f8fafc;
}

.kyc-doc-chip-group-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;

  mat-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #94a3b8;
  }
}

.kyc-doc-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kyc-doc-chip-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 14px 0 10px;
}

.kyc-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;

  &:hover {
    border-color: #1976d2;
    color: #1976d2;
  }

  &__icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #94a3b8;
  }

  &--sel {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #0d47a1;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px #1976d2;

    .kyc-doc-chip__icon {
      color: #1976d2;
    }
  }

  /* Non-selected chip in read-only mode — visible but visibly unclickable.
     The selected chip stays fully highlighted (no `--locked` class on it). */
  &--locked {
    cursor: default;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;

    .kyc-doc-chip__icon {
      color: #cbd5e1;
    }

    &:hover {
      border-color: #e2e8f0;
      color: #94a3b8;
    }
  }

  &:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
  }
}

/* When the whole wrap is locked, prevent the selected chip's cursor from
   suggesting interactivity either. */
.kyc-doc-chip-wrap--locked .kyc-doc-chip--sel {
  cursor: default;
}

.kyc-doc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 13px;

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #059669;
    flex-shrink: 0;
  }
}

.kyc-doc-error {
  margin-top: 8px;
  color: #b91c1c;
  font-size: 12px;
  padding-left: 4px;

  strong {
    font-weight: 700;
  }
}

/* ===================== KYC Document upload dropzones ===================== */
.kyc-doc-upload-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;

  &--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (width <= 720px) {
    grid-template-columns: 1fr !important;
  }
}

.kyc-doc-upload-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kyc-doc-upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kyc-doc-upload-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;

  mat-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #64748b;
  }
}

.kyc-doc-upload-req {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.kyc-merged {
  margin-top: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;

  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 10px;
  }

  &__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;

    mat-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
      color: #2563eb;
    }
  }

  &__hint {
    font-size: 12px;
    color: #64748b;
  }

  &__preview {
    display: flex;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;

    img {
      max-width: 100%;
      max-height: 360px;
      border-radius: 6px;
      box-shadow: 0 1px 6px rgb(15 23 42 / 8%);
    }
  }

  &__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  &__btn {
    mat-icon {
      font-size: 16px;
      width: 16px;
      height: 16px;
      margin-right: 4px;
      vertical-align: middle;
    }
  }
}

.kyc-doc-dropzone {
  display: block;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  padding: 18px 14px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;

  &:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
  }

  &--req {
    border-color: #fca5a5;
    background: #fef2f2;
  }

  &--has {
    border-style: solid;
    border-color: #86efac;
    background: #f0fdf4;
  }

  &__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;

    mat-icon {
      font-size: 22px;
      width: 22px;
      height: 22px;
      color: #94a3b8;
    }
  }

  &__file {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;

    mat-icon {
      color: #16a34a;
      flex-shrink: 0;
    }
  }

  &__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__remove {
    flex-shrink: 0;
  }

  /* Locked variant — used when an existing saved doc is shown but the
     section's top-level Edit hasn't been clicked yet. */
  &--locked {
    cursor: default;

    &:hover {
      background: #f0fdf4;
      border-color: #86efac;
    }
  }

  /* Existing saved document — thumbnail + filename + actions. */
  &__existing {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  &__thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    flex-shrink: 0;
  }

  &__doc-ic {
    width: 40px;
    height: 40px;
    font-size: 32px;
    color: #1e88e5;
    flex-shrink: 0;
  }

  &__existing-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
  }

  &__existing-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__existing-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  &__view {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    transition: all 0.12s;

    mat-icon {
      font-size: 14px;
      width: 14px;
      height: 14px;
    }

    &:hover {
      background: #dbeafe;
      border-color: #1e40af;
    }
  }

  &__sep {
    color: #cbd5e1;
    font-weight: 700;
  }

  &__existing-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #1e40af;
    font-weight: 600;

    mat-icon {
      font-size: 14px;
      width: 14px;
      height: 14px;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   Read-only / disabled form-field overrides
   ─── When the form is .disable()'d (view mode after KYC is locked),
        Material drops opacity and greys everything. That reads as
        "blurry" to users. Restore proper contrast: dark text, crisp
        outline, normal-weight label — just NOT editable.
   ═══════════════════════════════════════════════════════════════ */
:host ::ng-deep {
  /* Outlined form fields in disabled state */
  .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled {
    opacity: 1;

    /* Input text */
    .mat-mdc-input-element,
    input.mat-mdc-input-element {
      color: #0f172a !important;
      -webkit-text-fill-color: #0f172a !important; /* Chrome/Safari override */
      font-weight: 600;
      caret-color: transparent;
    }

    /* Floating label */
    .mat-mdc-floating-label,
    .mdc-floating-label {
      color: #64748b !important;
      opacity: 1 !important;
    }

    /* The outline lines */
    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      border-color: #cbd5e1 !important;
      border-width: 1px !important;
    }

    /* matPrefix icons (the credit-card / fingerprint glyphs) */
    .field-prefix-icon mat-icon,
    .mat-mdc-form-field-icon-prefix mat-icon {
      color: #475569 !important;
      opacity: 1;
    }

    /* matSuffix verify-ok icon — keep its green */
    .verify-icon-ok {
      color: #059669 !important;
      opacity: 1;
    }

    /* Hint text */
    .mat-mdc-form-field-hint {
      color: #64748b !important;
      opacity: 1;
    }
  }

  /* Disabled checkbox — keep the check + label crisp */
  .mat-mdc-checkbox-disabled {
    opacity: 1 !important;

    .mdc-checkbox__background {
      background-color: #059669 !important;
      border-color: #059669 !important;
    }

    .mdc-checkbox__checkmark {
      color: #fff !important;
    }

    .mdc-form-field > label,
    .mat-mdc-checkbox-label,
    .mdc-label {
      color: #0f172a !important;
      opacity: 1 !important;
      font-weight: 500;
    }
  }

  /* Disabled mat-select — same treatment as inputs */
  .mat-mdc-form-field-disabled .mat-mdc-select-value-text,
  .mat-mdc-form-field-disabled .mat-mdc-select-value {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 600;
  }

  /* Disabled "toggle visibility" eye icon button */
  .mat-mdc-form-field-disabled .toggle-vis-btn {
    color: #64748b !important;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Unified Identity Verification Summary (PAN + Aadhaar + Link)
   ─── replaces the legacy pan-result-card / aadhaar-result-card /
        pan-link-box trio with a single polished panel.
   ═══════════════════════════════════════════════════════════════ */
.idv-summary {
  margin: 4px 0 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #d1fae5;
  box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
  overflow: hidden;

  &.partial {
    border-color: #fde68a;
  }
}

/* Hero strip — gradient green when both verified, amber when partial. */
.idv-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%);

  .idv-summary.partial & {
    background: linear-gradient(135deg, #b45309 0%, #d97706 60%, #f59e0b 100%);
  }

  &__ic {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgb(255 255 255 / 18%);
    color: #fff;
    font-size: 16px;
    backdrop-filter: blur(4px);
  }

  &__txt {
    flex: 1;
    min-width: 0;
  }

  &__title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
  }

  &__sub {
    margin-top: 3px;
    font-size: 11.5px;
    opacity: 0.92;
    line-height: 1.3;
  }

  &__count {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgb(255 255 255 / 22%);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    border: 1px solid rgb(255 255 255 / 30%);

    &-num {
      font-size: 16px;
    }

    &-of {
      font-size: 11px;
      opacity: 0.85;
    }
  }
}

/* Two-column body */
.idv-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #ecfdf5;

  .idv-summary.partial & {
    background: #fef3c7;
  }
}

.idv-col {
  padding: 14px 18px;
  border-right: 1px dashed rgb(5 150 105 / 25%);

  &:last-child {
    border-right: none;
  }

  &.muted {
    background: rgb(255 255 255 / 50%);
    opacity: 0.85;
  }

  &__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  &__ic {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fff;
    color: #047857;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
  }

  &__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #065f46;
  }

  &__rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  &__empty {
    font-size: 11.5px;
    color: #64748b;
    background: rgb(255 255 255 / 70%);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;

    strong {
      color: #334155;
    }
  }
}

.idv-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  fa-icon {
    font-size: 9px;
  }

  &.ok {
    background: #059669;
    color: #fff;
  }

  &.pending {
    background: #fef3c7;
    color: #92400e;
  }
}

.idv-row {
  display: flex;
  align-items: baseline;
  gap: 8px;

  &__k {
    flex-shrink: 0;
    width: 110px;
    font-size: 10.5px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  &__v {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;

    &.name {
      font-size: 14px;
      font-weight: 800;
      color: #065f46;
    }

    &.mono {
      font-family: ui-monospace, 'Roboto Mono', SFMono-Regular, monospace;
      font-size: 12px;
      color: #1f2937;
    }
  }
}

/* Footer — PAN ↔ Aadhaar link status */
.idv-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: #f0fdf4;
  border-top: 1px solid #bbf7d0;

  &__ic {
    color: #047857;
    font-size: 14px;
    flex-shrink: 0;
  }

  &__txt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
  }

  &__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    font-weight: 700;
  }

  &__value {
    font-size: 13px;
    font-weight: 800;
    color: #047857;
  }

  &__hint {
    font-size: 11px;
    color: #64748b;
    font-style: italic;
    flex-shrink: 0;
  }

  &.not-linked {
    background: #fef2f2;
    border-top-color: #fecaca;

    .idv-link__ic,
    .idv-link__value {
      color: #dc2626;
    }
  }

  &.exempt {
    background: #eff6ff;
    border-top-color: #bfdbfe;

    .idv-link__ic,
    .idv-link__value {
      color: #1d4ed8;
    }
  }
}

/* Responsive — stack columns on narrow screens */
@media (width <= 640px) {
  .idv-body {
    grid-template-columns: 1fr;
  }

  .idv-col {
    border-right: none;
    border-bottom: 1px dashed rgb(5 150 105 / 25%);

    &:last-child {
      border-bottom: none;
    }
  }

  .idv-hero {
    flex-wrap: wrap;
  }

  .idv-link {
    flex-wrap: wrap;

    &__hint {
      width: 100%;
      padding-left: 26px;
    }
  }

  .idv-row__k {
    width: 95px;
  }
}

.override-checkbox-wrapper {
  margin-bottom: 8px;
}

.risk-auto-calc-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-top: -8px;
  margin-bottom: 12px;
  border: 1px solid transparent;

  .info-icon {
    font-size: 18px !important;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .info-text strong {
    font-weight: 600;
  }

  &--low {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;

    .info-icon {
      color: #10b981;
    }
  }

  &--medium {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;

    .info-icon {
      color: #f59e0b;
    }
  }

  &--high {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;

    .info-icon {
      color: #ef4444;
    }
  }
}

.risk-rules-toggle-wrapper {
  margin-top: 4px;
  margin-bottom: 12px;

  .rules-toggle-btn {
    font-size: 13px;
    font-weight: 600;
    color: #1e6bb8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
    background: #f1f5f9;

    &:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
  }
}

.risk-rules-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}

.risk-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;

  th {
    padding: 10px 12px;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #cbd5e1;
    background: #f8fafc;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  td {
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: top;
    line-height: 1.5;
  }

  tr:last-child td {
    border-bottom: none;
  }

  .rule-row {
    transition: background 0.15s ease-in-out;

    &:hover {
      background: #f8fafc;
    }
  }

  .risk-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    width: 80px;

    &--high {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    &--medium {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    &--low {
      background: #ecfdf5;
      color: #16a34a;
      border: 1px solid #a7f3d0;
    }
  }
}

/* The name and DOB that PAN / Aadhaar are matched against, surfaced from the General tab so a
   mismatch is visible before the check runs rather than only after it fails. */
.identity-basis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 4px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.identity-basis--incomplete {
  border-color: #fdba74;
  background: #fff7ed;
}

.identity-basis__icon {
  flex: 0 0 auto;
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #1d4ed8;

  .identity-basis--incomplete & {
    color: #c2410c;
  }
}

.identity-basis__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.identity-basis__legend {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.identity-basis__pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.identity-basis__pair {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.identity-basis__k {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.identity-basis__v {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
}

.identity-basis__hint {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.45;
}

.identity-basis__warn {
  font-size: 11.5px;
  font-weight: 600;
  color: #c2410c;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════
   PAN ↔ Aadhaar premium status card
   ─── Replaces the legacy table-row treatment. Dark gradient with
        offset glow circles, large gradient icon, and a state-driven
        accent (green / red / blue / amber).
   ═══════════════════════════════════════════════════════════════ */
.pal-card {
  margin-top: 16px;
  width: 100%;
  min-height: 88px;
  padding: 14px 18px 30px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #111827, #0f172a);
  border: 1px solid rgb(255 255 255 / 8%);
  box-shadow:
    0 12px 32px rgb(0 0 0 / 35%),
    inset 0 1px 1px rgb(255 255 255 / 5%);
  font-family: Inter, 'Segoe UI', Roboto, sans-serif;

  /* Decorative glows — colors swap with the state variant */
  &::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: #2563eb;
    border-radius: 50%;
    top: -110px;
    right: -70px;
    opacity: 0.18;
    pointer-events: none;
  }

  &::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background: #22c55e;
    border-radius: 50%;
    bottom: -70px;
    left: -50px;
    opacity: 0.12;
    pointer-events: none;
  }

  &__left {
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
  }

  &__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(145deg, #2563eb, #06b6d4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    position: relative;
    box-shadow: 0 10px 20px rgb(37 99 235 / 35%);
    flex-shrink: 0;

    mat-icon {
      font-size: 26px;
      width: 26px;
      height: 26px;
    }

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      border: 1px solid rgb(255 255 255 / 20%);
    }
  }

  &__txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__small {
    font-size: 10.5px;
    color: #94a3b8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
  }

  &__title {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
  }

  &__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 11px;
    border-radius: 50px;
    background: rgb(34 197 94 / 12%);
    border: 1px solid rgb(74 222 128 / 25%);
    color: #4ade80;
    font-size: 11.5px;
    font-weight: 600;
    backdrop-filter: blur(5px);
    width: fit-content;

    mat-icon {
      font-size: 13px;
      width: 13px;
      height: 13px;
    }
  }

  &__badge {
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 0 18px rgb(34 197 94 / 45%);
    flex-shrink: 0;

    mat-icon {
      font-size: 20px;
      width: 20px;
      height: 20px;
    }
  }

  &__hint {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 10px;
    color: rgb(255 255 255 / 35%);
    font-style: italic;
    letter-spacing: 0.02em;
    z-index: 1;
  }

  /* ─── State variants ─── */
  &--ok {
    &::before {
      background: #2563eb;
    }

    &::after {
      background: #22c55e;
    }
  }

  &--fail {
    border-color: rgb(239 68 68 / 22%);

    &::before {
      background: #ef4444;
      opacity: 0.22;
    }

    &::after {
      background: #f87171;
      opacity: 0.16;
    }

    .pal-card__status {
      background: rgb(239 68 68 / 14%);
      border-color: rgb(248 113 113 / 32%);
      color: #fca5a5;
    }

    .pal-card__badge {
      background: linear-gradient(135deg, #ef4444, #b91c1c);
      box-shadow: 0 0 18px rgb(239 68 68 / 45%);
    }

    .pal-card__icon {
      background: linear-gradient(145deg, #ef4444, #f97316);
      box-shadow: 0 10px 20px rgb(239 68 68 / 35%);
    }
  }

  &--info {
    border-color: rgb(59 130 246 / 22%);

    &::before {
      background: #3b82f6;
      opacity: 0.22;
    }

    &::after {
      background: #60a5fa;
      opacity: 0.14;
    }

    .pal-card__status {
      background: rgb(59 130 246 / 14%);
      border-color: rgb(96 165 250 / 32%);
      color: #93c5fd;
    }

    .pal-card__badge {
      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
      box-shadow: 0 0 18px rgb(59 130 246 / 45%);
    }
  }

  &--pending {
    border-color: rgb(245 158 11 / 22%);

    &::before {
      background: #f59e0b;
      opacity: 0.22;
    }

    &::after {
      background: #fbbf24;
      opacity: 0.14;
    }

    .pal-card__status {
      background: rgb(245 158 11 / 14%);
      border-color: rgb(251 191 36 / 32%);
      color: #fbbf24;
    }

    .pal-card__badge {
      background: linear-gradient(135deg, #f59e0b, #b45309);
      box-shadow: 0 0 18px rgb(245 158 11 / 45%);
    }

    .pal-card__icon {
      background: linear-gradient(145deg, #f59e0b, #d97706);
      box-shadow: 0 10px 20px rgb(245 158 11 / 35%);
    }
  }
}

@media (width <= 540px) {
  .pal-card {
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 36px;

    &__hint {
      position: static;
      width: 100%;
      text-align: right;
      margin-top: 4px;
    }
  }
}