/* 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; }
}

/* NOTE: The bulk select bar moved to the shared MwSelectionActionBar component
   (mw-selection-action-bar.css) — no entitlements-specific select-bar CSS remains. */

/* ── 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);
}

/* ── Managed-member bundle section (act mode) — one card per act above the holder roster: the managed
   members whose tickets travel as ONE email, plus the recipient select for that email. ─────────────── */
.mw-et-stm-bundle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 5%, transparent);
}

.mw-et-stm-bundle-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-et-stm-bundle-act {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.mw-et-stm-bundle-note {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.mw-et-stm-bundle-members {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mw-et-stm-bundle-member {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-action-default) 10%, transparent);
}

/* ── 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;
}

/* NOTE: The initials-avatar activator moved to the shared MwAvatarActionMenu component
   (mw-avatar-action-menu.css); it inherits its accent from the --c set on .mw-et-who. */

/* NOTE: The person/bulk action menus use the shared edge-glow panel — ChildContentClass=
   "mw-menu-glow-panel" (defined in mw-menu.css). No entitlements-specific panel CSS remains. */

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

/* NOTE: Compact (mobile) identity cell — the avatar/menu button stays (top-aligned beside the text
   block), the name is allowed to wrap and the chips get their own line under it. */
.mw-et-who--compact {
    align-items: flex-start;
    gap: 8px;
}

.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;
}

/* Developer affordance: rows are clickable to preview the provider wire payload. */
.mw-et-issue-row--clickable {
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.1s ease;
}

.mw-et-issue-row--clickable:hover {
    background: var(--mud-palette-action-default-hover);
}

.mw-et-issue-preview-icon {
    color: var(--mud-palette-text-disabled);
    font-size: 15px;
}

.mw-et-issue-row--clickable:hover .mw-et-issue-preview-icon {
    color: var(--mud-palette-primary);
}

.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;
}

/* ═══ Unified per-person Update dialog (DtUpdatePersonTickets) — prefix mw-et-upt-* ═══════════
   Command-palette shell: the MudDialog paper is tagged `mw-et-upt-shell mw-dialog-frameless`, so
   MudBlazor renders no header/padding and the whole surface — header, option rows, nested draft
   list, notes, action bar — is drawn here on the theme palette (docs/plans/mitware-theme/).
   Embedded surface → palette tokens only, no canvas atmosphere; always dark like its ancestor
   DtCommandPalette (mw-command-palette.css). Tokens mirror the canvas-and-palette values and are
   scoped to the shell so nothing leaks. Phones (< 600px) get a full-screen sheet. */

.mw-et-upt-shell {
    /* surfaces */
    --mw-upt-surface: hsl(240 12% 9%);
    --mw-upt-surface-elev: hsl(240 11% 11.5%);
    --mw-upt-row-hover: hsla(0 0% 100% / 0.03);

    /* borders */
    --mw-upt-border: hsla(0 0% 100% / 0.06);
    --mw-upt-border-strong: hsla(0 0% 100% / 0.10);

    /* text */
    --mw-upt-text: hsl(0 0% 96%);
    --mw-upt-text-dim: hsl(240 5% 60%);
    --mw-upt-text-faint: hsl(240 5% 40%);

    /* accent — MitWare violet */
    --mw-upt-accent: hsl(263 90% 67%);
    --mw-upt-accent-soft: hsl(263 70% 79%);
    --mw-upt-accent-glow: hsla(263 90% 67% / 0.18);
    --mw-upt-accent-tint: hsla(263 90% 67% / 0.10);
    --mw-upt-accent-line: hsla(263 90% 67% / 0.30);

    /* status — calm, not neon */
    --mw-upt-amber: hsl(38 92% 62%);
    --mw-upt-amber-dim: hsla(38 92% 62% / 0.13);
    --mw-upt-blue: hsl(210 80% 65%);
    --mw-upt-blue-dim: hsla(210 80% 65% / 0.13);

    --mw-upt-font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --mw-upt-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── shell — overrides the MudDialog paper ── */
.mud-dialog.mw-et-upt-shell {
    width: min(560px, calc(100vw - 32px));
    max-width: min(560px, calc(100vw - 32px));
    max-height: 86vh;
    background: var(--mw-upt-surface) !important;
    border-radius: 14px !important;
    box-shadow:
        0 0 0 1px var(--mw-upt-border-strong),
        0 22px 60px -16px hsla(0 0% 0% / 0.7),
        0 8px 24px -8px hsla(0 0% 0% / 0.5),
        0 0 80px -20px var(--mw-upt-accent-glow) !important;
    overflow: hidden !important;
    position: relative;
    animation: mw-et-upt-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hairline accent glow along the top edge — the command palette's signature (its container is the
   one element whose top edge glows; small elements keep their top edge clean per the theme). */
.mud-dialog.mw-et-upt-shell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--mw-upt-accent) 30%,
        var(--mw-upt-accent-soft) 50%,
        var(--mw-upt-accent) 70%,
        transparent);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

