/* Field-state cues. Defined here (not as Tailwind arbitrary values) so they
   don't get clobbered by Tailwind's focus-ring composition. */

.field-invalid {
  border-color: rgb(248 113 113); /* red-400 */
}
.field-invalid:focus {
  border-color: rgb(239 68 68); /* red-500 */
  --tw-ring-color: rgb(239 68 68 / 0.35);
}

/* Emerald left accent. Border widens by 2px and padding trims by 2px so the
   text doesn't shift horizontally compared to untouched siblings. */
.field-valid {
  border-left-width: 3px;
  border-left-color: rgb(16 185 129); /* emerald-500 */
  padding-left: 10px;
}

/* Row-flash highlight after a successful add. */
@keyframes row-flash {
  0%   { background-color: rgb(99 102 241 / 0.22); } /* indigo-500 @ 22% */
  100% { background-color: transparent; }
}
.row-flash {
  animation: row-flash 1s ease-out;
}

/* Stop iOS Safari from auto-zooming on input focus. Triggers whenever the
   focused input's computed font-size is < 16px; our text-sm inputs are 14px.
   Bump to 16px on phones only — desktop keeps the smaller scale.
   !important because Tailwind Play CDN injects utility styles at runtime,
   and even though our selector has higher specificity, the cascade order
   from the runtime style block isn't guaranteed across browsers. */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Suppress WebKit's native type=search cancel button; we render our own. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Keep autofilled inputs visually identical to typed ones in the dark theme.
   The 100px inset shadow is the standard trick to repaint the input interior. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: rgb(241 245 249); /* slate-100 */
  -webkit-box-shadow: 0 0 0 100px rgb(2 6 23) inset; /* slate-950 */
  caret-color: rgb(241 245 249);
  transition: background-color 9999s ease-in-out 0s;
}

/* Respect prefers-reduced-motion: cut all transitions/animations to instant. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Empty-state well: transparent fill with a dashed rounded outline drawn
   via inline-SVG background-image (gives us control over dash length/gap
   that border-dashed can't). */
.empty-well {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'%3E%3Crect width='100%25' height='100%25' rx='12' ry='12' stroke='%23334155' stroke-width='2' stroke-dasharray='8 10' /%3E%3C/svg%3E");
  border-radius: 12px;
}