/* v21: employee photos and account avatars */
.avatarSmall{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 32px;background:#dce8ef;border:1px solid #c9dbe5;display:inline-grid;place-items:center;font-size:13px;color:#54717f;font-weight:700}
.avatarFallback{background:#dfeef6;color:#597583}
.accountMenuToggle .avatarSmall{margin-right:2px}
.accountMenuToggle{gap:7px!important}
.accountMenuPanel{min-width:190px}
.staffAvatar{width:37px;height:37px;border-radius:50%;object-fit:cover;background:#dce8ef;border:1px solid #d0e0e8;flex:0 0 37px}
.staffNameCell{display:flex;gap:11px;align-items:center}
.staffPhotoField{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid #dce8ef;background:#f3f9fc;padding:18px;border-radius:12px}
.staffPhotoField label{display:flex;flex-direction:column;gap:6px;color:#435965;font-weight:600;font-size:13px}
.staffPhotoField input[type=file]{font-size:13px;max-width:310px}
.staffPhotoNote{color:#7c8d94;font-size:12px;line-height:1.45}
.avatarLarge{display:block;width:118px;height:118px;border-radius:50%;border:2px solid #d0e3ec;object-fit:cover;margin:0 auto}
.avatarLarge.avatarEmpty{display:grid;place-items:center;background:#dceef6;color:#557482;font-size:44px;font-weight:600}
.photoMain{display:flex;align-items:center;justify-content:center;padding:36px 18px}
.photoCard{width:min(490px,100%);border:1px solid #dce8ef;border-radius:18px;box-shadow:0 15px 38px #3d5d6a12;padding:28px 30px}
.photoCard h1{text-align:center;font-size:25px;margin:0 0 23px}
.photoCenter{margin-bottom:24px}
.photoLabel{display:block;color:#49616e;font-size:13px;font-weight:650;margin:0 0 11px}
.photoCard input[type=file]{display:block;width:100%;font-size:13px;padding:13px;border-radius:10px;border:1px solid #d5e4ec}
.photoActions{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:25px;flex-wrap:wrap}
.photoDelete{background:transparent;border:1px solid #dfccd0;color:#a14f59;padding:12px 17px;border-radius:10px}
.photoBack{color:#526a78;text-decoration:none;padding:11px 16px;border:1px solid #d7e5ec;border-radius:10px}
.staffBrand{display:flex;align-items:center;justify-content:center;width:146px;height:66px;background:#12181a;border-radius:12px;padding:8px}
.staffBrand img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:650px){.photoCard{padding:23px 18px}.staffPhotoField{padding:14px}}

/* v22: unified, custom photo picker and MEZOLA buttons */
.staffPhotoUpload{display:flex;flex-direction:column;gap:9px;flex:1 1 290px;min-width:0}
.staffPhotoTitle{font-size:13px;font-weight:650;color:#435965}
.photoUploadRow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;max-width:100%;border:1px solid #dce8ef;border-radius:11px;padding:10px 12px;min-height:54px}
.photoFileInput{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%);overflow:hidden}
.photoPickButton{display:inline-flex!important;align-items:center;justify-content:center;min-height:38px;border:1px solid #a9c4d0;border-radius:9px;background:#e8f2f7;color:#345869;padding:9px 16px;font-weight:650;font-size:13px;line-height:1.25;cursor:pointer;text-align:center;flex:none;transition:background .15s,border-color .15s}
.photoPickButton:hover{background:#daeaf2;border-color:#83aeba}
.photoFileInput:focus-visible+.photoPickButton{outline:3px solid #8fb8cb;outline-offset:3px}
.photoFileName{font-size:13px;font-weight:450;color:#778c95;overflow-wrap:anywhere;min-width:0;flex:1}
.photoFileName.hasFile{color:#355565;font-weight:550}
.photoSave{border:0;border-radius:10px;background:#4a6776;color:white;font:inherit;font-size:14px;font-weight:650;min-height:43px;padding:11px 23px;box-shadow:0 3px 8px rgba(30,54,67,.11);cursor:pointer}
.photoSave:hover{background:#395666}
.photoSave:focus-visible,.photoDelete:focus-visible{outline:3px solid #8fb8cb;outline-offset:3px}
.photoDelete{background:transparent;border:1px solid #dcbac0;color:#994c56;border-radius:10px;min-height:43px;padding:11px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.photoDelete:hover{background:#f8edf0}
.photoCard .photoUploadRow{width:100%}
.photoCard .photoPickButton{font-weight:650}
@media(max-width:530px){.photoUploadRow{gap:8px}.photoFileName{flex-basis:100%}}