/* media.css — billed-motoren (js/media.js, 8/10-2026): profilbilleder (avatarer) og "Profilbillede"-dialogen. */

/* Avatar: initialer bagved, billedet ovenpå. Fejler billedet, fjerner media.js det, så initialerne ses. */
.mi-av {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    border-radius: 50%; overflow: hidden; vertical-align: middle;
    color: #fff; font-weight: 700; letter-spacing: .02em; line-height: 1;
    user-select: none; -webkit-user-select: none;
}
.mi-av-ini { pointer-events: none; }
.mi-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-av--klik { cursor: pointer; }
.mi-av--klik:hover { box-shadow: 0 0 0 2px var(--accent); }

/* Sidebar + Mere-arket: avataren erstatter person-ikonet */
.sidebar-userinfo .mi-av { margin-right: 2px; }
.mobile-more-user .mi-av { margin-right: 2px; }

/* Accounts (navnecellen) og Hvem er på arbejde (navnet) */
/* Accounts: på desktop er navnecellen en kolonne (navn, rolle, deaktiveret) — avataren står til venstre for den;
   under 1180 px er cellen en række, og avataren står bare først (app.css .account-cell-konto). */
.account-cell-konto:has(> .mi-av) { position: relative; padding-left: 38px; min-height: 30px; justify-content: center; }
.account-cell-konto > .mi-av { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 1180px) {
    .account-cell-konto:has(> .mi-av) { padding-left: 0; min-height: 0; }
    .account-cell-konto > .mi-av { position: static; transform: none; }
}
.pr-pn .mi-av { margin-right: 7px; vertical-align: -6px; }

/* "Profilbillede"-dialogen */
.mi-avd { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 2px 2px; border-radius: 12px; transition: background .15s, box-shadow .15s; }
.mi-avd.mi-drop { background: rgba(217,72,44,.08); box-shadow: inset 0 0 0 2px var(--accent); }
.mi-avd-preview .mi-av { box-shadow: 0 0 0 1px var(--rule); }
.mi-avd-knapper { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mi-avd-knapper .btn { font-size: 13px; }
.mi-avd-hint { font-size: 12px; color: var(--cream-mute); text-align: center; }
.mi-avd-status { min-height: 18px; font-size: 12.5px; color: var(--cream-mute); text-align: center; }
.mi-avd-status.mi-fejl { color: var(--accent-hot, #ff6b6b); }