/* Entitlements page (mw-et-*) — command-center look over one full-width MwDataGrid:
   a live KPI strip (ticket lifecycle, handout fulfilment, compensation totals) above the
   people grid, avatar person cells, and the amber bulk select bar. Styled on MudBlazor
   palette variables so both themes work; accent colors mirror the mockup
   (docs/mockups/entitlements-command-center.html · variant 1). */

.mw-et-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
    /* NOTE: Same dense-appbar height math as the Post Office page (mw-po-layout) — the app
       uses a DENSE MudAppBar, so MudMainContent's padding-top is appbar*0.75; subtract that instead
       of the full appbar to fill exactly to the viewport bottom. */
    height: calc(100vh - var(--mud-appbar-height) + var(--mud-appbar-height) / 4);
}

.mw-et-grid {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* NOTE: The process-bar row for the watched bulk runs (mail send, ticket issuance). flex:none so it costs
   exactly its own height and .mw-et-grid keeps absorbing the rest of the column. The bar's problems panel
   floats over the grid rather than pushing it down, so no extra room is reserved for it here. */
.mw-et-progress {
    flex: none;
    min-width: 0;
}

/* ── KPI strip — corner-glow tiles (edge-glow surface primitive from the mockup:
      a corner-anchored radial rail color bleeding into a hairline border) ──────── */

.mw-et-kpi {
    --rail: transparent;
    position: relative;
    padding: 13px 16px 12px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--rail) 80%, transparent) 0%,
            color-mix(in srgb, var(--rail) 45%, transparent) 40%,
            transparent 72%) border-box,
        linear-gradient(var(--mud-palette-lines-default), var(--mud-palette-lines-default)) border-box;
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--rail) 65%, transparent);
    min-width: 0;
}

.mw-et-kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.mw-et-kpi-value small {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-left: 2px;
}

.mw-et-kpi--live .mw-et-kpi-value {
    color: var(--mud-palette-success);
}

.mw-et-kpi-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

/* ── Statusband collapse/expand — the band is one click target; collapsed it is ONE slim
      line (stacked ticket-status bar + core counts); expanding adds the six info cards
      below (docs/mockups/entitlements-stats-redesign.html · variant Ⅰ·1). ───────────── */

.mw-et-kpistrip {
    position: relative;
    flex: none;
    cursor: pointer;
    padding-right: 34px;
}

/* Accordion-style chevron pinned top-right beside the collapsed line; points down =
   "there is more", flips up while expanded. */
.mw-et-kpistrip-chevron {
    position: absolute;
    right: 0;
    top: 7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    transition: rotate 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

.mw-et-kpistrip:hover .mw-et-kpistrip-chevron {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-inputs);
}

.mw-et-kpistrip--expanded .mw-et-kpistrip-chevron {
    rotate: 180deg;
}

/* The collapsed band line — a slim kpi surface holding everything in one row. */
.mw-et-sb {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    padding: 6px 14px;
    min-height: 40px;
}

.mw-et-sb-seg {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 300px;
    min-width: 230px;
}

.mw-et-sb-bar {
    display: flex;
    flex: 1;
    height: 12px;
    gap: 2px;
    min-width: 80px;
}

.mw-et-sb-bar i {
    border-radius: 3px;
    min-width: 3px;
    flex-basis: 0;
}

.mw-et-sb-bar-rest,
.mw-et-sb-meter-rest {
    background: color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
}

.mw-et-sb-cnt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.mw-et-sb-cnt i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex: none;
}

.mw-et-sb-vr {
    width: 1px;
    height: 20px;
    background: var(--mud-palette-lines-default);
    flex: none;
}

