/* ---------------------------------------------------------------------------
 * Avatar element — canonical avatar chip styling.
 *
 * Loaded globally (module.json -> global_assets). Additive: it introduces the
 * canonical `.mp-avatar` element and the `--mp-av` colour variable, which existing
 * per-module avatar markup can migrate onto over time. It does NOT restyle the
 * current `.calendar-team-option-avatar` / `.mp-owner-fixed-avatar` / `.mp-chat-avatar`
 * elements, so nothing changes visually until markup opts in.
 * ------------------------------------------------------------------------- */

/* THE GLYPH COLOUR IS A TOKEN, NOT A PER-CONSUMER PATCH.
 *
 * `--mp-av` carries a person's fill; `--mp-av-ink` is what goes ON it, and it belongs beside the
 * fill for the same reason: an avatar is one component, and a reader recognises a person by the
 * same mark on every screen.
 *
 * It exists because the base element used to declare `color:#fff` — the LIGHT-scheme value — so
 * in the dark scheme the canonical avatar rendered white initials while every other avatar disc
 * on the platform rendered #04110a. Both consumers of the canonical element had privately
 * re-declared the dark value to compensate, each with a comment saying the base defaults to
 * white. The third consumer, the Reports time table, did not, and it was the screen that showed
 * the fault. Two private copies of one fix is the fix being in the wrong place.
 *
 * Flipping the token per scheme also takes `.mp-avatar` OUT of the !important list at the foot of
 * this file, and that matters beyond tidiness: that list was overriding legitimate per-element
 * colours too. `.mp-report-av.is-none` — the deliberately hollow, muted disc for the
 * unattributed group — lost to it, so in the light scheme its em dash rendered white on a light
 * panel. Normal cascade gets that right; !important is what got it wrong.
 *
 * Fallbacks are not decoration. A var() that resolves to nothing is invalid at computed-value
 * time and `color` falls back to inherit — the page's text colour, which is the original bug
 * again. Every reference carries the literal it replaced. */
:root {
  --mp-av-ink: #04110a;
  --mp-av-ink-shadow: none;
}

