/* Retail v5 - ONE uniform image card for every photo (owner rule 25-10).
   Every picture sits in a fixed slot for its kind and is shown WHOLE: object-fit:contain on a neutral letterbox,
   never cropped, never stretched. Kinds:
     face      3:4   person card, popups, detection log rows, customer / staff lists, enrolment, viewer thumbnails
     still    16:9   live tiles, camera list / health pictures, full screen camera
     evidence  4:3   loss prevention evidence
   A missing picture keeps the same slot with a neutral placeholder (.v5x-ph) and, where the slot is wide enough,
   its reason ("No clear face this time"); small slots carry the reason as a tooltip / label.
   Applied on the console's existing classes, so no page changes its markup. */

:root{--v5x-ph-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a3' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='3.6'/%3E%3Cpath d='M5.5 20c.8-3.6 3.3-5.6 6.5-5.6s5.7 2 6.5 5.6'/%3E%3C/svg%3E");
 --v5x-ph-still:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='m3.5 15 4.5-4 3.5 3 3-2.5 6 4.5'/%3E%3C/svg%3E")}

/* ---------- shared slot ---------- */
.v5x-img,
.phw.face,.phi.face,.ssph,.dthumb,
#drawer.pc .pcAv,#drawer.pc .pcShot .pcShI,#drawer.pc .pcS .pcTh,#drawer.pc .pcGi,
.evr-th-img,.evr-frame,.gmodal figure,
.mh-app .mh-avatar,.mh-app .mh-profile-avatar,
.wpl .logstd tbody td .ithumb,.wpl .logstd tbody td .noimg,.wpl .bigtable .ithumb,
.gen-dot{background:var(--v5x-letterbox)!important}

/* every picture inside a slot: whole picture, centred */
.v5x-img img,
.phw img,.ssph img,.dthumb img,
#drawer.pc .pcAv img,#drawer.pc .pcShot img,#drawer.pc .pcS .pcTh img,#drawer.pc .pcGi img,
.evr-th-img img,.evr-frame>img,.gmodal figure img,
.mh-app .mh-avatar img,.mh-app .mh-profile-avatar img,
.wpl .logstd tbody td img.ithumb,.wpl .bigtable img.ithumb,
.gen-dot img{object-fit:contain!important;object-position:center!important;background:var(--v5x-letterbox)!important}

/* ---------- face 3:4 ---------- */
.ssph{width:51px!important;height:68px!important}
#drawer.pc .pcAv{width:84px!important;height:112px!important}
#drawer.pc .pcShot .pcShI{aspect-ratio:3/4!important}
#drawer.pc .pcS .pcTh{width:48px!important;height:64px!important}
.evr-th-img{width:60px!important;height:80px!important}
.gmodal figure img{aspect-ratio:3/4!important}
.mh-app .mh-avatar{width:30px!important;height:40px!important}
.mh-app .mh-profile-avatar{width:42px!important;height:56px!important}
.wpl .logstd tbody td .ithumb,.wpl .logstd tbody td .noimg,.wpl .bigtable .ithumb{width:30px!important;min-width:30px!important;height:40px!important}
@media (max-width:767px){#drawer.pc .pcAv{width:69px!important;height:92px!important}.evr-th-img{width:54px!important;height:72px!important}}
/* small fixed-size avatars (search, chips, map): square slot, rounded corners so the corners of the picture are never cut */
.phw img,.phw .phi,.phi{border-radius:6px!important}
.phw.face img,.phi.face{border-radius:8px!important}
.phw.face{border-radius:8px;overflow:hidden}

/* ---------- still 16:9 (live video included: the whole camera frame, letterboxed) ---------- */
.cam{aspect-ratio:16/9}
.cam video,.cfs-video video,.gen-v2 .genv2-vid,.gen-v2 .genv2-cam video{object-fit:contain!important;background:#0b1211!important}
.cam img{width:100%;height:100%;object-fit:contain!important;display:block}

/* ---------- placeholder: neutral, same slot, with a reason ---------- */
.v5x-ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;
 background:var(--v5x-letterbox) var(--v5x-ph-svg) center 42%/min(46%,40px) no-repeat;color:var(--v5x-ph-ink);border-radius:inherit;container-type:inline-size;text-align:center;overflow:hidden}
.v5x-ph.still{background-image:var(--v5x-ph-still)}
.v5x-ph>span{display:none;font-size:11px;line-height:1.25;padding:0 6px;margin-top:62%}
@container (min-width:90px){.v5x-ph>span{display:block}}
/* the person card "Recent sightings" slot used an emoji when empty */
#drawer.pc .pcShot .pcShI::before{content:""!important;width:46%;height:46%;background:var(--v5x-ph-svg) center/contain no-repeat;opacity:.9}