.mw-et-sb-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.mw-et-sb-item b {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.mw-et-sb-item b small {
    font-size: 11px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.mw-et-sb-chips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.mw-et-sb-prov {
    cursor: pointer;
    border-radius: 8px;
    padding: 3px 7px;
    transition: background 0.15s ease;
}

.mw-et-sb-prov:hover {
    background: color-mix(in srgb, var(--mud-palette-lines-default) 30%, transparent);
}

/* The expanded info cards — reuse the corner-glow kpi surface. */
.mw-et-sb-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 1280px) {
    .mw-et-sb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .mw-et-sb-cards { grid-template-columns: minmax(0, 1fr); }
}

.mw-et-sb-card {
    cursor: default;
}

.mw-et-sb-cardhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.mw-et-sb-cardhead b {
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.mw-et-sb-cardhead b small {
    font-size: 11px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* Status rows — swatch · name · explanation · count · percent. */
.mw-et-sb-srow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 12.5px;
    min-width: 0;
}

.mw-et-sb-sw {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
    align-self: center;
}

.mw-et-sb-srow-n {
    font-weight: 600;
    white-space: nowrap;
    min-width: 84px;
}

.mw-et-sb-srow-d {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-et-sb-srow b {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.mw-et-sb-srow-p {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
}

/* Sparkline block (tickets card). */
.mw-et-sb-spark {
    margin-top: 8px;
}

.mw-et-sb-sparkcap {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 3px;
}

.mw-et-sb-sparksvg {
    display: block;
    width: 100%;
    height: 40px;
}

/* Per-hour check-in chart (pulse card). */
.mw-et-sb-hours {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 56px;
    margin-top: 4px;
}

.mw-et-sb-hours i {
    flex: 1;
    min-width: 0;
    border-radius: 3px 3px 0 0;
    background: var(--mud-palette-success);
}

.mw-et-sb-hours-axis {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Meter rows (handouts + compensations cards). */
.mw-et-sb-meterrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    min-width: 0;
}

.mw-et-sb-meterrow-n {
    font-size: 12px;
    min-width: 96px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-et-sb-meter {
    flex: 1;
    display: flex;
    gap: 2px;
    height: 7px;
    min-width: 40px;
}

.mw-et-sb-meter i {
    display: block;
    border-radius: 2px;
    min-width: 2px;
    flex-basis: 0;
}

.mw-et-sb-meterrow-v {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: right;
    white-space: nowrap;
}

.mw-et-sb-sub {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.mw-et-sb-sub b {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Key-value rows (Anschluss card). */
.mw-et-sb-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    font-size: 12px;
}

.mw-et-sb-kv .k {
    color: var(--mud-palette-text-secondary);
}

.mw-et-sb-kv .v {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

/* Status pill — mono uppercase tag tinted by the lifecycle color (--c) */
.mw-et-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1.5px 8px 2.5px;
    border-radius: 6px;
    border-bottom-left-radius: 2px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 45%, transparent);
    color: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 70%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 8%, transparent);
    white-space: nowrap;
}

.mw-et-meta-label {
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-livedot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    flex: none;
    animation: mw-et-pulse 2s ease infinite;
}

@keyframes mw-et-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 55%, transparent); }
    55%      { box-shadow: 0 0 0 5px transparent; }
}

/* ── Bulk select bar — dashed amber container holding the count + the bulk-action menu ── */

.mw-et-selectbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 3px 2px 10px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-warning) 50%, transparent);
    border-radius: 11px;
    border-bottom-left-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-warning) 5%, transparent);
}

.mw-et-selectbar > b {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: color-mix(in srgb, var(--mud-palette-warning) 80%, var(--mud-palette-text-primary));
}

/* NOTE: The menu activator carries the bar's amber so the count and the unfold symbol read as one chip. */
.mw-et-selectbar-activator {
    color: color-mix(in srgb, var(--mud-palette-warning) 80%, var(--mud-palette-text-primary));
}

/* ── Send-ticket-mail confirm dialog (mw-et-stm-*) — the de-selectable recipient list shown before the
   PRODUCTION ticket send. A plain sheet list, one removable row per recipient; rows whose person has no
   stored email are error-tinted (the send would fail them). Palette-variable driven so both themes work. ── */
.mw-et-stm-dlg .mw-et-stm-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 46vh;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 2px 4px;
}

.mw-et-stm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px 5px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
}

.mw-et-stm-row:hover {
    background: color-mix(in srgb, var(--mud-palette-action-default) 6%, transparent);
}

/* NOTE: No stored email — the send path reports a NO_EMAIL row for this person, so flag it up front. */
.mw-et-stm-row--noemail {
    border-color: color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent);
}

.mw-et-stm-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    color: #10171f;
    background: var(--mw-et-stm-hue, var(--mud-palette-primary));
}

.mw-et-stm-id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.mw-et-stm-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.mw-et-stm-mail {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-secondary);
}

.mw-et-stm-row--noemail .mw-et-stm-mail {
    color: var(--mud-palette-error);
}

