/*
 * cx-ux-components.css — Calculixy Universal UX Layer Styles
 *
 * Loaded on all calculator pages alongside shared.css and calculator.css.
 * Covers: input chrome, validation states, result animations, reset buttons.
 * All tokens from :root are respected — dark-mode safe.
 */

/* ── INPUT CHROME ──────────────────────────────────────────────── */

/* Wrapper that positions prefix/suffix relative to the input */
.cx-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cx-input-wrap input {
  flex: 1;
  min-width: 0;
}

/* Currency prefix ($) */
.cx-input-prefix,
.cx-input-suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 10px;
  background: var(--surface2, #f0f3ff);
  border: 1px solid var(--border, #dfe2f2);
  color: var(--text3, #777a9b);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display, 'Syne', sans-serif);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.cx-input-prefix {
  border-right: none;
  border-radius: var(--radius-sm, 10px) 0 0 var(--radius-sm, 10px);
}

.cx-input-suffix {
  border-left: none;
  border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
}

/* Adjust input border-radius when prefix/suffix present */
.cx-input-wrap .cx-input-prefix + input {
  border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
}

.cx-input-wrap input:has(+ .cx-input-suffix),
.cx-input-wrap input + .cx-input-suffix {
  border-radius: var(--radius-sm, 10px) 0 0 var(--radius-sm, 10px);
}

/* Contextual hint text below the input */
.cx-input-hint {
  display: block;
  font-size: 11.5px;
  color: var(--text3, #777a9b);
  line-height: 1.45;
  margin-top: 4px;
  font-weight: 400;
}

/* ── VALIDATION STATES ─────────────────────────────────────────── */

/*
 * FP-5: Error state uses a left border accent (not just text color)
 * so users with color vision deficiency can detect the error.
 * The original .input-error only added a red ring — this adds
 * spatial anchoring via the left border.
 */
.cx-input-error,
.input-error {
  border-color: var(--red, #dc2626) !important;
  border-left: 3px solid var(--red, #dc2626) !important;
  /* Shift padding to compensate for wider border */
  padding-left: calc(var(--input-pl, 12px) - 2px) !important;
  background-color: rgba(220, 38, 38, 0.04) !important;
}

.cx-input-error:focus,
.input-error:focus {
  outline-color: var(--red, #dc2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Validation message — appears below the field */
.cx-validation-msg,
.input-error-msg {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red, #dc2626);
  line-height: 1.4;
  margin-top: 5px;
  padding: 6px 10px 6px 8px;
  background: rgba(220, 38, 38, 0.06);
  border-left: 2px solid var(--red, #dc2626);
  border-radius: 0 6px 6px 0;
  animation: cx-err-slide-in 0.15s ease;
}

.cx-validation-msg::before {
  content: '✕';
  font-size: 10px;
  line-height: 1.6;
  flex-shrink: 0;
  color: var(--red, #dc2626);
}

@keyframes cx-err-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESULT REVEAL ANIMATION ───────────────────────────────────── */

/*
 * FP-2: Consistent animated reveal for all result sections.
 * Replace `el.style.display = 'block'` with CX.showResult(el).
 */
.cx-result-enter {
  opacity: 0;
  transform: translateY(6px);
}

.cx-result-visible {
  animation: cx-result-fade-in 0.25s ease forwards;
}

@keyframes cx-result-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESET BUTTON ──────────────────────────────────────────────── */

/*
 * The audit found zero "Reset" / "Start Over" buttons across all 38 calcs.
 * This is a significant UX gap — users have no clear path back to a blank
 * state without manually clearing each field.
 * Add: <button class="cx-reset-btn" onclick="CX.reset('calcId', [...], 'resultId')">
 */
.cx-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border, #dfe2f2);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--text3, #777a9b);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  -webkit-user-select: none;
}

.cx-reset-btn::before {
  content: '↺';
  font-size: 14px;
  line-height: 1;
}

.cx-reset-btn:hover {
  border-color: var(--text2, #50546a);
  color: var(--text, #09091b);
  background: var(--surface2, #f0f3ff);
}

/* Placement: in the calc-form footer, right-aligned */
.cx-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #dfe2f2);
  flex-wrap: wrap;
  gap: 8px;
}

/* ── STATE RESTORED TOAST ──────────────────────────────────────── */

/*
 * FP-3: When inputs are restored from localStorage, show a brief
 * non-intrusive notification so the user knows their data was recovered.
 */
.cx-restore-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--accent, #10b981);
  font-weight: 600;
  padding: 8px 14px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  margin-bottom: 12px;
  animation: cx-notice-slide 0.2s ease, cx-notice-fade 0.4s ease 3s forwards;
}

.cx-restore-notice::before { content: '↩'; font-size: 14px; }

@keyframes cx-notice-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cx-notice-fade {
  to { opacity: 0; pointer-events: none; }
}

/* ── MOBILE ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .cx-input-prefix,
  .cx-input-suffix {
    height: 42px;
    padding: 0 8px;
    font-size: 12px;
  }

  .cx-validation-msg,
  .input-error-msg {
    font-size: 11px;
  }

  .cx-form-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── REDUCED MOTION ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cx-result-visible,
  .cx-result-enter,
  .cx-validation-msg,
  .cx-restore-notice {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}