/*
 * Profile photo display (AS-PP-10 / PRD / oblong-thumb hotfix 2026-08-04)
 *
 * Canonical stored file: 2:3 portrait (800×1200).
 * UI avatars (header, lists, circular thumbs): force 1:1 crop via object-fit.
 * Digital ID card and HR match/compare frames keep explicit 2:3 containers
 * (do not add those surfaces to the selectors below).
 *
 * Root cause of oval / oblong thumbs:
 * 1) Global `img { height: auto }` + border-radius:50% follows the 2:3 intrinsic box
 * 2) ETLaR `.avatar > img { width:100% }` without height → tall oval in a 38px circle
 * 3) Some shells (header-full-page) never loaded this stylesheet
 */

/* ------------------------------------------------------------------ */
/* Shared crop language for every known thumb class                    */
/* ------------------------------------------------------------------ */
img.user-profile-image,
img.user-image,
img.employee-profile-image,
img.profile-pic,
img.profile-image,
img.avatar-img,
img.emplist-img,
img.celebrants-pic,
img.pp-avatar-crop,
img.img-circle.user-profile-image,
.avatar > img,
.table-avatar .avatar img,
.dw-user-box .u-img img,
img.img-circle[src*="/main/assets/images/users/"]:not([src*="/staging/"]),
img.rounded-circle[src*="/main/assets/images/users/"]:not([src*="/staging/"]),
img.profile-pic[src*="/main/assets/images/users/"]:not([src*="/staging/"]),
img.user-image[src*="/main/assets/images/users/"]:not([src*="/staging/"]) {
  object-fit: cover !important;
  object-position: center 20% !important;
}

/* ------------------------------------------------------------------ */
/* Fixed square parents (ETLaR timekeeper / HRIS Luma .avatar)         */
/* ------------------------------------------------------------------ */
.avatar {
  overflow: hidden !important;
}

.avatar > img,
.avatar img.avatar-img,
.avatar img.employee-profile-image,
.avatar img.user-profile-image,
.avatar img.emplist-img,
.avatar img.pp-avatar-crop,
.table-avatar .avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  aspect-ratio: unset !important;
}

/* ------------------------------------------------------------------ */
/* Standalone circular thumbs (navbars / sidebars without .avatar)     */
/* Invent a square from the used width; do not keep 2:3 intrinsic box  */
/* ------------------------------------------------------------------ */
img.user-profile-image:not(.avatar-img),
img.user-image,
img.profile-pic,
img.profile-image,
img.employee-profile-image.img-circle,
img.img-circle.user-profile-image,
img.pp-avatar-crop:not(.avatar-img),
img.img-circle[src*="/main/assets/images/users/"]:not([src*="/staging/"]),
img.rounded-circle[src*="/main/assets/images/users/"]:not([src*="/staging/"]):not(.avatar-img) {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 50% !important;
}

/* ------------------------------------------------------------------ */
/* ETLaR profile dropdown large preview (.u-img is 80px wide)          */
/* ------------------------------------------------------------------ */
.dw-user-box .u-img {
  width: 80px !important;
  height: 80px !important;
  overflow: hidden !important;
  border-radius: 5px !important;
}

.dw-user-box .u-img img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  border-radius: 5px !important;
  object-fit: cover !important;
  object-position: center 20% !important;
}