.mp-avatar {
  --mp-av: var(--mp-ink-dim,#64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--mp-av);
  color: var(--mp-av-ink,#04110a);
  text-shadow: var(--mp-av-ink-shadow,none);
  font-size: 0.72rem;
  font-weight:var(--mp-fw-semibold,600);
  line-height:var(--mp-lh-none,1);
  letter-spacing:var(--mp-ls-normal,0);
  text-transform: uppercase;
  user-select: none;
}

.mp-avatar--sm { width: 1.375rem; height: 1.375rem; font-size: 0.62rem; }
.mp-avatar--lg { width: 2.25rem;  height: 2.25rem;  font-size: 0.9rem; }
.mp-avatar--xl { width: 5.5rem;   height: 5.5rem;   font-size: 2rem; font-weight:var(--mp-fw-bold,700); }

/* NO PERSON BEHIND THE DISC — the third answer, kept out of the other two.
 *
 * A filled disc with a colour reads as a decision somebody made. There are places where no such
 * decision exists yet: the colour picker on "Add user" has no record to seed from, and '' hashes
 * to a palette entry like any other seed, so the preview opened on a confident purple for a person
 * who had no colour at all. Could-not-determine is not folded into proven-true.
 *
 * The recipe is the one the modals already use for a person-less disc
 * (.mp-owner-avatar.is-unassigned, forms-controls/tasks-projects.css) rather than a fourth look —
 * this is the canonical element, so this is where it belongs. TWO OLDER EXPRESSIONS OF THE SAME
 * STATE REMAIN and are fold-in candidates when their surfaces are next touched:
 * .mp-report-av.is-none (reports.css, hollow + dashed) and the two owner-picker rules above.
 * Named here rather than left for the next reader to rediscover.
 *
 * text-shadow is cleared deliberately: --mp-av-ink-shadow exists for legibility on a saturated
 * fill, and on a muted one it only smears the glyph. */
.mp-avatar.is-unassigned {
  background: var(--mp-slate-12,rgba(148,163,184,.12));
  color: var(--mp-ink-soft,#cbd5e1);
  text-shadow: none;
  box-shadow: 0 0 0 1px var(--mp-slate-18,rgba(148,163,184,.18)) inset;
}

/* ---- Avatar colour picker (shared by Users admin + Profile) ---- */
.mp-acf-field { display: flex; flex-direction: column; gap: 8px; }
/* Boxed variant: the colour controls and a live preview sit together in one card
 * (used by the profile settings). The preview fills the remaining height so it lines
 * up with a taller neighbour. The glyph colour comes from the base element via
 * --mp-av-ink; this block only changes the geometry. */
.mp-acf-field--boxed {
  border: 1px solid var(--border, var(--mp-fill-10,rgba(255, 255, 255, 0.1)));
  border-radius: 14px;
  padding: 14px;
  gap: 10px;
}
.mp-acf-preview {
  flex: 1 1 auto;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--mp-fill-02,rgba(255,255,255,.02));
}
.mp-acf-preview .mp-avatar {
  width: 84px;
  height: 84px;
  font-size: 2rem;
  font-weight:var(--mp-fw-heavy,800);
  letter-spacing:var(--mp-ls-normal,0);
}
/* Boxed picker: keep the palette on a single row (tighter gap + slightly smaller
 * swatches) so it fits the narrower card without wrapping. */
.mp-acf-colors { display: contents; }
.mp-acf-field--boxed .mp-acf-swatches { flex-direction: column; align-items: flex-start; gap: 10px; order: 1; }
.mp-acf-field--boxed .mp-acf-colors { display: flex; flex-wrap: nowrap; gap: 6px; }
.mp-acf-field--boxed .mp-acf-swatch:not(.mp-acf-auto) { width: 22px; height: 22px; }
.mp-acf-label { font-size:var(--mp-fs-sm,12px); font-weight:var(--mp-fw-semibold,600); color: var(--muted, var(--muted)); }
.mp-acf-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-acf-swatch {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--acf, var(--mp-ink-dim,#64748b)); border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--mp-fill-12,rgba(255, 255, 255, 0.12)) inset;
  transition: transform .08s ease, box-shadow .12s ease;
}
.mp-acf-swatch:hover { transform: scale(1.08); }
.mp-acf-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--panel, var(--mp-ring-bg,#0f172a)), 0 0 0 4px var(--mp-fill-50,rgba(255, 255, 255, .5)); }
.mp-acf-swatch.is-selected { border-color: var(--mp-ink-invert,#fff); box-shadow: 0 0 0 2px var(--panel, var(--mp-ring-bg,#0f172a)), 0 0 0 4px var(--acf, var(--mp-ink-dim,#64748b)); }
.mp-acf-auto {
  width: auto; height: 24px; border-radius: 13px; padding: 0 10px 0 6px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mp-fill-05,rgba(255, 255, 255, 0.05)); color: var(--mp-ink-soft,#cbd5e1); font-size:var(--mp-fs-sm,12px); font-weight:var(--mp-fw-semibold,600);
  border: 1px solid var(--mp-fill-14,rgba(255, 255, 255, 0.14)); box-shadow: none;
}
.mp-acf-auto:hover { transform: none; background: var(--border); }
.mp-acf-auto-dot { width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--purple), var(--blue), var(--amber), var(--mp-ink-brand,#00EA5E), var(--pink), var(--mp-violet,#a855f7), var(--purple)); }
.mp-acf-auto.is-selected { border-color: var(--mp-ink-invert,#fff); color: var(--mp-ink-invert,#fff); box-shadow: 0 0 0 2px var(--panel, var(--mp-ring-bg,#0f172a)), 0 0 0 3px var(--mp-fill-55,rgba(255, 255, 255, .55)); }

/* ===== Compact team selector ===== */
.calendar-user-form-compact{
    position:relative;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    margin-left:10px!important;
    z-index:5;
}

.calendar-user-form-compact select{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    min-height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
}

.calendar-team-avatar{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:50%!important;
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:var(--mp-fs-base,13px) !important;
    line-height:var(--mp-lh-none,1) !important;
    font-weight:var(--mp-fw-black,900) !important;
    letter-spacing:var(--mp-ls-wide,0.04em) !important;
    cursor:pointer!important;
    overflow:hidden!important;
    color:#04110a!important;
    border:0!important;
    background:var(--mp-av, var(--mp-ink-dim,#64748b))!important;
    box-shadow:
        0 0 0 2px var(--mp-av-ring,rgba(2,6,23,.55)),
        0 8px 20px var(--mp-sh-35,rgba(0, 0, 0, 0.35))!important;
}

.calendar-team-avatar::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0%, var(--mp-fill-16,rgba(255, 255, 255, 0.16)) 40%, transparent 70%);
    transform:translateX(-140%);
    transition:transform .7s ease;
}

.calendar-team-avatar:hover{
    transform:translateY(-1px) scale(1.03);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--mp-av, var(--mp-ink-dim,#64748b)) 70%, var(--mp-avatar-base,#000) 30%),
        0 12px 28px var(--mp-sh-42,rgba(0,0,0,.42)),
        0 0 20px color-mix(in srgb, var(--mp-av, var(--mp-ink-dim,#64748b)) 45%, transparent)!important;
}

.calendar-team-avatar:hover::before{
    transform:translateX(140%);
}

.calendar-user-form-compact.is-open .calendar-team-avatar{
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--mp-av, var(--mp-ink-dim,#64748b)) 80%, var(--mp-ink-invert,#fff) 20%),
        0 16px 34px var(--mp-sh-45,rgba(0, 0, 0, 0.45)),
        0 0 26px color-mix(in srgb, var(--mp-av, var(--mp-ink-dim,#64748b)) 50%, transparent)!important;
}

.calendar-team-menu{
    position:absolute!important;
    right:0!important;
    top:calc(100% + 8px)!important;
    width:min(430px, calc(100vw - 40px))!important;
    max-height:320px!important;
    overflow:auto!important;
    padding:6px!important;
    border-radius:5px!important;
    border:1px solid var(--mp-slate-18,rgba(148, 163, 184, 0.18))!important;
    background: linear-gradient(var(--mp-panel-98,rgba(15, 23, 42, 0.98)), var(--mp-panel-96,rgba(2, 6, 23, 0.96)));
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:
        0 18px 48px var(--mp-sh-45,rgba(0, 0, 0, 0.45)),
        inset 0 1px 0 var(--mp-fill-04,rgba(255, 255, 255, 0.04))!important;
    z-index:1000!important;
}

.calendar-team-option{
    width:100%!important;
    min-height:48px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 20px!important;
    align-items:center!important;
    gap:10px!important;
    padding:8px 10px!important;
    border:0!important;
    border-radius:5px!important;
    background:transparent!important;
    color:var(--mp-ink-item,#dbeafe)!important;
    text-align:left!important;
    cursor:pointer!important;
    font-family:inherit!important;
}

.calendar-team-option:hover,
.calendar-team-option.is-selected{
    background:var(--mp-hl-10,rgba(0, 234, 94, 0.1))!important;
    color:var(--mp-ink-invert,#fff)!important;
}

.calendar-team-option-avatar{
    width:34px!important;
    height:34px!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    /* Identical colour recipe to .mpdg-avatar so a person's calendar avatar
       matches their owner avatar in the Projects/Tasks grids. */
    background:color-mix(in srgb, var(--mp-av, var(--mp-ink-dim,#64748b)) 88%, var(--mp-avatar-base,#000) 12%)!important;
    border:0!important;
    box-shadow:0 0 0 2px var(--mp-av-ring,rgba(2,6,23,.55))!important;
    color:#04110a!important;
    font-size:var(--mp-fs-xs,11px) !important;
    font-weight:var(--mp-fw-black,900) !important;
}

.calendar-team-option-text{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
}

.calendar-team-option-text strong,
.calendar-team-option-text small{
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
}

.calendar-team-option-text strong{
    font-size:var(--mp-fs-base,13px) !important;
    color:var(--text)!important;
}

.calendar-team-option-text small{
    font-size:var(--mp-fs-xs,11px) !important;
    color:var(--muted)!important;
}

.calendar-team-option-check{
    opacity:0;
    color:var(--mp-ink-brand,#00EA5E)!important;
    font-weight:var(--mp-fw-black,900) !important;
}

.calendar-team-option.is-selected .calendar-team-option-check{
    opacity:1;
}

@media(max-width:900px){
    .calendar-team-menu{
        right:-8px!important;
        width:min(360px, calc(100vw - 28px))!important;
    }
}

.mp-chat-input-mention-avatar, .mp-chat-mention-avatar, .mp-chat-avatar { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--mp-hl-18,rgba(0, 234, 94, 0.18)); color: var(--green,var(--mp-ink-brand,#00EA5E)); font-size:var(--mp-fs-2xs,10px); font-weight:var(--mp-fw-black,900); line-height:var(--mp-lh-none,1); }
/* 1.3.9 — Light-scheme avatar initials: white across the board, plus a hairline shadow for
   legibility on lighter per-person avatar colours. This is scoped to html[data-mp-scheme="light"]
   only, so the dark scheme keeps its existing #04110a / #fff glyphs byte-for-byte. !important is
   required because two of the per-avatar colour rules (.calendar-team-avatar,
   .calendar-team-option-avatar) set color:#04110a!important; the light selector's higher
   specificity + !important wins. Covers every person-avatar circle: canonical, grid, session,
   created-by, the owner/assignee + follower selector chips and their dropdown options,
   calendar trigger + option, the saved-views charm avatar, and the colour-picker preview.
   1.4.4 — .mp-sv-charm--av joined the list: it was the last person-avatar circle on the
   platform still rendering a dark glyph in the light scheme, because it is hand-rolled
   markup rather than .mp-avatar. The list is the contract until that markup migrates.
   1.5.3 — the three chat person-avatar circles joined it. .mp-chat-avatar and
   .mp-chat-mention-avatar were only covered by accident, via the .calendar-team-option-avatar
   class their markup piggybacks on; .mp-chat-input-mention-avatar (the composer mention
   chip) was covered by nothing and kept its dark #04110a glyph in the light scheme. Naming
   all three makes the coverage intentional and survives chat dropping the calendar class.

   1.5.5 — .mp-avatar and .mp-acf-preview .mp-avatar LEFT this list. They take both schemes from
   --mp-av-ink / --mp-av-ink-shadow instead, which is what this list is a manual substitute for.
   The list has now been forgotten twice (1.4.4, 1.5.3), and it could only ever be forgotten:
   every new avatar circle has to be remembered into it by hand, and nothing fails when it is
   not. A variable is remembered by the element that consumes it.

   It is also not free. !important beats a per-element colour that is deliberate, not accidental:
   .mp-report-av.is-none is hollow and muted on purpose, and while .mp-avatar sat in this list its
   em dash rendered WHITE on a light panel. Every selector still here carries that risk.

   So what remains is a MIGRATION LIST, not a contract: fourteen circles whose colour is a literal
   in another module's stylesheet. Each one leaves this list when its own rule adopts
   --mp-av-ink. Do not add to it — give the new circle the token. */
html[data-mp-scheme="light"] {
    --mp-av-ink: #fff;
    --mp-av-ink-shadow: 0 1px 1.5px rgba(0, 0, 0, .35);
}

html[data-mp-scheme="light"] .mpdg-avatar,
html[data-mp-scheme="light"] .mp-sess-avatar,
html[data-mp-scheme="light"] .mp-created-by-avatar,
html[data-mp-scheme="light"] .mp-owner-avatar,
html[data-mp-scheme="light"] .mp-owner-fixed-avatar,
html[data-mp-scheme="light"] .mp-owner-option-avatar,
html[data-mp-scheme="light"] .mp-follower-avatar,
html[data-mp-scheme="light"] .mp-followers-option-avatar,
html[data-mp-scheme="light"] .calendar-team-avatar,
html[data-mp-scheme="light"] .calendar-team-option-avatar,
html[data-mp-scheme="light"] .mp-sv-charm--av,
html[data-mp-scheme="light"] .mp-chat-avatar,
html[data-mp-scheme="light"] .mp-chat-mention-avatar,
html[data-mp-scheme="light"] .mp-chat-input-mention-avatar {
    color: #fff !important;
    text-shadow: 0 1px 1.5px rgba(0, 0, 0, .35) !important;
}