/* ─────────────────────────────────────────────────────────────────────────
 * IPSYSTEM v1.19 — Avatar component styles
 * ─────────────────────────────────────────────────────────────────────────
 * Two parts:
 *   1. .ipsys-av — inline display (lists, tables, topbar) — image OR initials
 *   2. .ipsys-av-upload — form widget with preview + pick/remove buttons
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ─── Inline avatar (image or initials circle) ─────────────────────────── */
.ipsys-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  vertical-align: middle;
  user-select: none;
  background: #e9ecef;
}
.ipsys-av-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ipsys-av-initials {
  color: #fff;
  font-weight: 600;
  letter-spacing: .5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  text-transform: uppercase;
}

/* ─── Upload widget ────────────────────────────────────────────────────── */
.ipsys-av-upload {
  display: block;
  margin: 0 0 16px;
}
.ipsys-av-label {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  margin: 0 0 8px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ipsys-av-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.ipsys-av-preview {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: #e9ecef;
  flex: 0 0 auto;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ipsys-av-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.ipsys-av-img-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ipsys-av-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
}
.ipsys-av-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.ipsys-av-preview:hover .ipsys-av-overlay { opacity: 1; }

.ipsys-av-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding-top: 4px;
}
.ipsys-av-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #e9ebec;
  background: #fff;
  color: #495057;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1.4;
}
.ipsys-av-btn i { font-size: 15px; line-height: 1; }
.ipsys-av-btn:hover  { background: #f5f6f8; border-color: #d4d7dc; }
.ipsys-av-btn:focus  { outline: 2px solid rgba(64, 81, 137, .25); outline-offset: 1px; }
.ipsys-av-btn-pick:hover   { color: #405189; border-color: #405189; }
.ipsys-av-btn-remove       { color: #dd4b39; }
.ipsys-av-btn-remove:hover { color: #fff; background: #dd4b39; border-color: #dd4b39; }

.ipsys-av-hint {
  font-size: 11px;
  color: #878a99;
  margin-top: 4px;
}

/* RTL — flip flex direction so preview stays on the right */
[dir="rtl"] .ipsys-av-row { flex-direction: row-reverse; }
[dir="rtl"] .ipsys-av-controls { align-items: flex-end; }

/* ─── v1.6.10 — Minimal mode ───────────────────────────────────────────
   Used by Client / Associate forms to show ONLY the clickable avatar circle.
   No "Profile Photo" heading, no "Upload Photo" / "Remove" buttons, no
   "JPG, PNG..." hint. Clicking the circle still opens the native file
   picker (existing JS), and the camera-icon overlay still appears on hover.

   File input remains in the DOM (the JS triggers it programmatically) but
   never visually rendered — its inline style="display:none" already handles
   that, the rules here just collapse the now-empty .ipsys-av-controls box
   and center the preview. */
.ipsys-av-upload-minimal .ipsys-av-label,
.ipsys-av-upload-minimal .ipsys-av-btn,
.ipsys-av-upload-minimal .ipsys-av-hint { display: none; }
.ipsys-av-upload-minimal .ipsys-av-row { justify-content: center; }
.ipsys-av-upload-minimal .ipsys-av-controls { width: 0; flex: 0 0 auto; padding: 0; margin: 0; }

/* ─── v1.6.11 — Preview mode (clickable avatar + live form data) ────────
   Same hover-to-upload behaviour as minimal mode, but the area to the
   right of the avatar shows a live business-card-style summary that
   updates as the user fills the form. */
.ipsys-av-upload-preview .ipsys-av-label,
.ipsys-av-upload-preview .ipsys-av-btn,
.ipsys-av-upload-preview .ipsys-av-hint { display: none !important; }
.ipsys-av-upload-preview .ipsys-av-row {
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
}
.ipsys-av-upload-preview .ipsys-av-controls {
  /* Keep file/hidden inputs in DOM (the JS click handler triggers them
     programmatically), but collapse so they don't take horizontal space. */
  width: 0; flex: 0 0 0; padding: 0; margin: 0; position: absolute;
}

.ipsys-av-live {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
}
.ipsys-av-live-name {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipsys-av-live-name.is-empty {
  color: #adb5bd;
  font-weight: 500;
  font-style: italic;
}
.ipsys-av-live-line {
  font-size: 13px;
  color: #495057;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.ipsys-av-live-line > i {
  font-size: 14px;
  color: #6c757d;
  flex-shrink: 0;
}
.ipsys-av-live-line > span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ipsys-av-live-line.is-empty > span {
  color: #adb5bd;
  font-style: italic;
}

/* Also strengthen the v1.6.10 minimal hide rules with !important so a
   browser-cached older avatar-upload.css can't override them after this
   file lands (defensive — should never matter once cache-bust takes). */
.ipsys-av-upload-minimal .ipsys-av-label,
.ipsys-av-upload-minimal .ipsys-av-btn,
.ipsys-av-upload-minimal .ipsys-av-hint { display: none !important; }

/* v2.1 — in-app cropper */
.av-crop-bg{position:fixed;inset:0;z-index:20000;background:rgba(15,23,42,.55);display:grid;place-items:center;padding:16px;animation:avcIn .15s ease}
@keyframes avcIn{from{opacity:0}to{opacity:1}}
.av-crop{background:#fff;border-radius:16px;width:360px;max-width:100%;box-shadow:0 24px 60px rgba(15,23,42,.35);padding:18px 18px 16px;font-family:inherit}
.av-crop-hd b{display:block;font-size:16px;color:#1e2a4a}.av-crop-hd small{display:block;font-size:12px;color:#878a99;margin-top:2px}
.av-crop-stage{position:relative;width:280px;height:280px;margin:14px auto 12px;border-radius:14px;overflow:hidden;cursor:grab;touch-action:none;user-select:none;
  background:#fff;background-image:linear-gradient(45deg,#f1f3f7 25%,transparent 25%),linear-gradient(-45deg,#f1f3f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f3f7 75%),linear-gradient(-45deg,transparent 75%,#f1f3f7 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.av-crop-stage.drag{cursor:grabbing}
.av-crop-stage img{position:absolute;left:50%;top:50%;max-width:none;pointer-events:none}
.av-crop-ring{position:absolute;inset:0;border-radius:14px;pointer-events:none;box-shadow:inset 0 0 0 9999px rgba(15,23,42,.45);-webkit-mask:radial-gradient(circle 140px at 50% 50%,transparent 139px,#000 140px);mask:radial-gradient(circle 140px at 50% 50%,transparent 139px,#000 140px)}
.av-crop-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.95)}
.av-crop-zoom{display:flex;align-items:center;gap:10px;padding:0 6px;color:#878a99;font-weight:700}
.av-crop-zoom input{flex:1;accent-color:#405189}
.av-crop-quick{display:flex;gap:6px;justify-content:center;margin:12px 0 4px;flex-wrap:wrap}
.av-crop-quick button{border:1px solid #e3e6f0;background:#f7f8fb;border-radius:99px;padding:5px 12px;font-size:12px;font-weight:600;color:#405189;cursor:pointer}
.av-crop-quick button:hover{background:#eef1fb}
.av-crop-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.av-crop-ft button{border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid #e3e6f0;background:#fff;color:#495057}
.av-crop-ft .av-crop-ok{background:#405189;border-color:#405189;color:#fff}
.av-crop-ft button:focus-visible,.av-crop-quick button:focus-visible{outline:2px solid #405189;outline-offset:2px}