@keyframes mw-et-upt-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mw-et-upt-root {
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    color: var(--mw-upt-text);
    font-family: var(--mw-upt-font-body);
    -webkit-font-smoothing: antialiased;
}

/* ── header — icon tile (tail corner) + title + person, hairline separator ── */
.mw-et-upt-hd {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 13px 18px;
    border-bottom: 1px solid var(--mw-upt-border);
}

.mw-et-upt-hd-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border-top-left-radius: 4px;
    display: grid;
    place-items: center;
    color: var(--mw-upt-accent-soft);
    background: var(--mw-upt-accent-tint);
    border: 1px solid var(--mw-upt-accent-line);
}

.mw-et-upt-hd-icon .mud-icon-root {
    font-size: 19px;
}

.mw-et-upt-hd-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The person the update targets — a name, so body font (mono is for labels-about-data). */
.mw-et-upt-hd-title small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--mw-upt-text-dim);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-upt-x {
    flex: none;
    appearance: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mw-upt-text-faint);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.mw-et-upt-x:hover {
    color: var(--mw-upt-text);
    background: var(--mw-upt-row-hover);
}

.mw-et-upt-x .mud-icon-root {
    font-size: 18px;
}

/* ── body — the only scroll region ── */
.mw-et-upt-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px 16px;
    scrollbar-width: thin;
    scrollbar-color: hsla(0 0% 100% / 0.12) transparent;
}

/* Section label — a label-about-data, so mono uppercase. */
.mw-et-upt-label {
    font-family: var(--mw-upt-font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mw-upt-text-faint);
    margin: 2px 2px -6px;
}

/* ── provider sync — dev-only segmented switch ── */
.mw-et-upt-seg {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--mw-upt-border-strong);
    border-radius: 10px;
    background: hsla(0 0% 100% / 0.02);
}

.mw-et-upt-seg-btn {
    flex: 1;
    appearance: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mw-upt-text-dim);
    cursor: pointer;
    white-space: nowrap;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.mw-et-upt-seg-btn:hover {
    color: var(--mw-upt-text);
    background: var(--mw-upt-row-hover);
}

.mw-et-upt-seg-btn--on,
.mw-et-upt-seg-btn--on:hover {
    color: var(--mw-upt-accent-soft);
    background: var(--mw-upt-accent-tint);
    border-color: var(--mw-upt-accent-line);
}

/* ── developer inline payload preview — the wire JSON a pull/push acts on ── */
.mw-et-upt-payload {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--mw-upt-border);
    border-radius: 12px;
    border-top-left-radius: 4px;
    background: var(--mw-upt-surface-elev);
}

.mw-et-upt-payload-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 12px;
    color: var(--mw-upt-text-dim);
}

.mw-et-upt-payload-err {
    padding: 6px 8px;
    border: 1px solid var(--mw-upt-amber-dim);
    border-radius: 8px;
    background: var(--mw-upt-amber-dim);
    color: var(--mw-upt-amber);
    font-size: 12px;
}

.mw-et-upt-payload-empty {
    padding: 4px 2px;
    font-size: 12px;
    color: var(--mw-upt-text-faint);
}

.mw-et-upt-payload-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mw-et-upt-payload-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mw-upt-text-dim);
}

.mw-et-upt-payload-hd .mud-icon-root {
    font-size: 15px;
    color: var(--mw-upt-text-faint);
}

.mw-et-upt-payload-json {
    max-height: 40vh;
    margin: 0;
    padding: 8px 10px;
    overflow: auto;
    border: 1px solid var(--mw-upt-border);
    border-radius: 8px;
    background: hsla(0 0% 0% / 0.25);
    color: var(--mw-upt-text);
    font-family: var(--mw-upt-font-mono);
    font-size: 11px;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
}

/* ── option rows — the choice collection ── */
.mw-et-upt-opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mw-et-upt-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--mw-upt-border);
    border-radius: 11px;
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease, border-color 120ms ease;
}

.mw-et-upt-opt:hover {
    background: var(--mw-upt-row-hover);
}

/* Checked = violet, within the ~10% tint ceiling. */
.mw-et-upt-opt--on,
.mw-et-upt-opt--on:hover {
    border-color: var(--mw-upt-accent-line);
    background: var(--mw-upt-accent-tint);
}

.mw-et-upt-opt--disabled,
.mw-et-upt-opt--disabled:hover {
    opacity: 0.45;
    cursor: default;
    background: transparent;
}

.mw-et-upt-check {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    border: 1px solid var(--mw-upt-border-strong);
    background: hsla(0 0% 100% / 0.03);
    color: transparent;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.mw-et-upt-check .mud-icon-root {
    font-size: 15px;
}

.mw-et-upt-opt--on .mw-et-upt-check {
    color: var(--mw-upt-accent-soft);
    border-color: var(--mw-upt-accent-line);
    background: hsla(263 90% 65% / 0.09);
}

.mw-et-upt-opt-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
}

.mw-et-upt-opt-name small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--mw-upt-text-dim);
    margin-top: 1px;
}

