html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    max-width: 100vw;
    overflow-x: clip;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.glass-card {
    background: rgba(255, 255, 255, 0.15) !important;
/*    backdrop-filter: blur(10px);*/
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-panel {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}


/* "My rank" highlight on a leaderboard row (the participant leaderboard and the jury analytics one) —
   an inset shadow with an enormous spread paints a translucent wash over the whole cell, on top of
   whatever background it has. Animating background-color instead would be invisible on the top-3
   rows, whose .bg-top1/2/3 backgrounds are !important. Two identical keyframes under different names,
   swapped on every click, because a CSS animation only restarts when its animation-name changes — a
   second click while the row is already highlighted would otherwise do nothing. */
@keyframes lb-my-row-pulse-a {
    0%, 100% { box-shadow: inset 0 0 0 9999px rgba(0, 115, 254, 0); }
    50% { box-shadow: inset 0 0 0 9999px rgba(0, 115, 254, 0.3); }
}

@keyframes lb-my-row-pulse-b {
    0%, 100% { box-shadow: inset 0 0 0 9999px rgba(0, 115, 254, 0); }
    50% { box-shadow: inset 0 0 0 9999px rgba(0, 115, 254, 0.3); }
}

.lb-my-row-a > td { animation: lb-my-row-pulse-a 0.9s ease-in-out 3; }
.lb-my-row-b > td { animation: lb-my-row-pulse-b 0.9s ease-in-out 3; }

/* The participant navbar's Analytics link until they first open the page (ParticipantNavbar): it grows and
   shrinks back. A transform doesn't move the links around it. In the mobile menu only the row's text pulses,
   from its left edge, so the row itself stays put. */
.nav-new { animation: nav-new-pulse 1.6s ease-in-out infinite; }
.mud-list-item.nav-new { animation: none; }
.mud-list-item.nav-new .mud-list-item-text { transform-origin: left center; animation: nav-new-pulse 1.6s ease-in-out infinite; }

@keyframes nav-new-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* Sales funnel table (/jury/analytics). SOR columns are grey, their areas (when opened) white.
   Stage and All stay pinned on the left while the table scrolls sideways; an open SOR's two columns
   (.sf-pin) pin right after them, and the next open SOR slides over it at the same offset. Pinning
   needs fixed widths, set by the variables below — the offsets are sums of them.
   Borders are drawn per cell (border-collapse: separate), because collapsed borders belong to the
   table and would scroll away from the pinned cells. */
.sales-funnel-scroll { overflow-x: auto; }
.sales-funnel {
    --sf-stage: 200px; --sf-qty: 130px; --sf-conv: 104px; --sf-sorq: 80px; --sf-sorc: 84px;
    border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 0.875rem; color: #1a1a1a;
    border-top: 1px solid #bdbdbd; border-left: 1px solid #bdbdbd;
}
.sales-funnel th,
.sales-funnel td { box-sizing: border-box; border-right: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd; padding: 8px 12px; text-align: center; white-space: nowrap; font-weight: 400; background-color: #ffffff; }
.sales-funnel .sf-stage { text-align: left; white-space: normal; width: var(--sf-stage); min-width: var(--sf-stage); max-width: var(--sf-stage); position: sticky; left: 0; z-index: 3; }
.sales-funnel .sf-fixed { position: sticky; z-index: 3; }
.sales-funnel .sf-c-all,
.sales-funnel .sf-c-qty { left: var(--sf-stage); }
.sales-funnel .sf-c-qty { width: var(--sf-qty); min-width: var(--sf-qty); max-width: var(--sf-qty); }
.sales-funnel .sf-c-conv { left: calc(var(--sf-stage) + var(--sf-qty)); width: var(--sf-conv); min-width: var(--sf-conv); max-width: var(--sf-conv); }
.sales-funnel .sf-c-sor,
.sales-funnel .sf-c-sorq { left: calc(var(--sf-stage) + var(--sf-qty) + var(--sf-conv)); }
.sales-funnel .sf-c-sorq { width: var(--sf-sorq); min-width: var(--sf-sorq); max-width: var(--sf-sorq); }
.sales-funnel .sf-c-sorc { left: calc(var(--sf-stage) + var(--sf-qty) + var(--sf-conv) + var(--sf-sorq)); width: var(--sf-sorc); min-width: var(--sf-sorc); max-width: var(--sf-sorc); }
.sales-funnel .sf-pin { position: sticky; z-index: 2; }
.sales-funnel .sf-edge { box-shadow: 3px 0 4px -2px rgba(0, 0, 0, 0.18); }
.sales-funnel .sf-sor { background-color: #e0e0e0; }
/* The picked sales' comparison column, beside their area. */
.sales-funnel .sf-sales { background-color: #f5f9ff; color: var(--mud-palette-primary); }
.sales-funnel .sf-toggle { cursor: pointer; user-select: none; }
.sales-funnel .sf-toggle:hover { background-color: #d5d5d5; }
.sales-funnel .sf-bar-cell { padding: 2px 0 2px 2px; text-align: left; }
.sales-funnel .sf-bar { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: #0073FE; color: #ffffff; }
.sales-funnel .sf-total td { font-weight: 700; }
.sales-funnel .sf-no-right { border-right-color: transparent; }
/* Each stage is two half rows, so a conversion cell can sit across the line between the two quantities it compares.
   Every stage row is tall enough for a two-line stage name ("Form Berlangganan Signed / A1"): a row that grew to fit
   one would get the extra height in its lower half only, moving the conversion lines off its middle.
   The empty half cells at the top and bottom of each Conv. column are a shade darker than their column (All's stay white). */
.sales-funnel tr.sf-half { height: 23px; }
.sales-funnel tr.sf-half > td { line-height: 1.3; }
.sales-funnel tr.sf-half > .sf-stage { padding-top: 4px; padding-bottom: 4px; }
.sales-funnel .sf-conv-cap { padding: 0; background-color: #f0f0f0; }
.sales-funnel .sf-c-conv.sf-conv-cap { background-color: #ffffff; }
.sales-funnel .sf-sor.sf-conv-cap { background-color: #cdcdcd; }
.sales-funnel .sf-sales.sf-conv-cap { background-color: #e3edfb; }
.sales-funnel .sf-step { display: inline-flex; align-items: center; gap: 6px; }
.sales-funnel .sf-step-arrow { width: 10px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }

/* On a phone the pinned block would cover the whole width — only Stage stays pinned there. */
@media (max-width: 600px) {
    .sales-funnel .sf-fixed,
    .sales-funnel .sf-pin { position: static; box-shadow: none; }
}

/* Potential Volume / Revenue Performance (/jury/analytics): the sales funnel's table, with All grey like the SORs and
   room for "1.234.567 m3" / "$1.234.567". The revenue table has one column per scope (no Conv. column, so --sf-conv is
   0 and an open SOR pins right after All). Their bottom rows are white. */
.sales-funnel.pf-volume { --sf-qty: 128px; --sf-conv: 96px; --sf-sorq: 128px; --sf-sorc: 96px; }
.sales-funnel.pf-volume .sf-total td { background-color: #ffffff; }
.sales-funnel.pf-revenue { --sf-qty: 140px; --sf-conv: 0px; --sf-sorq: 140px; }
.sales-funnel.pf-revenue tr.pf-conv td { background-color: #ffffff; }
.sales-funnel.pf-revenue tr.pf-conv .sf-stage { font-size: 0.75rem; }
/* A volume row's note, on a line of its own under the name. */
.sales-funnel .pf-row-note { display: block; font-size: 0.75rem; font-style: italic; font-weight: 300; color: #757575; }
/* Each card's title, with its All / Profile with PJBG toggle on the right; in the PJBG view, a column's profile count. */
.pf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
/* The revenue card's currency anomalies: a warning line under the table, its detail table, and the simulation chip. */
.pf-sim-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background-color: #FFF3E0; color: #E65100; font-size: 0.75rem; font-weight: 700; }
.pf-anomaly { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background-color: #FFF8E1; color: #7A4F01; font-size: 0.875rem; }
.pf-anomaly .mud-icon-root { flex-shrink: 0; margin-top: 1px; color: #F59E0B; }
.pf-anomaly-link { padding: 0; border: none; background: none; color: var(--mud-palette-primary); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.pf-anomaly-detail { margin-top: 12px; }
.pf-anomaly-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; font-size: 0.8125rem; }
.pf-anomaly-scroll { overflow-x: auto; border: 1px solid #e0e0e0; border-radius: 10px; }
.pf-anomaly-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; color: #1a1a1a; }
.pf-anomaly-table th { padding: 8px 12px; text-align: left; white-space: nowrap; font-weight: 700; background-color: #f5f5f5; border-bottom: 1px solid #e0e0e0; }
.pf-anomaly-table td { padding: 8px 12px; vertical-align: top; white-space: nowrap; border-bottom: 1px solid #eeeeee; }
.pf-anomaly-table tr:last-child td { border-bottom: none; }
.pf-anomaly-table tr.pf-anomaly-on td { background-color: #F1F8FF; }
.pf-anomaly-sub { color: #757575; font-size: 0.75rem; }
.pf-anomaly-bad { color: #C62828; font-weight: 600; }
.pf-anomaly-off { color: #9e9e9e; text-decoration: line-through; }
.pf-anomaly-table .pf-anomaly-actions { position: sticky; right: 0; background-color: #ffffff; box-shadow: -3px 0 4px -2px rgba(0, 0, 0, 0.12); }
.pf-anomaly-table th.pf-anomaly-actions { background-color: #f5f5f5; }
.pf-anomaly-table tr.pf-anomaly-on td.pf-anomaly-actions { background-color: #F1F8FF; }
.pf-anomaly-actions-row { display: flex; align-items: center; gap: 4px; }
.sales-funnel .pf-count { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background-color: rgba(0, 0, 0, 0.08); font-size: 0.75rem; font-weight: 600; line-height: 18px; vertical-align: middle; }

/* Activity waterfall (/jury/analytics). The chart and the table are two grids with the same columns
   (.awf-grid) — a label column, one per step and the Σ column — so every table value sits under its bar;
   both reserve a scrollbar gutter so they stay aligned while only the table scrolls. The chart's height
   must match WaterfallChartHeight in JuryAnalytics.razor (bars are placed in px). The table scrolls under
   the chart past its max height. */
.awf-body { display: flex; flex-direction: column; overflow-x: auto; }
.awf-chart { flex: none; min-width: 420px; overflow-y: hidden; scrollbar-gutter: stable; }
.awf-table-scroll { min-width: 420px; max-height: 320px; overflow-y: auto; scrollbar-gutter: stable; }
.awf-grid { display: grid; grid-template-columns: 96px repeat(3, minmax(64px, 1fr)) minmax(104px, 1.3fr); font-size: 0.875rem; color: #1a1a1a; }

/* Timeline over the step columns: milestones sit on the column edges (left 0% / 33% / 67% / 100%), each
   centered on its point. Label 20px + 14px gap puts the 16px dot's center at 42px, where the 2px line runs. */
.awf-timeline { grid-column: 2 / span 3; position: relative; height: 56px; }
.awf-timeline-line { position: absolute; left: 0; right: 0; top: 41px; height: 2px; background-color: #9e9e9e; }
.awf-milestone { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.awf-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background-color: var(--mud-palette-primary); }
/* Arrowhead just before a milestone's dot (8px from its center), centered on the line. */
.awf-arrow { position: absolute; top: 36px; right: calc(50% + 8px); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #9e9e9e; }
.awf-total-head { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 0.875rem; font-weight: 700; line-height: 1.25; padding: 0 8px 8px 12px; }
.awf-total-title { font-size: 1.125rem; }
.awf-col { position: relative; height: 150px; margin-top: 12px; background-color: #d6f4fd; }
.awf-col-first { border-top-left-radius: 0px; }
.awf-col-last { border-top-right-radius: 24px; }
.awf-col-dashed { border-left: 2px dashed #ffffff; }
.awf-col-total { margin-left: 4px; border-top-left-radius: 24px; border-top-right-radius: 24px; }
/* A narrow bar wraps its value onto two lines ("8,50" / "Hari") — WaterfallMinBarHeight leaves room. */
.awf-bar { position: absolute; left: 50%; transform: translateX(-50%); width: 72%; max-width: 72px; display: flex; align-items: center; justify-content: center; padding: 2px; overflow: hidden; border-radius: 12px 12px 0 0; background-color: var(--mud-palette-primary); color: #ffffff; font-size: 0.75rem; font-weight: 700; line-height: 1.15; text-align: center; }
.awf-cell { position: relative; padding: 10px 8px; text-align: center; background-color: #ffffff; border-right: 1px solid #9e9e9e; border-bottom: 1px solid #9e9e9e; }
.awf-first { border-top: 1px solid #9e9e9e; }
.awf-label { display: flex; align-items: center; justify-content: space-between; gap: 4px; text-align: left; border-left: 1px solid #9e9e9e; }
.awf-sor { background-color: #e0e0e0; }
.awf-pin { position: sticky; top: 0; z-index: 2; }
.awf-toggle { cursor: pointer; user-select: none; }
.awf-toggle:hover { background-color: #d5d5d5; }
.awf-area-label { padding-left: 12px; font-size: 0.8125rem; overflow-wrap: break-word; }
/* The picked sales' comparison row, under their area: indented a step further, tinted blue, with its profile count. */
.awf-sales { background-color: #f5f9ff; }
.awf-sales-label { justify-content: flex-start; padding-left: 20px; font-size: 0.8125rem; background-color: #f5f9ff; color: var(--mud-palette-primary); flex-wrap: wrap; }
.awf-sales-name { overflow-wrap: anywhere; }
.awf-sales-n { width: 100%; color: #757575; font-size: 0.75rem; font-weight: 400; }
/* The chart's "All Area" label cell, beside the bars: as tall as the chart, grey like the SOR rows below. */
.awf-all-cell { position: relative; display: flex; align-items: center; justify-content: center; height: 150px; margin-top: 12px; padding: 0 8px; box-sizing: border-box; text-align: center; border: 1px solid #9e9e9e; border-bottom: none; border-top-left-radius: 24px; background-color: #e0e0e0; }
/* A row name that picks what the box plot shows; the picked one gets a primary bar and bold text. */
.awf-select { cursor: pointer; user-select: none; }
.awf-select:hover { text-decoration: underline; }
.awf-selected { box-shadow: inset 4px 0 0 var(--mud-palette-primary); font-weight: 700; color: var(--mud-palette-primary); }
/* An SOR row's own expand/collapse control, separate from the name. */
.awf-chevron { display: inline-flex; align-items: center; justify-content: center; margin: -4px -4px -4px 0; padding: 2px; border-radius: 4px; color: #1a1a1a; cursor: pointer; }
.awf-chevron:hover { background-color: rgba(0, 0, 0, 0.08); }

/* Participant tier pill (participant leaderboard, Main Mission tab; ParticipantTiers): the tier's emblem on the
   left of a rounded gradient pill with its name — colors matched to the tier badges. */
.tier-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 112px; box-sizing: border-box; height: 28px; padding: 0 14px 0 4px; border-radius: 999px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); color: #ffffff; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); white-space: nowrap; }
.tier-pill img { flex-shrink: 0; width: 24px; height: 24px; object-fit: contain; }
.tier-starter { background-image: linear-gradient(90deg, #E9A35F 0%, #B6612C 100%); }
.tier-rising { background-image: linear-gradient(90deg, #E2E7F0 0%, #90A3C2 40%, #3E5A8C 100%); }
.tier-pro { background-image: linear-gradient(90deg, #FAD36A 0%, #E99A13 100%); }
.tier-elite { background-image: linear-gradient(90deg, #D21FD8 0%, #6B0FA0 100%); }
.tier-legend { background-image: linear-gradient(90deg, #7FF5E8 0%, #22D3BE 60%, #12B8A6 100%); color: #0d0d0d; text-shadow: none; }

.bg-top1 {
    background-color: #75E4FF !important;
}

.bg-top2 {
    background-color: #B8F1FF !important;
}

.bg-top3 {
    background-color: #E6FAFF !important;
}

/* !important: app.css loads before MudBlazor.min.css in App.razor's <head>, and MudBlazor's own
   .mud-typography-body2 rule sets font-size at the same specificity — on an equal-specificity tie
   the later stylesheet wins, so without this these were being silently overridden back to 14px. */
.rank-text-1 {
    font-size: 1.5em !important;
}

.rank-text-2 {
    font-size: 1.3em !important;
}

.rank-text-3 {
    font-size: 1.1em !important;
}

body, html {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

code, pre, kbd, samp, .font-mono, .mud-code-content {
    font-family: 'Geist Mono', SFMono-Regular, Consolas, monospace !important;
}
.pac-container {
    z-index: 20000 !important;
}

.stage-card-clickable {
    cursor: pointer;
    /* !important: app.css loads before MudBlazor.min.css in App.razor's <head>, and MudBlazor's
       own .mud-paper rule sets "transition: box-shadow 300ms ..." at the same specificity — on
       an equal-specificity tie the later stylesheet wins, so without this the 200ms all-property
       transition below gets silently replaced by MudBlazor's 300ms box-shadow-only one. */
    transition: all 0.2s ease-in-out !important;
    container-type: inline-size;
}

.stage-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* MudNumericField has no Color parameter in the installed MudBlazor version (only
   AdornmentColor), and its disabled state hard-codes text/label color to
   --mud-palette-text-disabled regardless — so the read-only "Konversi ke Gas" fields need a
   direct override to show warning-colored text. Global (not scoped .razor.css): MudNumericField
   renders its own internal markup, which never receives the component's CSS-isolation scope
   attribute, so a scoped selector can't reach it. */
.conversion-field-warning .mud-input.mud-disabled,
.conversion-field-warning .mud-input-label-inputcontrol.mud-disabled {
    color: var(--mud-palette-warning) !important;
}

/* ExampleInfoTooltip: MudTooltip's default look (dark bubble, 4px/8px padding) is meant for
   short one-line text — override it to match ExampleInfoBox's light-blue card style instead. */
.mud-tooltip.example-info-tooltip {
    background-color: #D4E8FF !important;
    border: 1px solid var(--mud-palette-primary-lighten);
    border-radius: var(--mud-default-borderradius);
    padding: 12px !important;
}

/* MaskedTextField's "Disabled" state is implemented via ReadOnly, not MudTextField's own Disabled
   param — Disabled would grey out AND disable the visibility-toggle adornment button, making it
   unusable in read-only views like the jury inspect dialog. This reproduces the disabled look by
   hand (global, not scoped .razor.css, since MudInput renders outside this component's own CSS
   scope) while leaving the adornment button itself fully interactive. */
.masked-field-disabled .mud-input-slot,
.masked-field-disabled .mud-input-label-inputcontrol {
    color: var(--mud-palette-text-disabled) !important;
    -webkit-text-fill-color: var(--mud-palette-text-disabled);
}

.masked-field-disabled .mud-input-slot {
    cursor: default;
}

.masked-field-disabled .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.table-head-bordered th {
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-table-lines);
}

/* Grand Prize section: two reward cards where hovering one brings it into focus (full size/clarity)
   and pushes the other out of focus (shrunk + blurred), rather than showing both at equal weight. */
.grand-prize-focus-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 100%;
}

.grand-prize-card {
    display: flex;
    flex: 1 1 320px;
    /* Flex items default to min-width:auto, which refuses to shrink below the content's own
       intrinsic width — with the accordion gallery and body text inside, that was wider than the
       shrunk (unfocused) share of the row, so the row overflowed sideways instead of compressing. */
    min-width: 0;
    max-width: 620px;
    transition: flex-grow 0.5s ease, filter 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
    transform-origin: center;
}

/* .grand-prize-card is itself a flex container around its one child (the card's content) — once
   flex-grow gives it more width than that content needs, the leftover space defaults to sitting on
   the right (flex-start). Hadiah Sales sits on the LEFT of the row, so that leftover space showed
   up as a gap between its visible content and Hadiah Area next to it — flex-end closes that gap. */
.grand-prize-card--sales {
    justify-content: flex-end;
}

.grand-prize-card--focused {
/*    flex-grow: 1.75;*/
    filter: none;
    transform: scale(1);
    opacity: 1;
    z-index: 1;
}

.grand-prize-card--unfocused {
/*    flex-grow: 0.8;*/
    filter: blur(2.5px);
    transform: scale(0.94);
    opacity: 0.8;
}

.grand-prize-subcard {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Clamps the accordion gallery to its intended row height on desktop. Below 520px,
   AccordionGallery switches itself to a vertical stack of panels (see its own media query) that
   needs much more total height than one row does — capping it here as well would clip the lower
   panels, so the cap is lifted and the stack is left to size to its own content instead. */
.grand-prize-gallery-wrap {
    max-height: 160px;
    overflow: hidden;
}

@media (max-width: 520px) {
    .grand-prize-gallery-wrap {
        max-height: none;
    }
}

@media (max-width: 900px) {
    .grand-prize-card,
    .grand-prize-card--focused,
    .grand-prize-card--unfocused {
        flex-grow: 1;
        filter: none;
        transform: none;
        opacity: 1;
    }
}

/* Label/value tables (jury Content + Raw submission views). Each is its own size container, so the
   switch depends on the panel's real width (not the screen's): once it's too narrow for the fixed
   label column (long labels like "Doc kontrak langganan/pembelian produk" run ~350px un-wrapped) plus
   a readable value, every row stacks — label on top, value beneath — instead
   of overflowing into a horizontal scroll. Needs !important: the label cells carry inline styles, and
   MudBlazor's own stylesheet loads after this one and wins equal-specificity ties on display/width. */
.kv-table {
    container-type: inline-size;
}

@container (max-width: 560px) {
    .kv-table table,
    .kv-table tbody,
    .kv-table tr,
    .kv-table td {
        display: block !important;
        width: 100% !important;
    }

    .kv-table colgroup {
        display: none !important;
    }

    .kv-table td.kv-label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .kv-table td.kv-value {
        padding-top: 2px !important;
    }
}

/* Participant dashboard cards. Each card holds an empty .dash-card__link whose ::after stretches
   over the whole card (the card being the positioned ancestor), so the entire card is one native
   link — keyboard focusable, middle/right-clickable — without wrapping the MudPaper in an anchor
   and disturbing the equal-height layout its h-100 depends on. */

/* Working time distribution (/jury/analytics): a vertical box plot per milestone on a shared day axis
   (0 at the bottom), with every profile drawn as a dot over its box. Heights are percentages of the plot
   (BoxX in JuryAnalytics.razor), so it fits any size; the dashed line is where the axis turns compressed
   (past 30 days). The y-axis column and the plot share the plot's 300px height. */
.wtd { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 300px auto auto; column-gap: 8px; margin-top: 24px; padding-right: 20px; font-size: 0.875rem; color: #1a1a1a; }
.wtd-yaxis { position: relative; border-right: 1px solid #9e9e9e; }
.wtd-yunit { position: absolute; top: -22px; right: 6px; color: #757575; font-size: 0.75rem; }
.wtd-ytick { position: absolute; right: 0; width: 5px; border-top: 1px solid #9e9e9e; }
.wtd-ytick span { position: absolute; right: 9px; top: 0; transform: translateY(-50%); color: #757575; font-size: 0.75rem; white-space: nowrap; }
.wtd-plot { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #9e9e9e; }
.wtd-cat { position: relative; }
.wtd-empty { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); color: #9e9e9e; font-size: 0.8125rem; white-space: nowrap; }
.wtd-whisker { position: absolute; left: 50%; border-left: 1.5px dashed #424242; }
.wtd-cap { position: absolute; left: 35%; width: 30%; border-top: 1.5px solid #424242; }
.wtd-box { position: absolute; left: 25%; width: 50%; min-height: 3px; box-sizing: border-box; border: 1px solid #1a1a1a; background-color: var(--mud-palette-primary); }
.wtd-median { position: absolute; left: 25%; width: 50%; height: 4px; margin-bottom: -2px; background-color: #1a1a1a; }
.wtd-mean { position: absolute; left: 50%; z-index: 3; transform: translate(-50%, 50%); color: #ffffff; font-size: 1.1rem; font-weight: 700; line-height: 1; text-shadow: 0 0 2px #000000, 0 0 2px #000000; cursor: help; }
.wtd-dot { position: absolute; z-index: 2; width: 9px; height: 9px; box-sizing: border-box; transform: translate(-50%, 50%); border-radius: 50%; background-color: #E5404D; cursor: help; }
.wtd-dot-outlier { border: 2px solid #E5404D; background-color: #ffffff; }
.wtd-xaxis { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; padding-top: 2px; }
/* Under the plot, the diagram's timeline: a milestone on each column edge (label, then the dot on the line), an
   arrowhead pointing into each from the one before. Label 18px + 6px gap puts the 12px dot's center at 30px. */
.wtd-timeline { position: relative; height: 40px; margin-top: 10px; }
.wtd-timeline-line { position: absolute; left: 0; right: 0; top: 29px; height: 2px; background-color: #9e9e9e; }
.wtd-milestone { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; line-height: 18px; white-space: nowrap; }
.wtd-tl-dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background-color: var(--mud-palette-primary); }
.wtd-tl-arrow { position: absolute; top: 25px; right: calc(50% + 6px); width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #9e9e9e; }
.wtd-xlabel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wtd-n { color: #757575; font-size: 0.75rem; }
.wtd-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; color: #616161; font-size: 0.8125rem; }
.wtd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wtd-legend i { display: inline-block; font-style: normal; }
.wtd-key-box { width: 18px; height: 12px; box-sizing: border-box; border: 1px solid #1a1a1a; background-color: var(--mud-palette-primary); }
.wtd-key-median { width: 18px; height: 4px; background-color: #1a1a1a; }
.wtd-key-mean { color: #ffffff; font-weight: 700; text-shadow: 0 0 2px #000000, 0 0 2px #000000; }
.wtd-key-whisker { width: 0; height: 14px; border-left: 1.5px dashed #424242; }
.wtd-key-dot { width: 9px; height: 9px; border-radius: 50%; background-color: #E5404D; }
.wtd-key-outlier { width: 9px; height: 9px; box-sizing: border-box; border: 2px solid #E5404D; border-radius: 50%; }

/* Activity heatmap stage names (/jury/analytics): a wider gap before the grid, and one line each from md up
   (the label column is as wide as the longest name). Below md they wrap, so the heatmap still fits a phone. */
.hm-label { display: flex; align-items: center; gap: 8px; padding-right: 20px; line-height: 1.25; }
@media (min-width: 960px) {
    .hm-label { white-space: nowrap; }
}
/* The stage card's badge in front of each name (number, or a star for a bonus mission), and an empty
   one of the same width in front of Σ Monthly Activity so the names line up. */
.hm-badge,
.hm-badge-space { flex-shrink: 0; width: 24px !important; height: 24px !important; }
.hm-badge { font-size: 12px !important; font-weight: 500; }
/* The activity bento's header label before the stage filters, and the activity graph's inner panel under the heatmap. */
.hm-param-label { color: #616161; font-size: 0.9375rem; white-space: nowrap; }
.hm-graph-panel { margin-top: 24px; }

/* The health check legend's pulse (.hc-pulse-a/-b): an overlay fading in and out three times (the leaderboard's
   "Ranking Saya" timing). Two identical animations, swapped on every pick, so a repeat pick restarts it. */
@keyframes awf-pulse-a { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes awf-pulse-b { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* The analytics page selector (/jury/analytics): a divider above the first choice of each section — all areas,
   the SORs, the areas, the sales. */
.mud-list-item:has(.scope-break) { border-top: 1px solid var(--mud-palette-divider); }

/* Working time diagram bento (/jury/analytics; Figma 670:822): white panels with a soft drop shadow inside the
   card — the diagram and the distribution (or its prompt) side by side from md up, stacked below; the data
   health check spans the full width under them. */
.wtb-row { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 960px) {
    .wtb-row { flex-direction: row; align-items: stretch; }
    .wtb-row > .wtb-panel { flex: 1 1 0; min-width: 0; }
}
.wtb-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; box-sizing: border-box; border-radius: 6px; background-color: #ffffff; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.wtb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wtb-scope { font-size: 0.875rem; font-weight: 700; color: var(--mud-palette-primary); overflow-wrap: anywhere; }
.wtb-prompt { align-items: center; justify-content: center; gap: 16px; padding: 24px 32px; }
/* The mascot, cropped to a circle the way the design frames it. */
.wtb-mascot { position: relative; flex-shrink: 0; width: 100px; height: 101px; overflow: hidden; border-radius: 95px; }
.wtb-mascot img { position: absolute; left: -30.2%; top: -7.49%; width: 149.87%; height: 178.3%; max-width: none; }
/* Callouts: the info (blue) prompt and the warning (orange) note, each with a link on the right. */
.wtb-callout { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 8px 12px; box-sizing: border-box; border: 1px solid; border-radius: 6px; }
.wtb-callout-info { border-color: #0073FE; background-color: rgba(0, 115, 254, 0.1); color: #0073FE; }
.wtb-callout-warn { border-color: #F2991A; background-color: rgba(254, 152, 0, 0.1); color: #F2991A; }
.wtb-callout-body { display: flex; align-items: flex-start; gap: 8px; }
.wtb-callout-body p { margin: 0; font-size: 0.8125rem; line-height: 1.45; text-align: justify; }
.wtb-callout-icon { flex-shrink: 0; margin-top: 1px; font-size: 1rem !important; }
.wtb-callout-link { align-self: flex-end; padding: 0; border: none; background: none; color: inherit; font: inherit; font-size: 0.8125rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* An opened drawer's header: what it shows (a blue pill) and its close button. */
.wtb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wtb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid #0073FE; border-radius: 999px; background-color: rgba(0, 115, 254, 0.1); color: #0073FE; font-size: 0.75rem; line-height: 1.3; }
.wtb-health { margin-top: 24px; }

/* Data health check: the donut and its legend, beside the table of one category's profiles. A slice or
   legend entry picks the category; the entry then pulses (the diagram rows' pulse, on the entry). */
.hc-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 40px; }
.hc-summary { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 16px; }
.hc-donut { position: relative; width: 170px; height: 170px; }
.hc-donut svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hc-slice { cursor: pointer; transition: stroke-width 0.15s ease, opacity 0.15s ease; }
.hc-slice:hover { opacity: 0.85; }
.hc-slice-on { stroke-width: 22px; }
.hc-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1a1a1a; font-size: 0.875rem; pointer-events: none; }
.hc-donut-total { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.hc-legend { align-self: stretch; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; color: #1a1a1a; font-size: 0.8125rem; }
.hc-legend li { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.hc-legend li:hover { background-color: #f5f5f5; }
.hc-legend i { flex-shrink: 0; width: 10px; height: 10px; }
.hc-legend-on { font-weight: 700; }
.hc-pulse-a::after,
.hc-pulse-b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: rgba(0, 115, 254, 0.3); opacity: 0; pointer-events: none; }
.hc-pulse-a::after { animation: awf-pulse-a 0.9s ease-in-out 3; }
.hc-pulse-b::after { animation: awf-pulse-b 0.9s ease-in-out 3; }
.hc-detail { flex: 1 1 420px; min-width: 0; }
.hc-table-scroll { max-height: 320px; overflow: auto; border: 1px solid #bdbdbd; border-radius: 4px; }
.hc-table { width: 100%; border-collapse: separate; border-spacing: 0; color: #1a1a1a; font-size: 0.75rem; }
.hc-table th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; border-bottom: 1px solid #bdbdbd; background-color: #ffffff; font-weight: 700; text-align: left; white-space: nowrap; }
.hc-table td { padding: 6px 10px; border-bottom: 1px solid #eeeeee; vertical-align: middle; white-space: nowrap; }
.hc-table td:last-child { min-width: 160px; white-space: normal; }
.hc-flag { background-color: #F8C4C7; }
.hc-sub { color: #757575; font-size: 0.6875rem; }

/* Control center (/jury/trigger). */
/* Control center: the Data Profile new rule bento — inner panels (the working time bento's panel look), the rule and the
   health check side by side from md up, the profiles full width under them. */
.cc-rule-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 960px) {
    .cc-rule-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.cc-panel { padding: 20px; border-radius: 6px; background-color: #ffffff; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.cc-panel-wide { grid-column: 1 / -1; }
.trigger-list { margin: 0; padding-left: 20px; font-size: 0.875rem; line-height: 1.5; }
.trigger-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background-color: #f5f9ff; color: var(--mud-palette-primary); }
.trigger-status > div { color: #1a1a1a; }
.trigger-status-on { background-color: #edf7ee; color: var(--mud-palette-success); }
.trigger-status-sub { color: #757575; font-size: 0.8125rem; }
.trigger-health { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eeeeee; font-size: 0.875rem; }
.trigger-health:last-child { border-bottom: none; }
.trigger-count { min-width: 36px; padding: 2px 10px; border-radius: 999px; background-color: #edf7ee; color: var(--mud-palette-success); font-weight: 700; text-align: center; }
.trigger-count-warn { background-color: #fff4e5; color: #e65100; }
/* Revoke profile dialog (jury inspect page): what goes with the profile, one line each. */
.revoke-summary { width: 100%; padding: 12px 16px; box-sizing: border-box; border-radius: 10px; background-color: #FEF2F2; text-align: left; }
.revoke-summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 0.875rem; }
.revoke-summary b { color: #B91C1C; }
.revoke-summary-sub { padding-top: 0 !important; color: #757575; font-size: 0.8125rem !important; }

/* Duplicate profile analysis (jury submissions page, Duplicate view): each group's matches as sub-rows inside one cell — name on the left,
   its similarity in a fixed column on the right (the header uses the same grid, so the column lines up). */
.dup-table .mud-table-cell { vertical-align: top; }
.dup-subrow { display: grid; grid-template-columns: 1fr 88px; align-items: start; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #e0e0e0; }
.dup-subrow:last-child { border-bottom: none; }
.dup-subrow-head { padding: 0; border-bottom: none; font-weight: inherit; }
.dup-sim { justify-self: end; font-weight: 700; color: #616161; }
.dup-sim-exact { color: #c62828; }
.dup-sim-high { color: #e65100; }
/* The group's first profile: the same vertical padding as a sub-row, the chevron centered on the name's line. */
.dup-first { padding: 6px 0; }
.dup-first-line { display: flex; align-items: center; gap: 6px; }
.dup-first-line .mud-icon-root { flex-shrink: 0; }
.dup-first-detail { padding-left: 26px; }
/* A matching profile's name with its eye (inspect) button beside it, like the first profile's line. */
.dup-name-line { display: flex; align-items: center; gap: 6px; }
.dup-inspect { display: inline-flex; flex-shrink: 0; }
.dup-inspect .mud-icon-button { padding: 2px; }
.dup-detail { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; color: #757575; font-size: 0.8125rem; }
.dup-address { margin-top: 2px; color: #616161; font-size: 0.8125rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dup-address-none { font-style: italic; color: #9e9e9e; }
.dup-check { display: inline-flex; flex-shrink: 0; margin: -6px 0 -6px -8px; }
/* The duplicate analysis's bulk removal: the selection bar over the table, and the review (participants, each one's recap email). */
.duprm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; padding: 10px 16px; border-radius: 12px; background: #FFEBEE; color: #B71C1C; }
.duprm-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.duprm-summary > span { padding: 4px 12px; border-radius: 999px; background: #F1F5F9; font-size: 0.875rem; }
.duprm-list { display: flex; flex-direction: column; border: 1px solid #E2E8F0; border-radius: 12px; }
.duprm-participant { padding: 12px 16px; border-top: 1px solid #E2E8F0; }
.duprm-participant:first-child { border-top: none; }
.duprm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.duprm-who { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.duprm-who .text-muted { font-size: 0.8125rem; }
.duprm-count { font-size: 0.875rem; font-weight: 600; color: #B71C1C; white-space: nowrap; }
.duprm-subject { margin: 12px 0 6px; font-size: 0.8125rem; color: #475569; }
.duprm-preview { display: block; width: 100%; height: 620px; border: 1px solid #E2E8F0; border-radius: 12px; background: #F8FAFC; }

/* The "No PIC" analysis (NoPicProfilesTable): which of the PIC's name, email and phone each profile is missing. */
.nopic-filters { gap: 0 8px; }
.nopic-table .nopic-col { text-align: center; white-space: nowrap; }
.nopic-sub { color: #757575; font-size: 0.8125rem; }
.nopic-missing { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 5px; border-radius: 999px; background-color: #fdecea; color: #c62828; font-size: 0.75rem; font-weight: 700; }
.nopic-ok { color: #2e7d32; }

/* The "Invalid PIC" view (InvalidPicTable): suggestion chips of frequent PIC names, hinted ones tinted. */
.ipic-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ipic-suggestion { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #e0e0e0; border-radius: 999px; background-color: #ffffff; font: inherit; font-size: 0.8125rem; color: #1a1a1a; cursor: pointer; }
.ipic-suggestion:hover { border-color: var(--mud-palette-primary); background-color: #f5f9ff; }
.ipic-suggestion-hint { border-color: #ffcdd2; background-color: #fff8f7; }
.ipic-suggestion-name { font-weight: 700; }
.ipic-suggestion-count { color: #616161; }
.ipic-hint { padding: 0 6px; border-radius: 999px; background-color: #ffebee; color: #c62828; font-size: 0.6875rem; font-weight: 700; }
.ipic-slider { min-width: 260px; max-width: 360px; flex: 1 1 260px; }

/* Area poster campaign (Control Center): the live preview beside its controls; the batch renders off-screen. */
.poster-tool { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.poster-preview { flex-shrink: 0; width: 300px; max-width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15); }
.poster-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 16px; }
.poster-offscreen { position: fixed; top: 0; left: -12000px; width: 270px; pointer-events: none; }
.invite-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.invite-stat { padding: 12px 14px; border-radius: 12px; background-color: #f8fafc; }
.invite-stat-label { color: #757575; font-size: 0.8125rem; }
.invite-stat-value { font-size: 1.25rem; font-weight: 700; color: #1a1a1a; }
.invite-link { color: var(--mud-palette-primary); word-break: break-all; font-weight: 600; }
.trigger-table .mud-table-cell { white-space: nowrap; padding-top: 4px; padding-bottom: 4px; }
.trigger-table .trigger-cell-clip { max-width: 240px; }
.trigger-table .trigger-cell-clip > span { display: block; overflow: hidden; text-overflow: ellipsis; }

/* The Corrective Act simulation (CorrectiveActSimulation). */
.ca-summary { display: flex; flex-wrap: wrap; gap: 12px; }
.ca-summary > div { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 10px 16px; border-radius: 6px; background-color: #f5f7fa; }
.ca-summary b { font-size: 1.375rem; color: #1a1a1a; }
.ca-summary span { font-size: 0.75rem; color: #616161; }
.ca-table .ca-affected > td { background-color: #fff8f6; }
.ca-sub { display: block; color: #757575; font-size: 0.75rem; }
.ca-rank, .ca-tiers { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ca-arrow { margin: 0 4px; color: #9e9e9e; }
.ca-down { color: #c62828; }
.ca-up { color: #2e7d32; }
.ca-profiles { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.ca-tier { display: inline-flex; align-items: center; height: 20px; padding: 0 10px; border-radius: 999px; color: #ffffff; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
.ca-tier-none { background-color: #eeeeee; color: #9e9e9e; text-shadow: none; }
.ca-child { padding: 4px 16px 10px 48px !important; background-color: #fafafa; }
.ca-profile { display: grid; grid-template-columns: minmax(160px, 1fr) auto auto auto auto; align-items: center; gap: 4px 16px; padding: 4px 0; border-bottom: 1px dashed #e0e0e0; }
.ca-profile:last-child { border-bottom: none; }
.ca-kk0 { font-size: 0.75rem; color: #616161; white-space: nowrap; }
.ca-kk0-pending { color: #1565c0; font-weight: 700; }
.ca-chart { width: 100%; overflow-x: auto; }
.ca-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.8125rem; }
.ca-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ca-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* Potential Customers: the toolbar (Add, search, sort, filter) and the pager under the list. On a phone the toolbar wraps —
   Add and search on the first row, sort and filter side by side under them. */
.pc-toolbar { flex-wrap: nowrap; }
.pc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 20px 0 8px 31px; }
.pc-pager__size { flex: 0 0 auto; width: 110px; }
@media (max-width: 599.98px) {
    .pc-toolbar { flex-wrap: wrap !important; }
    .pc-toolbar .pc-toolbar__search { flex: 1 1 calc(100% - 96px) !important; }
    .pc-toolbar > .mud-select { flex: 1 1 calc(50% - 4px) !important; min-width: 0; }
    .pc-toolbar .pc-toolbar__select { min-width: 0 !important; max-width: none !important; }
    .pc-pager { justify-content: center; margin-left: 0; }
}

/* The participant questionnaire: the dashboard's Kuisioner panel, and the popup in the bottom-right corner. */
.kq-button { width: 100%; height: 46px; border-width: 2px !important; border-radius: 10px !important; font-weight: 600; letter-spacing: 0.5px; }
.kq-panel { display: flex; align-items: center; gap: 20px; }
.kq-panel-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.kq-panel-text p { margin: 0; font-size: 0.95rem; line-height: 1.45; text-align: justify; color: #4b5563; }
.kq-panel-qr { flex: none; width: 150px; height: 150px; }
.kq-popup { position: fixed; right: 20px; bottom: 20px; z-index: 1300; display: flex; align-items: center; gap: 20px; width: 540px; max-width: calc(100vw - 32px);
    padding: 22px 22px 22px 24px; border: 2px solid var(--mud-palette-primary); border-radius: 16px; background-color: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); animation: kq-in 0.35s ease-out; }
.kq-close { position: absolute !important; top: 8px; right: 8px; }
.kq-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.kq-title { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.kq-text { margin: 0; font-size: 1.02rem; line-height: 1.4; text-align: justify; color: #4b5563; }
.kq-body .kq-button { margin-top: 10px; }
.kq-qr { flex: none; width: 210px; height: 210px; margin-top: 18px; }
@keyframes kq-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
    .kq-popup { right: 16px; bottom: 16px; gap: 12px; padding: 18px 16px; }
    .kq-title { font-size: 1.2rem; padding-right: 28px; }
    .kq-text { font-size: 0.9rem; text-align: left; }
    .kq-qr { width: 110px; height: 110px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kq-popup { animation: none; }
}

/* The activity graph: the year pager, the legend, and each PJBG-start segment's hover tooltip (CSS only). */
.ag-year { display: inline-flex; align-items: center; gap: 2px; font-size: 0.875rem; font-weight: 700; color: #1a1a1a; }
.ag-year > span { min-width: 40px; text-align: center; }
.ag-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin-top: 8px; font-size: 0.75rem; color: #616161; }
.ag-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ag-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ag-legend .ag-legend-line { width: 16px; height: 2px; border-radius: 1px; background-color: #e53935; }
.ag-legend .ag-legend-group { font-weight: 700; color: #424242; }
.ag-plot { position: relative; }
.ag-plot > svg { display: block; }
.ag-seg { position: absolute; }
.ag-seg:hover { outline: 1.5px solid #1f2937; }
.ag-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 1; padding: 3px 8px; border-radius: 6px; background-color: #1f2937; color: #ffffff; font-size: 0.75rem; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.ag-tip.ag-tip-start { left: 0; transform: none; }
.ag-tip.ag-tip-end { left: auto; right: 0; transform: none; }
.ag-seg:hover .ag-tip { display: block; }

/* /jury/analytics: a card's title (CardTitle) — its icon, yellow on a blue disc, then the name a little larger than
   subtitle2. The small one heads a panel inside a card (the activity graph). */
.an-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.an-title-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: #0073FE; color: #FFD000; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); }
.an-title-icon .mud-icon-root { width: 24px; height: 24px; font-size: 24px; }
.an-title .an-title-text { font-size: clamp(1rem, 1vw + 0.7rem, 1.125rem); line-height: 1.3; }
.an-title-sm { gap: 10px; }
.an-title-sm .an-title-icon { width: 30px; height: 30px; }
.an-title-sm .an-title-icon .mud-icon-root { width: 19px; height: 19px; font-size: 19px; }
.an-title-sm .an-title-text { font-size: 1rem; }

/* /jury/analytics: the page's tabs (MudTabs as a header only; the cards below follow the open tab). */
.an-tabs.mud-tabs { border-radius: 12px; overflow: hidden; }
.an-tabs .mud-tab { text-transform: none; font-size: 0.9375rem; font-weight: 600; letter-spacing: normal; }
.an-tabs .mud-tabs-panels { display: none; }
@media (max-width: 600px) { .an-tabs .mud-tab { min-width: 0; padding: 6px 12px; font-size: 0.875rem; } }

/* /jury/analytics Capel tab: the sector heatmap — sector names slanted over their columns, row names indented by level,
   the picked row's name tinted, an opened SOR on a backdrop with its areas on a second, white one inside it (both
   subgrids: the negative margin and equal padding widen each backdrop without moving its cells off the page grid's
   columns; the grid's own padding leaves room for them) — and the picked row's pie beside its legend. A slice and its
   legend row light up together on hover, the slice's tooltip showing (:has, one selector per sector: 0–19, its place
   in SektorIndustri.All), the other slices fading. */
.sd-scroll { overflow-x: auto; }
.sd-grid { display: grid; align-items: center; min-width: min-content; padding: 0 16px; }
.sd-head { position: relative; align-self: stretch; height: 92px; }
.sd-head > span { position: absolute; left: calc(50% - 4px); bottom: 2px; transform-origin: 0 100%; transform: rotate(-45deg); white-space: nowrap; font-size: 0.75rem; line-height: 1.2; color: #424242; }
.sd-head-total { justify-self: center; align-self: end; font-size: 0.75rem; font-weight: 700; color: #1a1a1a; }
.sd-group, .sd-areas { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 8px; }
.sd-group { margin: 0 -14px; padding: 8px 14px; border-radius: 12px; background-color: #eef2f7; }
.sd-areas { margin: 0 -7px; padding: 7px; border-radius: 9px; background-color: #ffffff; box-shadow: 0 0 0 1px #dde4ee; }
.sd-label { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sd-label.sd-level-1 { padding-left: 16px; }
.sd-label.sd-level-2 { padding-left: 32px; }
/* A participant's own row (their analytics), under their area. */
.sd-label.sd-level-3 { padding-left: 48px; }
.sd-toggle-space { flex: none; width: 30px; }
.sd-name { padding: 2px 10px; border: 0; border-radius: 11px; background: none; font: inherit; font-size: 0.875rem; line-height: 1.25; color: #1a1a1a; text-align: left; cursor: pointer; }
.sd-name:hover { background-color: rgba(0, 115, 254, 0.08); }
.sd-level-0 .sd-name { font-weight: 700; }
.sd-picked .sd-name { background-color: rgba(0, 115, 254, 0.14); color: #0073FE; font-weight: 700; }
.sd-pie-panel { margin-top: 24px; }
.sd-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; }
.sd-pie-figure { position: relative; flex: none; width: 240px; max-width: 100%; }
.sd-pie-chart { display: block; width: 100%; height: auto; }
.sd-pie-tip { display: none; position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 6px; background-color: #1f2937; color: #ffffff; font-size: 0.75rem; line-height: 1.4; text-align: center; white-space: nowrap; pointer-events: none; }
.sd-pie-tip > b, .sd-pie-tip > span { display: block; }
.sd-pie-tip > b { font-weight: 600; }
.sd-legend { flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: #1a1a1a; }
.sd-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 3.5em 5.5em; align-items: center; column-gap: 10px; padding: 4px 8px; border-radius: 6px; }
.sd-legend li > i { width: 12px; height: 12px; border-radius: 3px; }
.sd-legend-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-legend-pct { text-align: right; color: #616161; font-variant-numeric: tabular-nums; }
.sd-wedge { transition: opacity 0.15s; }
.sd-pie:has(.sd-wedge:hover) .sd-wedge:not(:hover), .sd-pie:has(.sd-legend li:hover) .sd-wedge { opacity: 0.35; }
.sd-pie:has(.sd-legend li[data-slot="0"]:hover) .sd-wedge[data-slot="0"],
.sd-pie:has(.sd-legend li[data-slot="1"]:hover) .sd-wedge[data-slot="1"],
.sd-pie:has(.sd-legend li[data-slot="2"]:hover) .sd-wedge[data-slot="2"],
.sd-pie:has(.sd-legend li[data-slot="3"]:hover) .sd-wedge[data-slot="3"],
.sd-pie:has(.sd-legend li[data-slot="4"]:hover) .sd-wedge[data-slot="4"],
.sd-pie:has(.sd-legend li[data-slot="5"]:hover) .sd-wedge[data-slot="5"],
.sd-pie:has(.sd-legend li[data-slot="6"]:hover) .sd-wedge[data-slot="6"],
.sd-pie:has(.sd-legend li[data-slot="7"]:hover) .sd-wedge[data-slot="7"],
.sd-pie:has(.sd-legend li[data-slot="8"]:hover) .sd-wedge[data-slot="8"],
.sd-pie:has(.sd-legend li[data-slot="9"]:hover) .sd-wedge[data-slot="9"],
.sd-pie:has(.sd-legend li[data-slot="10"]:hover) .sd-wedge[data-slot="10"],
.sd-pie:has(.sd-legend li[data-slot="11"]:hover) .sd-wedge[data-slot="11"],
.sd-pie:has(.sd-legend li[data-slot="12"]:hover) .sd-wedge[data-slot="12"],
.sd-pie:has(.sd-legend li[data-slot="13"]:hover) .sd-wedge[data-slot="13"],
.sd-pie:has(.sd-legend li[data-slot="14"]:hover) .sd-wedge[data-slot="14"],
.sd-pie:has(.sd-legend li[data-slot="15"]:hover) .sd-wedge[data-slot="15"],
.sd-pie:has(.sd-legend li[data-slot="16"]:hover) .sd-wedge[data-slot="16"],
.sd-pie:has(.sd-legend li[data-slot="17"]:hover) .sd-wedge[data-slot="17"],
.sd-pie:has(.sd-legend li[data-slot="18"]:hover) .sd-wedge[data-slot="18"],
.sd-pie:has(.sd-legend li[data-slot="19"]:hover) .sd-wedge[data-slot="19"] { opacity: 1; }
.sd-pie:has(.sd-wedge[data-slot="0"]:hover) .sd-legend li[data-slot="0"],
.sd-pie:has(.sd-wedge[data-slot="1"]:hover) .sd-legend li[data-slot="1"],
.sd-pie:has(.sd-wedge[data-slot="2"]:hover) .sd-legend li[data-slot="2"],
.sd-pie:has(.sd-wedge[data-slot="3"]:hover) .sd-legend li[data-slot="3"],
.sd-pie:has(.sd-wedge[data-slot="4"]:hover) .sd-legend li[data-slot="4"],
.sd-pie:has(.sd-wedge[data-slot="5"]:hover) .sd-legend li[data-slot="5"],
.sd-pie:has(.sd-wedge[data-slot="6"]:hover) .sd-legend li[data-slot="6"],
.sd-pie:has(.sd-wedge[data-slot="7"]:hover) .sd-legend li[data-slot="7"],
.sd-pie:has(.sd-wedge[data-slot="8"]:hover) .sd-legend li[data-slot="8"],
.sd-pie:has(.sd-wedge[data-slot="9"]:hover) .sd-legend li[data-slot="9"],
.sd-pie:has(.sd-wedge[data-slot="10"]:hover) .sd-legend li[data-slot="10"],
.sd-pie:has(.sd-wedge[data-slot="11"]:hover) .sd-legend li[data-slot="11"],
.sd-pie:has(.sd-wedge[data-slot="12"]:hover) .sd-legend li[data-slot="12"],
.sd-pie:has(.sd-wedge[data-slot="13"]:hover) .sd-legend li[data-slot="13"],
.sd-pie:has(.sd-wedge[data-slot="14"]:hover) .sd-legend li[data-slot="14"],
.sd-pie:has(.sd-wedge[data-slot="15"]:hover) .sd-legend li[data-slot="15"],
.sd-pie:has(.sd-wedge[data-slot="16"]:hover) .sd-legend li[data-slot="16"],
.sd-pie:has(.sd-wedge[data-slot="17"]:hover) .sd-legend li[data-slot="17"],
.sd-pie:has(.sd-wedge[data-slot="18"]:hover) .sd-legend li[data-slot="18"],
.sd-pie:has(.sd-wedge[data-slot="19"]:hover) .sd-legend li[data-slot="19"], .sd-legend li:hover { background-color: #f1f5fb; }
.sd-pie-figure:has(.sd-wedge[data-slot="0"]:hover) .sd-pie-tip[data-slot="0"],
.sd-pie-figure:has(.sd-wedge[data-slot="1"]:hover) .sd-pie-tip[data-slot="1"],
.sd-pie-figure:has(.sd-wedge[data-slot="2"]:hover) .sd-pie-tip[data-slot="2"],
.sd-pie-figure:has(.sd-wedge[data-slot="3"]:hover) .sd-pie-tip[data-slot="3"],
.sd-pie-figure:has(.sd-wedge[data-slot="4"]:hover) .sd-pie-tip[data-slot="4"],
.sd-pie-figure:has(.sd-wedge[data-slot="5"]:hover) .sd-pie-tip[data-slot="5"],
.sd-pie-figure:has(.sd-wedge[data-slot="6"]:hover) .sd-pie-tip[data-slot="6"],
.sd-pie-figure:has(.sd-wedge[data-slot="7"]:hover) .sd-pie-tip[data-slot="7"],
.sd-pie-figure:has(.sd-wedge[data-slot="8"]:hover) .sd-pie-tip[data-slot="8"],
.sd-pie-figure:has(.sd-wedge[data-slot="9"]:hover) .sd-pie-tip[data-slot="9"],
.sd-pie-figure:has(.sd-wedge[data-slot="10"]:hover) .sd-pie-tip[data-slot="10"],
.sd-pie-figure:has(.sd-wedge[data-slot="11"]:hover) .sd-pie-tip[data-slot="11"],
.sd-pie-figure:has(.sd-wedge[data-slot="12"]:hover) .sd-pie-tip[data-slot="12"],
.sd-pie-figure:has(.sd-wedge[data-slot="13"]:hover) .sd-pie-tip[data-slot="13"],
.sd-pie-figure:has(.sd-wedge[data-slot="14"]:hover) .sd-pie-tip[data-slot="14"],
.sd-pie-figure:has(.sd-wedge[data-slot="15"]:hover) .sd-pie-tip[data-slot="15"],
.sd-pie-figure:has(.sd-wedge[data-slot="16"]:hover) .sd-pie-tip[data-slot="16"],
.sd-pie-figure:has(.sd-wedge[data-slot="17"]:hover) .sd-pie-tip[data-slot="17"],
.sd-pie-figure:has(.sd-wedge[data-slot="18"]:hover) .sd-pie-tip[data-slot="18"],
.sd-pie-figure:has(.sd-wedge[data-slot="19"]:hover) .sd-pie-tip[data-slot="19"] { display: block; }

/* /jury/participants: the centred columns — Area, Status, Total pts and Profiles, and in a participant's profiles Bonus
   missions and Points. A grid header is a flex row of the title and, at its right, the sort arrow: the title centred across
   the whole cell, the arrow kept at the right edge. The simple table's own rule (.mud-simple-table table * tr th) needs a
   second class to beat. */
.mud-data-grid .mud-table-cell.jp-center { text-align: center; }
.mud-data-grid .mud-table-cell.jp-center .column-header { position: relative; justify-content: center; }
.mud-data-grid .mud-table-cell.jp-center .column-header .sortable-column-header { width: auto; }
.mud-data-grid .mud-table-cell.jp-center .column-header .column-options { position: absolute; right: 0; }
.mud-simple-table tr > .jp-center { text-align: center; }