/* ============================================================
   My Teams — team bar widget (mw-tbw-*). Standalone, no scoped CSS.
   Surfaces/text/lines follow the MudBlazor palette (theme-adaptive);
   the euro accent is fixed (meaningful, matches the cashless pages).
   ============================================================ */
.mw-tbw {
    --mw-tbw-eur: #2bd4a1;
    --mw-tbw-warn: #f5a623;
    --mw-tbw-line: var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    --mw-tbw-surface: var(--mud-palette-surface, #fff);
    --mw-tbw-surface2: var(--mud-palette-background-grey, rgba(0, 0, 0, .04));
    --mw-tbw-ink: var(--mud-palette-text-primary, #1d1d1d);
    --mw-tbw-dim: var(--mud-palette-text-secondary, #6b7280);
    position: relative;
    display: inline-flex;
    margin-bottom: 10px;
}

/* ── strip (the trigger) ── */
.mw-tbw-strip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 5px 9px 5px 11px; border-radius: 10px; cursor: pointer;
    background: var(--mw-tbw-surface2); border: 1px solid var(--mw-tbw-line);
    transition: border-color .15s, background .15s; user-select: none;
}
.mw-tbw-strip:hover { border-color: color-mix(in srgb, var(--mw-tbw-eur) 55%, transparent); }
.mw-tbw-nm { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--mw-tbw-ink); }
.mw-tbw-lbl { font-size: 13px; font-weight: 600; color: var(--mw-tbw-ink); }
.mw-tbw-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; box-shadow: 0 0 0 3px rgba(127, 127, 127, .12); }
.mw-tbw-stack { display: inline-flex; }
.mw-tbw-stack .mw-tbw-dot { margin-left: -4px; box-shadow: 0 0 0 3px var(--mw-tbw-surface); }
.mw-tbw-stack .mw-tbw-dot:first-child { margin-left: 0; }
.mw-tbw-caret { display: flex; color: var(--mw-tbw-dim); transition: transform .2s; }
.mw-tbw-caret.open { transform: rotate(180deg); }

/* ── click-away scrim (under the popover, over the page) ── */
.mw-tbw-scrim { position: fixed; inset: 0; z-index: 1199; background: transparent; }

/* ── popover ── */
.mw-tbw-pop { width: 330px; max-width: 92vw; overflow: hidden; border-radius: 14px; }
.mw-tbw-pop-h {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px 9px;
    border-bottom: 1px solid var(--mw-tbw-line);
}
.mw-tbw-pop-h .t { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mw-tbw-dim); }
.mw-tbw-pop-h .tot { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--mw-tbw-eur); font-variant-numeric: tabular-nums; }

.mw-tbw-block { padding: 12px 14px; }
.mw-tbw-block + .mw-tbw-block { border-top: 1px solid var(--mw-tbw-line); }
.mw-tbw-block-top { display: flex; align-items: center; gap: 9px; }
.mw-tbw-block-top .nm { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--mw-tbw-ink); }
.mw-tbw-pill { margin-left: auto; font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mw-tbw-pill.ok { color: var(--mw-tbw-eur); background: color-mix(in srgb, var(--mw-tbw-eur) 16%, transparent); }
.mw-tbw-pill.warn { color: var(--mw-tbw-warn); background: color-mix(in srgb, var(--mw-tbw-warn) 16%, transparent); }
.mw-tbw-pill.loading { color: var(--mw-tbw-dim); background: var(--mw-tbw-surface2); }

.mw-tbw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 11px 0 12px; }
.mw-tbw-stats .s { background: var(--mw-tbw-surface2); border: 1px solid var(--mw-tbw-line); border-radius: 9px; padding: 7px 9px; }
.mw-tbw-stats .k { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mw-tbw-dim); }
.mw-tbw-stats .v { font-size: 14px; font-weight: 600; margin-top: 4px; color: var(--mw-tbw-ink); font-variant-numeric: tabular-nums; }
.mw-tbw-stats .v.eur { color: var(--mw-tbw-eur); }

.mw-tbw-empty { font-size: 12px; color: var(--mw-tbw-dim); line-height: 1.5; margin: 9px 0 11px; }
.mw-tbw-manage { margin-top: 2px; }