.profile-photo-button {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #e8f1f5;
  cursor: pointer;
}

.profile-photo-button img,
.profile-photo-button .profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
}

.profile-photo-button span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px;
  background: rgba(14, 37, 64, .82);
  color: #fff;
  font-size: 8px;
}

.profile-file-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* ID-based vacation calendar and approval reasons. */
.vacation-mini-calendar{margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff)}
.vacation-calendar-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;margin-bottom:12px}.vacation-calendar-head h3{margin:0;text-align:center;font:700 15px Manrope,sans-serif}.vacation-calendar-head button{height:40px;border:1px solid var(--line);border-radius:9px;background:var(--surface-raised,#f4f8fa);color:var(--ink);font-size:24px;cursor:pointer}
.vacation-weekdays,.vacation-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.vacation-weekdays{margin-bottom:5px;text-align:center;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}
.vacation-day{min-width:0;min-height:58px;padding:6px 3px;border:1px solid transparent;border-radius:9px;background:var(--surface-raised,#f5f9fa);color:var(--ink);cursor:pointer;text-align:center}.vacation-day b,.vacation-day small{display:block}.vacation-day small{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.vacation-day.reserved{border-color:#3d9b91;background:#dff6ef;color:#174b45}.vacation-day.pending{border-color:#d9a22f;background:#fff4cd;color:#6f4c08}.vacation-day.selected{outline:2px solid var(--personal-accent,#2474d5);outline-offset:1px}.vacation-day.empty{background:transparent}.vacation-day:disabled{cursor:default;opacity:.55}
.vacation-calendar-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;color:var(--muted);font-size:10px}.vacation-calendar-legend span{display:flex;align-items:center;gap:5px}.vacation-calendar-legend i{width:10px;height:10px;border-radius:3px}.vacation-calendar-legend .approved{background:#71c8b5}.vacation-calendar-legend .pending{background:#efc35d}.vacation-calendar-legend .selected{background:var(--personal-accent,#2474d5)}
.vacation-replacement-note{margin:0;padding:10px 12px;border-radius:9px;background:#fff4cd;color:#6f4c08}.vacation-approval-row{align-items:flex-start}.vacation-approval-row>div{flex:1;min-width:0}.vacation-approval-row ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:11px;line-height:1.5}.vacation-removal-form{display:grid;gap:12px;margin:18px 0;padding:16px;border:1px solid #d78484;border-radius:12px;background:#fff4f4}.vacation-removal-form h3{margin:0}.vacation-removal-form label{display:grid;gap:5px;font-size:11px;font-weight:700}.vacation-removal-form input{height:42px;border:1px solid var(--line);border-radius:8px;padding:0 11px}
html:is([data-theme=dark],[data-color-scheme=dark]) .vacation-mini-calendar{background:var(--surface);border-color:var(--line)}html:is([data-theme=dark],[data-color-scheme=dark]) .vacation-day{background:var(--surface-raised);color:var(--ink)}html:is([data-theme=dark],[data-color-scheme=dark]) .vacation-day.reserved{background:#244a48;color:#dffbf5;border-color:#5aa99e}html:is([data-theme=dark],[data-color-scheme=dark]) .vacation-day.pending{background:#51452b;color:#ffe6a7;border-color:#a98b48}html:is([data-theme=dark],[data-color-scheme=dark]) .vacation-replacement-note{background:#51452b;color:#ffe6a7}html:is([data-theme=dark],[data-color-scheme=dark]) .vacation-removal-form{background:#412f36;border-color:#98616d}
@media(max-width:520px){.vacation-mini-calendar{margin-inline:-4px;padding:10px}.vacation-weekdays,.vacation-calendar-grid{gap:3px}.vacation-day{min-height:48px;padding:4px 2px}.vacation-day small{font-size:7px}.vacation-approval-row{flex-wrap:wrap}.vacation-approval-row>div{flex-basis:100%}}
.vacation-approval-row.notification-target{outline:3px solid #1686ff;outline-offset:3px;background:color-mix(in srgb,#1686ff 10%,var(--surface,#fff));}