/* ==========================================================================
   Validate Finger Print modal (fp-validate)
   Tokens with light-theme fallbacks, matching the house style in enterprise.css.
   ========================================================================== */

.fp-validate__header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Countdown. Amber fill with white text fails AA, so this is amber TEXT on a tinted
   surface instead - the number stays legible and still reads as a warning. */
.fp-validate__timer {
  min-width: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--rw-warning-text, #92400e);
  background: var(--rw-warning-bg, #fef3c7);
  border: 1px solid var(--rw-warning, #F39C12);
}

/* Two weights of outline. Blue marks the one meaningful alternative action (Use Passcode);
   footer actions are neutral so they do not compete with it. Nothing here is destructive,
   so no red. Run Diagnostics is the exception - in the troubleshoot view it IS primary. */
.fp-validate__btn-outline {
  background: var(--rw-card-bg, #FFFFFF);
  color: var(--rw-primary, #0E52C1);
  border: 1px solid var(--rw-primary, #0E52C1);
  border-radius: var(--radius-md, 8px);
  min-height: 40px;
  padding: 8px 16px;
  font-weight: 600;
}
.fp-validate__btn-outline:hover {
  background: var(--rw-primary-light, #EEF3FF);
  color: var(--rw-primary, #0E52C1);
}
.fp-validate__btn-outline[disabled],
.fp-validate__btn-outline.disabled {
  color: var(--rw-text-light, #6B7280);
  border-color: var(--rw-border, #E2E5EA);
  background: var(--rw-card-bg, #FFFFFF);
  opacity: 0.6;
}

/* Neutral outline - the footer's default weight. */
.fp-validate__btn-neutral {
  background: var(--rw-card-bg, #FFFFFF);
  color: var(--rw-text, #1F2937);
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: var(--radius-md, 8px);
  min-height: 40px;
  padding: 8px 16px;
  font-weight: 600;
}
.fp-validate__btn-neutral:hover {
  background: var(--rw-surface, #f8fafc);
  color: var(--rw-text, #1F2937);
  border-color: var(--rw-text-light, #6B7280);
}
.fp-validate__btn-neutral[disabled] {
  color: var(--rw-text-light, #6B7280);
  opacity: 0.6;
}

.fp-validate__btn-primary,
.fp-validate__btn-primary:hover,
.fp-validate__btn-primary:focus {
  background: var(--rw-primary, #0E52C1);
  color: var(--rw-white, #FFFFFF);
  border: 1px solid var(--rw-primary, #0E52C1);
  border-radius: var(--radius-md, 8px);
  min-height: 40px;
  padding: 8px 16px;
  font-weight: 600;
}
.fp-validate__btn-primary:hover {
  background: var(--rw-primary-dark, #1A5AE6);
  border-color: var(--rw-primary-dark, #1A5AE6);
}

/* Icon-only close. 40px keeps the tap target honest even though the glyph is small. */
.fp-validate__close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rw-text-light, #6B7280);
  border-radius: var(--radius-md, 8px);
  font-size: 18px;
  line-height: 1;
}
.fp-validate__close:hover {
  color: var(--rw-text, #1F2937);
  background: var(--rw-surface, #f8fafc);
}
.fp-validate__close[disabled] { opacity: 0.4; }

/* Collapsed setup note - present for the operator who needs it, silent for everyone else. */
.fp-validate__disclosure {
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: var(--radius-md, 8px);
  background: var(--rw-surface, #f8fafc);
  margin-bottom: 16px;
  overflow: hidden;
}
.fp-validate__disclosure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--rw-text, #1F2937);
  text-align: left;
}
.fp-validate__disclosure-head:hover { background: var(--rw-hover-bg, #eef2f7); }
.fp-validate__disclosure-body {
  padding: 0 16px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--rw-text-light, #6B7280);
}
.fp-validate__disclosure-body strong { color: var(--rw-text, #1F2937); }

.fp-validate .btn:focus { outline: none; box-shadow: none; }
.fp-validate .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 82, 193, 0.25);
}

/* The card the capture lives in. Sized to the iframe's real content rather than the 400px it
   used to reserve, which left an empty band under the scanner on every validation. */
.fp-validate__scanner {
  width: 100%;
  max-width: 520px;
  /* Measured: the iframe document renders at 350px (24 padding + title + quality + message +
     180 frame + 24 padding). Anything under that clips the scan frame, because the iframe fills
     this box exactly. 400 leaves breathing room without reopening a large empty band. */
  height: 400px;
  margin: 0 auto;
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: var(--radius-xl, 10px);
  background: var(--rw-card-bg, #FFFFFF);
  overflow: hidden;
}

/* Fortuna renders in the page, not an iframe, so it needs the padding the iframe supplies. */
.fp-validate__scanner--fortuna {
  height: auto;
  padding: 24px 16px;
  text-align: center;
}

.fp-validate__card-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--rw-text, #1F2937);
}

.fp-validate__frame {
  margin: 0 auto 16px;
  height: 220px;
  width: 220px;
  background: var(--rw-bg, #F4F6F9);
  border: 2px dashed var(--rw-border, #E2E5EA);
  border-radius: var(--radius-xl, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-validate__frame img {
  max-height: 100%;
  max-width: 100%;
  border-radius: var(--radius-sm, 6px);
}

/* Scan quality is a STATUS, not an input. It used to be a readonly text box, which read
   as an empty field waiting to be typed into. */
.fp-validate__quality {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--rw-text-light, #6B7280);
}
.fp-validate__quality-value {
  font-weight: 600;
  color: var(--rw-text, #1F2937);
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--rw-surface, #f8fafc);
  border: 1px solid var(--rw-border, #E2E5EA);
}
.fp-validate__quality-value--empty {
  font-weight: 500;
  color: var(--rw-text-light, #6B7280);
}

.fp-validate__message {
  min-height: 20px;
  color: var(--rw-primary, #0E52C1);
  font-weight: 600;
  margin-bottom: 16px;
}

/* Validating */
.fp-validate__busy { text-align: center; padding: 48px 16px; }
.fp-validate__busy i { color: var(--rw-primary, #0E52C1); }
.fp-validate__busy h4 {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--rw-text, #1F2937);
}
.fp-validate__busy p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--rw-text-light, #6B7280);
}

/* Troubleshoot view */
.fp-validate__steps {
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: var(--radius-md, 8px);
  background: var(--rw-card-bg, #FFFFFF);
  padding: 24px;
}
.fp-validate__steps h4 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--rw-text, #1F2937);
}
.fp-validate__steps ol {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--rw-text, #1F2937);
}
.fp-validate__steps li { margin-bottom: 8px; }
.fp-validate__steps li:last-child { margin-bottom: 0; }

.fp-validate__footer-spacer { flex: 1 1 auto; }