.mw-et-stm-empty {
    padding: 10px 6px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* ── Team-scope banner — the ?teamId= narrowing cue above the grid (info-tinted, matches the
   filtered visible/total counter). ────────────────────────────────────────────────────────── */
.mw-et-scopebanner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 12px;
    margin-bottom: 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
    font-size: 0.85rem;
}

.mw-et-scopebanner-icon {
    color: var(--mud-palette-info);
}

.mw-et-scopebanner-text {
    flex: 1 1 auto;
    color: var(--mud-palette-text-primary);
}

.mw-et-scopebanner-text > b {
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-info) 80%, var(--mud-palette-text-primary));
}

.mw-et-scopebanner-clear {
    flex: 0 0 auto;
}

/* ── Person cell — accent avatar (--c per person) + stacked name/email ──────── */

.mw-et-who {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.mw-et-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border-bottom-left-radius: 3px;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: color-mix(in srgb, var(--c, var(--mud-palette-primary)) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-primary)) 15%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-primary)) 32%, transparent);
}

/* NOTE: The avatar doubles as the person action-menu activator — reset the <button> chrome so
   only the .mw-et-avatar tile shows, and add a per-person accent focus ring on hover/open. */
.mw-et-avatar--btn {
    padding: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.mw-et-avatar--btn:hover,
.mw-menu-open .mw-et-avatar--btn {
    border-color: color-mix(in srgb, var(--c, var(--mud-palette-primary)) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--mud-palette-primary)) 18%, transparent);
}

/* ── Person action menu — edge-glow panel (chat "vpanel" surface language) ──── */

/* NOTE: MWMenu's MudPopover paper would paint its own flat grey box over the panel. Neutralize
   the paper (transparent, no border/shadow) so the inner .mud-menu-list IS the visible surface. */
.mud-popover:has(> .mw-et-actionmenu) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.mw-et-actionmenu {
    --rail: var(--mud-palette-primary);
    min-width: 214px;
    padding: 5px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    /* NOTE: Tail corner points up-left, back at the avatar the menu dropped from. */
    border-top-left-radius: 4px;
    background:
        linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--rail) 72%, transparent) 0%,
            color-mix(in srgb, var(--rail) 40%, transparent) 40%,
            transparent 72%) border-box,
        linear-gradient(var(--mud-palette-lines-default), var(--mud-palette-lines-default)) border-box;
    box-shadow:
        0 22px 44px -20px hsla(0 0% 0% / .85),
        -3px 3px 12px -9px color-mix(in srgb, var(--rail) 70%, transparent);
}

/* NOTE: Menu rows — the chat ".vitem" treatment: rounded, soft hover, category-tinted icons kept. */
.mw-et-actionmenu .mw-menu-submenu-activator {
    border-radius: 9px;
    padding: 7px 11px;
    gap: 10px;
    transition: background .12s ease, color .12s ease;
}

.mw-et-actionmenu .mw-menu-submenu-activator:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.mw-et-actionmenu .mw-menu-submenu-icon-start {
    margin-inline-end: 0;
}

.mw-et-actionmenu .mw-menu-submenu-label {
    height: auto;
    margin: 0;
    font-size: 13.5px;
    font-family: inherit;
}

/* NOTE: Group separators — thin, inset hairlines between action clusters. */
.mw-et-actionmenu .mud-divider {
    margin: 4px 6px !important;
    border-color: var(--mud-palette-lines-default);
}

.mw-et-who-text {
    min-width: 0;
}

/* NOTE: Compact (mobile) identity cell — no avatar, so the name+chips block owns the width and the
   name is allowed to wrap the chips onto their own line under it. */
.mw-et-who--compact {
    align-items: flex-start;
    gap: 0;
}

.mw-et-who--compact .mw-et-nm {
    white-space: normal;
    margin-bottom: 3px;
}

.mw-et-nm {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-em {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Passport detail row — one credential card per ticket + the compensation breakdown ── */

.mw-et-passport {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    padding: 14px 18px 18px 56px;
}

.mw-et-pcard {
    --rail: transparent;
    position: relative;
    padding: 14px 16px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--rail) 80%, transparent) 0%,
            color-mix(in srgb, var(--rail) 45%, transparent) 40%,
            transparent 72%) border-box,
        linear-gradient(var(--mud-palette-lines-default), var(--mud-palette-lines-default)) border-box;
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--rail) 65%, transparent);
    min-width: 0;
}