/* Draft count on the issue row — a count, so mono with tabular figures. */
.mw-et-upt-count {
    flex: none;
    font-family: var(--mw-upt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 99px;
    border: 1px solid var(--mw-upt-border-strong);
    color: var(--mw-upt-text-dim);
}

.mw-et-upt-opt--on .mw-et-upt-count {
    color: var(--mw-upt-accent-soft);
    border-color: var(--mw-upt-accent-line);
}

/* ── nested draft list — flattened top-left corner points at its origin, the issue row above
      (tail-corner semantics, docs/plans/mitware-theme/edge-glow-and-tail-corner.md §1); the drafts
      carry per-type colors, not one category, so no edge glow. ── */
.mw-et-upt-drafts {
    margin: -2px 0 2px 34px;
    padding: 2px 10px;
    border: 1px solid var(--mw-upt-border);
    border-radius: 12px;
    border-top-left-radius: 4px;
    background: var(--mw-upt-surface-elev);
}

.mw-et-upt-draft {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 2px;
    border-bottom: 1px dashed var(--mw-upt-border);
    min-width: 0;
}

.mw-et-upt-draft:last-child {
    border-bottom: none;
}

.mw-et-upt-draft--clickable {
    cursor: pointer;
    border-radius: 6px;
    transition: background 100ms ease;
}

.mw-et-upt-draft--clickable:hover {
    background: var(--mw-upt-row-hover);
}

.mw-et-upt-draft b {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Type color in milligrams — a dot with a whisper of its own glow. */
.mw-et-upt-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--c);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent);
}

/* The holder is a name — body font, dim. */
.mw-et-upt-holder {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: var(--mw-upt-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-upt-preview-icon {
    flex: none;
    font-size: 15px;
    color: var(--mw-upt-text-faint);
    transition: color 100ms ease;
}

.mw-et-upt-draft--clickable:hover .mw-et-upt-preview-icon {
    color: var(--mw-upt-accent-soft);
}

/* Status pill — mono uppercase tag tinted by the lifecycle color (--c), mixed toward white so it
   stays legible on the dark shell (the module-wide .mw-et-pill mixes toward the MudBlazor text
   color, which flips dark in light mode). */
.mw-et-upt-pill {
    flex: none;
    font-family: var(--mw-upt-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1.5px 8px 2.5px;
    border-radius: 6px;
    border-bottom-left-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    color: color-mix(in srgb, var(--c) 75%, white);
    background: color-mix(in srgb, var(--c) 10%, transparent);
    white-space: nowrap;
}

/* ── notes — calm status washes, never louder than the -dim tint ── */
.mw-et-upt-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mw-upt-text-dim);
}

.mw-et-upt-note .mud-icon-root {
    flex: none;
    font-size: 16px;
    margin-top: 1px;
}

.mw-et-upt-note--warn {
    background: var(--mw-upt-amber-dim);
}

.mw-et-upt-note--warn .mud-icon-root {
    color: var(--mw-upt-amber);
}

.mw-et-upt-note--info {
    background: var(--mw-upt-blue-dim);
}

.mw-et-upt-note--info .mud-icon-root {
    color: var(--mw-upt-blue);
}

/* ── action bar — footer chrome like the command palette's ── */
.mw-et-upt-bar {
    flex: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--mw-upt-border);
    background: hsla(0 0% 0% / 0.18);
}

.mw-et-upt-btn {
    appearance: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mw-upt-text-dim);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.mw-et-upt-btn:hover {
    color: var(--mw-upt-text);
    background: var(--mw-upt-row-hover);
}

/* Primary confirm — violet in milligrams: tinted fill under the ~10% ceiling, accent hairline. */
.mw-et-upt-btn--primary {
    color: var(--mw-upt-accent-soft);
    background: var(--mw-upt-accent-tint);
    border-color: var(--mw-upt-accent-line);
}

.mw-et-upt-btn--primary:hover:not(:disabled) {
    color: var(--mw-upt-accent-soft);
    background: var(--mw-upt-accent-tint);
    border-color: color-mix(in srgb, var(--mw-upt-accent) 50%, transparent);
    box-shadow: 0 0 24px -6px var(--mw-upt-accent-glow);
}

.mw-et-upt-btn:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

/* ── phone (< 600px): edge-to-edge sheet — pinned header, scrolling body, thumb bar ── */
@media (max-width: 599.98px) {
    .mud-dialog.mw-et-upt-shell {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0 !important;
        animation: none;
    }

    .mw-et-upt-root {
        height: 100%;
        max-height: none;
    }

    /* The nested draft list gives up most of its indent — sheet width is scarce. */
    .mw-et-upt-drafts {
        margin-left: 12px;
    }

    /* Draft rows may wrap instead of squeezing the holder name to nothing. */
    .mw-et-upt-draft {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* Thumb-sized touch targets; the confirm carries the bar. */
    .mw-et-upt-opt {
        padding: 13px 12px;
    }

    .mw-et-upt-bar {
        padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .mw-et-upt-btn {
        min-height: 44px;
    }

    .mw-et-upt-btn--primary {
        flex: 1;
    }
}

/* ── 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);
}

/* 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;
}