.input.error { border-color:var(--red); }
.input-sm { padding:.5rem .8rem; font-size:.84rem; }

.input-row { position:relative; }
.input-row .input { padding-right:2.75rem; }
.input-row-icon {
  position:absolute; right:.85rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); cursor:pointer; font-size:.95rem; transition:color var(--t1);
}
.input-row-icon:hover { color:var(--text-1); }

.field { display:flex; flex-direction:column; gap:.35rem; }
.field-label { font-size:.78rem; font-weight:600; color:var(--text-2); letter-spacing:.04em; text-transform:uppercase; }
.field-hint  { font-size:.73rem; color:var(--text-3); }
.field-err   { font-size:.73rem; color:var(--red); }

/* Search input */
.search-wrap { position:relative; }
.search-icon { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:.9rem; pointer-events:none; }
.search-input {
  width:100%; background:var(--hover); border:1.5px solid transparent;
  border-radius:var(--full); padding:.52rem .85rem .52rem 2.2rem;
  font-size:.875rem; color:var(--text-1);
  transition:all var(--t2);
}
.search-input::placeholder { color:var(--text-3); }
.search-input:focus { background:var(--card); border-color:var(--yellow); box-shadow:0 0 0 3px rgba(47,128,237,.1); }

/* ── Avatar ──────────────────────────────────────────────────── */
.av {
  border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--card); display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--yellow); text-transform:uppercase;
}
.av img { width:100%; height:100%; object-fit:cover; }
/* The admin panel asks for .av-xs, which was never defined anywhere - so admin
   avatars had no size at all and one big uploaded image stretched the tables. */
.av-xs { width:26px; height:26px; font-size:.6rem; }
.av-24 { width:24px; height:24px; font-size:.58rem; }