/* Entitlements page (mw-et-*) — command-center look over one full-width MwDataGrid:
   a live KPI strip (ticket lifecycle, handout fulfilment, incentive 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;
}

/* ── 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-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    flex: none;
}

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

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

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

/* 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 count + the three bulk actions ── */

.mw-et-selectbar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 6px 4px 13px;
    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));
}

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

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

.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 incentive 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--incentives {
    --rail: var(--mud-palette-warning);
}

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

/* The incentives card mutes itself into the empty look when the breakdown inside
   reports no incentives (mw-inc-bd-empty) — same treatment as the explicit --empty card. */
.mw-et-pcard--empty,
.mw-et-pcard:has(.mw-inc-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-inc-bd-empty) > .mw-et-pcard-head {
    display: none;
}

.mw-et-pcard:has(.mw-inc-bd-empty) .mw-inc-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-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;
}

/* Provider pane detail row — merge panel on top, raw stored state collapsed underneath. */
.mw-et-provider-detail {
    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;
}