.mw-et-pcard--void {
    opacity: .68;
}

.mw-et-pcard--compensations {
    --rail: var(--mud-palette-warning);
}

.mw-et-pcard--handouts {
    --rail: var(--mud-palette-success);
}

/* The compensations card mutes itself into the empty look when the breakdown inside
   reports no compensations (mw-comp-bd-empty) — same treatment as the explicit --empty card. */
.mw-et-pcard--empty,
.mw-et-pcard:has(.mw-comp-bd-empty) {
    --rail: transparent;
    display: grid;
    place-items: center;
    border-style: dashed;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    min-height: 120px;
}

.mw-et-pcard:has(.mw-comp-bd-empty) > .mw-et-pcard-head {
    display: none;
}

.mw-et-pcard:has(.mw-comp-bd-empty) .mw-comp-bd-empty {
    font-size: 12.5px;
    margin: 0;
}

.mw-et-pcard-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    min-width: 0;
}

.mw-et-pcard-head b {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-pcard-holder {
    margin-left: auto;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ScanCode — dashed mono strip with the reveal eye */
.mw-et-scancode {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 7px;
    padding: 3px 4px 3px 9px;
    margin-bottom: 9px;
    min-width: 0;
}

.mw-et-scancode b {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Lifecycle stepper — Draft → Issued → Checked-in */
.mw-et-lifecycle {
    display: flex;
    align-items: flex-start;
    margin: 4px 0 11px;
}

.mw-et-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    position: relative;
}

.mw-et-step::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -50%;
    width: 100%;
    height: 1.5px;
    background: var(--mud-palette-lines-default);
}

.mw-et-step:first-child::before {
    display: none;
}

.mw-et-step-bullet {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    z-index: 1;
    box-sizing: border-box;
}

.mw-et-step.done .mw-et-step-bullet {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    box-shadow: 0 0 8px -2px var(--mud-palette-primary);
}

.mw-et-step.done::before {
    background: var(--mud-palette-primary);
}

.mw-et-step.now .mw-et-step-bullet {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.mw-et-step span:last-child {
    font-size: 8.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.mw-et-step.done span:last-child,
.mw-et-step.now span:last-child {
    color: var(--mud-palette-text-primary);
}

/* Meta rows (push trail, check-in trail, revoke trail) */
.mw-et-pmeta {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 11.5px;
    padding: 2px 0;
    color: var(--mud-palette-text-primary);
}

.mw-et-pmeta .mw-et-meta-label {
    width: 84px;
    flex: none;
}

.mw-et-graphic {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mw-et-graphic .mud-icon-root {
    font-size: 14px;
}

.mw-et-graphic--ready {
    color: var(--mud-palette-success);
}

.mw-et-graphic--pending {
    color: var(--mud-palette-text-secondary);
}

.mw-et-sync {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mw-et-sync .mud-icon-root {
    font-size: 14px;
}

.mw-et-sync--ok {
    color: var(--mud-palette-success);
}

.mw-et-sync--drift {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.mw-et-sync--checking {
    color: var(--mud-palette-text-secondary);
}

/* ── Ticket-image column cell (people grid) ── */
.mw-et-ticketimg-cell {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ── Dev-pane controls (mw-et-devtools) — an inline group that rides IN the page toolbar row (next to
   search + the mode switch) when the Dev pane is active: the people-selection pill, the "Dev actions"
   menu, the audit report chips, and the immutable-columns switch. One row, no separate strip. ── */
.mw-et-devtools {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}

/* NOTE: The seed-count numeric field lives inside the "Mailpit capture test" submenu — give it menu-item
   padding so it lines up with the action rows below it. */
.mw-et-menu-field {
    padding: 4px 12px 6px;
    max-width: 200px;
}

.mw-et-mailpit-count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.mw-et-pactions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ── Issue dialog rows (DtPushAdmissionTickets) ── */

.mw-et-issue-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    min-width: 0;
}

.mw-et-issue-row:last-child {
    border-bottom: none;
}

.mw-et-issue-row b {
    font-size: 13px;
    white-space: nowrap;
}

.mw-et-issue-holder {
    flex: 1;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Developer mode (grid swap): raw provider ticket view ─────────────────── */

.mw-et-dev-code {
    font-family: var(--mud-typography-default-family, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-dev-json {
    padding: 8px 12px;
    max-height: 420px;
    overflow: auto;
    background: var(--mud-palette-background-gray);
    border-radius: 6px;
}

/* The mode switch (People ↔ Dev) pins to the toolbar's right edge — it must never move when
   the contextual cluster on its left changes with selection/mode. */
.mw-et-mode-switch {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Developer toolbar actions — one coherent cluster instead of loose buttons. */
.mw-et-dev-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent);
}

/* QR dialog — white card so the transparent-white QR modules stay scannable on dark themes. */
.mw-et-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
}

.mw-et-qr-img {
    width: 320px;
    height: 320px;
    image-rendering: pixelated;
}

.mw-et-qr-code {
    font-family: monospace;
    font-size: 13px;
    color: #111;
    letter-spacing: 0.04em;
}

.mw-et-qr-holder {
    font-size: 12px;
    color: #555;
}

/* Raw field editor dialog — labeled key/value rows. */
.mw-et-fieldedit {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 420px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* Dev pane detail row — merge panel on top, raw stored state collapsed underneath.
   The detail cell spans the FULL wire-column table (thousands of px), so the content
   does NOT stretch with it: width-capped and pinned sticky against the grid's
   horizontal scroll (the expandable clip releases after the expand settles). */
.mw-et-provider-detail {
    position: sticky;
    left: 12px;
    max-width: min(1100px, calc(100vw - 340px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
}

.mw-et-provider-rawjson > summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    user-select: none;
}

.mw-et-provider-rawjson > summary:hover {
    color: var(--mud-palette-text-primary);
}

/* Inline wire-field editors (provider pane) — subtle in rest, obvious once locally edited. */
.mw-et-wire-edit {
    font: inherit;
    font-size: inherit;
    width: 100%;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 6px;
    transition: border-color 120ms ease, background 120ms ease;
}

.mw-et-wire-edit:hover {
    border-color: var(--mud-palette-lines-default);
}

.mw-et-wire-edit:focus {
    outline: none;
    border-color: var(--mud-palette-secondary);
    background: var(--mud-palette-background-gray);
}

/* NOTE: A locally edited value — lives only in this session's memory until pushed. */
.mw-et-wire-edit--dirty {
    border-color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    box-shadow: inset 2px 0 0 var(--mud-palette-secondary);
}

/* NOTE: block + min-height keep EMPTY editable cells a full-size click target, and the
   row-hover border makes the editable cells discoverable before the first click. */
.mw-et-wire-edit {
    display: block;
    min-height: 24px;
}

.mw-dg-row:hover .mw-et-wire-edit {
    border-color: var(--mud-palette-lines-default);
}

/* Numeric wire inputs (currencies/handouts) — hide the spinner chrome, keep it calm. */
.mw-et-wire-edit[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.mw-et-wire-edit[type="number"]::-webkit-outer-spin-button,
.mw-et-wire-edit[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.mw-et-wire-edit--select {
    appearance: auto;
    cursor: pointer;
}

.mw-et-wire-edit--select option {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* Push preview dialog — per-ticket change lists (stored → new). */
.mw-et-pushpreview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 480px;
    max-height: 60vh;
    overflow-y: auto;
}

.mw-et-pushpreview-ticket {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 10px;
}

.mw-et-pushpreview-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.mw-et-pushpreview-holder {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.mw-et-pushpreview-changes {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr max-content 1fr;
    gap: 2px 10px;
    align-items: baseline;
    font-size: 0.8rem;
}

.mw-et-pushpreview-key {
    font-family: monospace;
    color: var(--mud-palette-text-secondary);
}

.mw-et-pushpreview-old {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.mw-et-pushpreview-arrow {
    color: var(--mud-palette-secondary);
}

.mw-et-pushpreview-new {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Dev/Provider toolbar composer strip — gap to the toolbar search on the left, and button
   labels must never break into a second line (label + count stay together). */
.mw-et-composer {
    margin-left: 10px;
    margin-right: 8px;
    flex-wrap: nowrap;
}

.mw-et-composer .mud-button-root,
.mw-et-composer .mud-button-label {
    white-space: nowrap;
}

/* Selection count inside the composer strip — sized like a small button. */
.mw-et-composer-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 100%;
    padding: 0 10px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
}

/* Purge confirm — the legacy keys as a scannable vertical list. */
.mw-et-purge-keylist {
    margin: 10px 0 10px 4px;
    padding-left: 20px;
    line-height: 1.7;
    columns: 2;
    column-gap: 32px;
}

.mw-et-purge-keylist code {
    font-family: monospace;
    font-size: 0.85em;
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    padding: 1px 6px;
}

/* Provider-only code detail — no stored copy to merge against. */
.mw-et-nocopy-note {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 2px;
}

/* Run-policies action column — muted header icon (the cells hold the per-person run button). */
.mw-et-runpol-headic {
    color: var(--mud-palette-text-secondary);
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════
   Policies grid-swap pane (MwPolicyFamilyPane) — one expandable row per
   policy-family member plus the PolicyRun log. Same language as the rest of
   the page: hairline-bordered grid, category color as a rail (--c), corner-
   glow card for the run log, mono for meta.
   ══════════════════════════════════════════════════════════════════════════ */

.mw-et-polpane {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px 16px;
    box-sizing: border-box;
}

.mw-et-pol-grid {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    flex: none;
}

.mw-et-pol-header,
.mw-et-pol-row {
    display: grid;
    grid-template-columns: 20px minmax(240px, 300px) 120px minmax(0, 1fr) 170px 36px;
    gap: 0 14px;
    align-items: center;
    padding: 0 14px 0 0;
}

/* The composition pill sits directly in the row grid — keep it hugging its content. */
.mw-et-pol-row > .mw-et-pill {
    justify-self: start;
}

.mw-et-pol-header {
    height: 38px;
    background: var(--mud-palette-background-gray);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-et-pol-row {
    min-height: 62px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mw-et-pol-row:last-child {
    border-bottom: none;
}

.mw-et-pol-row:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}

/* Category rail — the policy's color as a glowing bar on the row's left edge. */
.mw-et-pol-rail {
    width: 4px;
    height: 34px;
    border-radius: 3px;
    background: var(--c, transparent);
    box-shadow: 0 0 8px -1px var(--c, transparent);
    justify-self: center;
}

.mw-et-pol-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.mw-et-pol-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border-bottom-left-radius: 3px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--c, var(--mud-palette-text-secondary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 30%, transparent);
}

.mw-et-pol-name-text {
    min-width: 0;
}

.mw-et-pol-nm {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-pol-sub {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-pol-rulechips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-width: 0;
}

/* Per-rule effect summary — a quiet tinted pill; ellipsized so one verbose rule
   cannot blow up the row. */
.mw-et-pol-rulechip {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 8px 3px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 35%, transparent);
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 8%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: 11px;
    font-weight: 600;
}

.mw-et-pol-rulechip--warn {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
    color: var(--mud-palette-warning-darken);
}

.mw-et-pol-norules {
    font-size: 11.5px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.mw-et-pol-stat {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.mw-et-pol-chevron {
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-secondary);
    transition: transform 0.2s ease, color 0.2s ease;
}

.mw-et-pol-row--open .mw-et-pol-chevron {
    transform: rotate(90deg);
    color: var(--mud-palette-primary);
}

.mw-et-pol-chevron--locked {
    color: var(--mud-palette-text-disabled);
}

/* Expanded editor region — visually "inside" the row above, like the passport detail row. */
.mw-et-pol-detail {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    padding: 16px 18px 18px 40px;
}

.mw-et-pol-detail:last-child {
    border-bottom: none;
}

/* ── Run log — the PolicyRun history viewer (corner-glow card, primary rail) ── */

.mw-et-pol-runlog {
    --rail: var(--mud-palette-primary);
    position: relative;
    flex: none;
    padding: 15px 17px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--rail) 80%, transparent) 0%,
            color-mix(in srgb, var(--rail) 45%, transparent) 40%,
            transparent 72%) border-box,
        linear-gradient(var(--mud-palette-lines-default), var(--mud-palette-lines-default)) border-box;
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--rail) 65%, transparent);
}

.mw-et-pol-runlog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mw-et-pol-runlog-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}

.mw-et-pol-runlog-last {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
}

.mw-et-pol-runrow {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.mw-et-pol-runrow:last-of-type {
    border-bottom: none;
}

.mw-et-pol-runrow--nochange {
    opacity: 0.65;
}

.mw-et-pol-runic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border-bottom-left-radius: 3px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 25%, transparent);
}

.mw-et-pol-runbody {
    flex: 1;
    min-width: 0;
}

.mw-et-pol-runsum {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.mw-et-pol-runmeta {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}

.mw-et-pol-runchips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-left: 8px;
}

.mw-et-pol-runlog-note {
    display: block;
    margin-top: 8px;
}

/* Narrow layouts — drop the composition and stat columns, keep name + chips. */
@media (max-width: 1100px) {
    .mw-et-pol-header,
    .mw-et-pol-row {
        grid-template-columns: 20px minmax(200px, 260px) minmax(0, 1fr) 36px;
    }

    .mw-et-pol-header > :nth-child(3),
    .mw-et-pol-header > :nth-child(5),
    .mw-et-pol-row > .mw-et-pill,
    .mw-et-pol-row > .mw-et-pol-stat {
        display: none;
    }

    .mw-et-pol-detail {
        padding-left: 18px;
    }
}

/* NOTE: Hover-expand entitlement columns (handouts / compensations / tickets) — the
   membership-chips double-render mechanic on whole LAYERS: the cell renders a compact layer
   (chips in one horizontal line) and a full layer (full chips stacked vertically) on top of each
   other; hovering the CELL trades them via max-HEIGHT/opacity with the membership timing, so the
   row grows downward to fit the vertical stack. The edit corner is pinned absolute top-right —
   the swap never moves it (the old inline button drifted away from the cursor mid-hover). */
.mw-et-entcol {
    position: relative;
    min-height: 28px;
    padding-right: 34px; /* reserved lane for the pinned edit corner */
}

.mw-et-ent-mini,
.mw-et-ent-full {
    overflow: hidden;
}

.mw-et-ent-mini {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    max-height: 84px; /* up to three wrapped compact lines — a numeric cap keeps the swap animatable */
    opacity: 1;
}

.mw-et-ent-full {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    max-height: 0;
    opacity: 0;
}

.mw-et-entcol:hover .mw-et-ent-mini {
    min-height: 0;
    max-height: 0;
    opacity: 0;
    transition: max-height .2s ease .2s, opacity .15s ease .2s;
}

.mw-et-entcol:hover .mw-et-ent-full {
    max-height: 400px;
    opacity: 1;
    transition: max-height .25s ease .2s, opacity .2s ease .25s;
}

/* The pinned edit corner — drift dot + editor popover activator(s); absolute so the layer swap
   below never nudges it while the operator is aiming at it. */
.mw-et-ent-edit {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 28px;
}

/* The entitlement edit button — the page's tile language (tail corner) instead of MudBlazor's
   round ripple disc, idling quiet and blooming with a soft primary glow on hover. */
.mw-et-editbtn.mud-icon-button {
    width: 26px;
    height: 24px;
    padding: 0;
    border-radius: 8px;
    border-bottom-left-radius: 2px;
    border: 1px solid transparent;
    color: var(--mud-palette-text-secondary);
    transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
}

.mw-et-editbtn.mud-icon-button .mud-icon-root {
    font-size: 16px;
}

.mw-et-editbtn.mud-icon-button:hover {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--mud-palette-primary) 65%, transparent);
}

/* ── Ticket cell inside the entitlement shell — re-drive the unit's internal mini/full swap from
   the CELL hover and stack the full loadout vertically, so all three columns behave identically.
   Selectors carry an extra .mw-ptc level to outrank the component's own :hover rules regardless
   of stylesheet order. ── */
.mw-et-entcol--tickets .mw-ptc {
    display: block;
}

.mw-et-entcol--tickets .mw-ptc .mw-ptc-layer {
    overflow: hidden;
}

.mw-et-entcol--tickets .mw-ptc .mw-ptc-mini {
    display: flex;
    align-items: center;
    max-width: none;
    min-height: 28px;
    max-height: 28px;
    opacity: 1;
}

.mw-et-entcol--tickets .mw-ptc .mw-ptc-full {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    max-width: none;
    max-height: 0;
    opacity: 0;
}

.mw-et-entcol--tickets:hover .mw-ptc .mw-ptc-mini {
    min-height: 0;
    max-height: 0;
    opacity: 0;
    transition: max-height .2s ease .2s, opacity .15s ease .2s;
}

.mw-et-entcol--tickets:hover .mw-ptc .mw-ptc-full {
    max-height: 400px;
    opacity: 1;
    transition: max-height .25s ease .2s, opacity .2s ease .25s;
}

/* Coupling links turn vertical in the stacked full layer — a short hairline dropping from the
   main tile's left edge onto each add-on. */
.mw-et-entcol--tickets .mw-ptc .mw-ptc-full .mw-ptc-link {
    width: 2px;
    height: 7px;
    margin-left: 12px;
}

.mw-et-entcol--tickets .mw-ptc .mw-ptc-full .mw-ptc-link--short {
    height: 4px;
}

/* ── DataGrid entitlement cells (MwDgHandoutsColumn / MwDgCompensationsColumn on the People and
   Team grids) ─────────────────────────────────────────────────────────────────────────────────
   Those host rows are pinned to a fixed height with overflow:hidden + virtualization, so the
   grow-the-row swap above would be clipped. In this host the mini layer stays inline on the single
   row and the full layer becomes an ABSOLUTE pop-out that floats over the rows below on hover — the
   row height never changes. The two grids carry .mw-entgrid so the hovered entitlement cell (and its
   row) can un-clip for the pop-out; only that cell un-clips, so sibling cells keep their ellipsis. */
.mw-dgent {
    min-height: 24px;
}

.mw-dgent .mw-et-ent-mini {
    flex-wrap: nowrap; /* one line inside the fixed row — no wrap-driven vertical growth to clip */
    min-height: 24px;
    max-height: 26px;
}

.mw-dgent .mw-et-ent-full {
    position: absolute;
    top: -5px;
    left: -6px;
    z-index: 30;
    min-width: calc(100% + 12px);
    width: max-content;
    max-width: 340px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-table-lines);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .4);
    pointer-events: none; /* no accidental capture while collapsed under the mini layer */
}

.mw-dgent:hover .mw-et-ent-full {
    pointer-events: auto;
}

/* The pinned assign/edit corner stays above the pop-out so it remains clickable on hover. */
.mw-dgent .mw-et-ent-edit {
    z-index: 31;
}

/* Un-clip the hovered row and the entitlement cell so the pop-out escapes downward. The row's inline
   overflow:hidden is not !important, so this wins; :has scopes the cell un-clip to the entitlement
   cell alone, leaving every other cell's text-overflow ellipsis intact. */
.mw-entgrid tr:hover {
    overflow: visible !important;
}

.mw-entgrid tr:hover td:has(.mw-dgent) {
    overflow: visible !important;
}

/* ── Main-ticket state (3-phase model) ────────────────────────────────────── */

/* Hollow pill variant — "no main ticket yet": same tint language, dashed border, no fill */
.mw-et-pill--hollow {
    border-style: dashed;
    background: transparent;
    opacity: .75;
}

/* ─────────────── Provider mirror grid: chip over hard limit ───────────────
   A chip carrying more than the policy's chip hard limit is locked by the provider and freeing it
   is a support case — the row must be unmissable red, not a subtle tint. */
tr.mw-dg-row.mw-et-provrow--overlimit,
tr.mw-dg-row.mw-et-provrow--overlimit:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 28%, var(--mud-palette-surface)) !important;
    box-shadow: inset 4px 0 0 var(--mud-palette-error);
}

tr.mw-dg-row.mw-et-provrow--overlimit td {
    font-weight: 600;
}

/* ─────────────── Ticket mail column + passport card ───────────────
   Gray envelope = never gotten the ticket mail; green check-envelope = at least once
   (count badged when >1). The passport card lists every successful send, newest first. */
.mw-et-ticketmail-never {
    color: var(--mud-palette-text-disabled);
}

.mw-et-ticketmail-got {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.mw-et-ticketmail-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mud-palette-success);
}

.mw-et-ticketmail-summary {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.mw-et-ticketmail-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Ticket-mail confirm dialog: already-mailed recipients (duplicate guard) */
.mw-et-stm-dupewarn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.mw-et-stm-row--alreadysent {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
}

.mw-et-stm-gotbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-warning);
    white-space: nowrap;
}

/* Ticket-mail confirm dialog: will-be-skipped recipients (skip preview) */
.mw-et-stm-row--skipped {
    opacity: 0.65;
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
}

.mw-et-stm-row--skipped .mw-et-stm-name {
    text-decoration: line-through;
    text-decoration-color: var(--mud-palette-warning);
}

.mw-et-stm-skipbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-warning);
    white-space: nowrap;
}