/* MwTeamScopeSelect (mw-ts-*) — standalone, no scoped CSS.
   The team-scope widget of the volunteer care page, ported from
   docs/mockups/volunteer-care-team-scope.html: a selected/total fraction activator opening a
   two-column dock on desktop ("Im Blick" pinned left, "Verfügbar" searchable right) and a
   bottom sheet on mobile (same structure top/bottom, permanent −/+ zones left). Tokens follow
   the mw-sco palette so the widget sits natively in the check-in toolbar. */

.mw-ts {
    --mw-ts-surface: hsl(240 12% 9%);
    --mw-ts-surface-elev: hsl(240 11% 11.5%);
    --mw-ts-surface-pop: hsl(240 11% 13.5%);
    --mw-ts-surface-hover: hsla(0 0% 100% / 0.03);
    --mw-ts-lines: hsla(0 0% 100% / 0.06);
    --mw-ts-lines-strong: hsla(0 0% 100% / 0.10);
    --mw-ts-text: hsl(0 0% 96%);
    --mw-ts-text-dim: hsl(240 5% 60%);
    --mw-ts-text-faint: hsl(240 5% 40%);
    --mw-ts-accent: hsl(263 90% 67%);
    --mw-ts-accent-soft: hsl(263 70% 79%);
    --mw-ts-font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --mw-ts-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --mw-ts-radius-sm: 8px;

    position: relative;
    display: inline-flex;
    color: var(--mw-ts-text);
    font-family: var(--mw-ts-font-body);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.mw-ts *,
.mw-ts *::before,
.mw-ts *::after { box-sizing: border-box; }

.mw-ts-mi {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    user-select: none;
}

/* ── team dot ── */
.mw-ts-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: hsl(var(--h) 60% 62%);
}

/* ── activator: selected/total fraction + mini bar ── */
.mw-ts-act {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 13px;
    background: var(--mw-ts-surface-elev);
    border: 1px solid var(--mw-ts-lines-strong);
    border-radius: 11px;
    cursor: pointer;
    color: var(--mw-ts-text);
    flex-shrink: 0;
    user-select: none;
    transition: border-color .15s, background .15s;
    font-family: var(--mw-ts-font-body);
}

.mw-ts-act:hover { border-color: hsla(0 0% 100% / 0.2); }

.mw-ts-act--open {
    border-color: color-mix(in srgb, var(--mw-ts-accent) 55%, transparent);
    background: color-mix(in srgb, var(--mw-ts-accent) 7%, var(--mw-ts-surface-elev));
}

.mw-ts-act .mw-ts-mi { font-size: 16px; color: var(--mw-ts-text-dim); }

.mw-ts-frac {
    font-family: var(--mw-ts-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.mw-ts-frac-of { color: var(--mw-ts-text-faint); font-weight: 400; }

.mw-ts-bar {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: hsla(0 0% 100% / 0.09);
    overflow: hidden;
}

.mw-ts-bar-fill {
    display: block;
    height: 100%;
    background: var(--mw-ts-accent);
    border-radius: 2px;
    transition: width .25s ease;
}

/* mobile: content-sized stacked button — grows with digit count, never crams */
.mw-ts-act--m {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 12px;
    min-width: 52px;
}

.mw-ts-act--m .mw-ts-frac { font-size: 12px; line-height: 1; }

.mw-ts-act--m .mw-ts-bar { width: 100%; min-width: 26px; }

/* ── desktop popover: two-column dock ── */

/* invisible click-away layer under the popover */
.mw-ts-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1249;
}

.mw-ts-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 560px;
    max-width: min(560px, calc(100vw - 28px));
    background: var(--mw-ts-surface-pop);
    border: 1px solid var(--mw-ts-lines-strong);
    border-radius: 14px;
    box-shadow: 0 18px 50px hsla(240 30% 3% / 0.6);
    z-index: 1250;
    display: grid;
    grid-template-columns: 240px 1fr;
    overflow: hidden;
    animation: mw-ts-pop-in .16s ease-out;
}

@keyframes mw-ts-pop-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: none; }
}

.mw-ts-dock {
    border-right: 1px solid var(--mw-ts-lines);
    background: color-mix(in srgb, var(--mw-ts-accent) 4%, transparent);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mw-ts-avail {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mw-ts-colhead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px 9px;
    font-family: var(--mw-ts-font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mw-ts-text-faint);
    flex-shrink: 0;
}

.mw-ts-colhead .mw-ts-mi { font-size: 12px; color: var(--mw-ts-text-faint); }

.mw-ts-colhead-n { color: var(--mw-ts-accent-soft); }

/* filled pill — reads as clickable, unlike a bare text button */
.mw-ts-quick {
    margin-left: auto;
    background: hsla(0 0% 100% / 0.06);
    border: 1px solid var(--mw-ts-lines-strong);
    color: var(--mw-ts-text-dim);
    font-family: var(--mw-ts-font-mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 999px;
    transition: color .12s, border-color .12s, background .12s;
}

.mw-ts-quick:hover {
    color: var(--mw-ts-text);
    border-color: hsla(0 0% 100% / 0.22);
    background: hsla(0 0% 100% / 0.09);
}

.mw-ts-list {
    overflow-y: auto;
    max-height: min(440px, 60vh);
    padding: 2px 8px 10px;
}

/* desktop row — the whole row starts a sweep, −/+ appears on hover. No vertical padding: the
   row is min-height + centered content, so the hierarchy guides stretch edge-to-edge and
   connect across rows. */
.mw-ts-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 9px;
    min-height: 33px;
    border-radius: var(--mw-ts-radius-sm);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mw-ts-text);
    transition: background .12s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -webkit-touch-callout: none; /* iOS long-press callout would hijack the hold-to-move gesture */
}

.mw-ts-item:hover { background: var(--mw-ts-surface-hover); }

/* the name owns all slack — everything after it sits at the right edge */
.mw-ts-item-name {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* member count — truly the rightmost element, compact */
.mw-ts-meta {
    font-family: var(--mw-ts-font-mono);
    font-size: 10px;
    color: var(--mw-ts-text-faint);
    flex-shrink: 0;
}

/* the −/+ op sits between name and count but occupies ZERO width until hovered — the negative
   margin cancels its flex gap, so an idle row lays out exactly as if the op did not exist and
   the name only loses space in the hover moment. */
.mw-ts-op {
    font-size: 16px;
    color: var(--mw-ts-text-dim);
    width: 0;
    margin-left: -9px;
    overflow: hidden;
    opacity: 0;
    transition: width .12s, margin-left .12s, opacity .12s;
    flex-shrink: 0;
}

.mw-ts-item:hover .mw-ts-op {
    width: 16px;
    margin-left: 0;
    opacity: 1;
}

.mw-ts-row--marked { background: color-mix(in srgb, var(--mw-ts-accent) 15%, transparent) !important; }

/* ── hierarchy guides (ported from MwDataGrid's tree cell, compacted 22px → 14px per depth) ──
   One slot per ancestor level: │ pass-through, ├ tee (more siblings follow), └ last child,
   blank spacer. ALWAYS in the DOM — the tree-on class on the popover/sheet reveals them:
   off → on widens the slots 0 → 14px (rows slide into their indentation), then the lines fade
   in delayed; on → off fades the lines first, then collapses the slots.

   GEOMETRY — one 14px lattice so lines meet the DOTS dead-center: the slot container eats the
   row gap (margin-right: -9px on desktop rows), so a depth-d dot center sits at d·14 + 4.5px;
   every vertical renders at slot-left + 4px = the ancestor dot's center x; the ├/└ arm runs to
   the slot's right edge = the child dot's left edge. */
.mw-ts-tgs {
    display: flex;
    align-self: stretch;
    flex-shrink: 0;
}

.mw-ts-item .mw-ts-tgs { margin-right: -9px; }

.mw-ts-tg {
    width: 0;
    position: relative;
    flex-shrink: 0;
    transition: width .22s ease;
}

.mw-ts-tree-on .mw-ts-tg { width: 14px; }

.mw-ts-tg--through::before,
.mw-ts-tg--tee::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: hsla(0 0% 100% / 0.13);
}

.mw-ts-tg--last::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    height: 50%;
    width: 1px;
    background: hsla(0 0% 100% / 0.13);
}

.mw-ts-tg--tee::after,
.mw-ts-tg--last::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: hsla(0 0% 100% / 0.13);
}

.mw-ts-tg::before,
.mw-ts-tg::after {
    opacity: 0;
    transition: opacity .12s ease;
}

.mw-ts-tree-on .mw-ts-tg::before,
.mw-ts-tree-on .mw-ts-tg::after {
    opacity: 1;
    transition: opacity .18s ease .16s;
}

/* skip badge: sits on the connector elbow when the line jumps levels — the number is how many
   hierarchy levels between the two connected teams are NOT in this list (other side or filtered
   out). Covers the line beneath itself via its own background. */
.mw-ts-skip {
    position: absolute;
    left: 4.5px;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--mw-ts-surface-pop);
    border: 1px solid var(--mw-ts-lines-strong);
    color: var(--mw-ts-text-dim);
    font-family: var(--mw-ts-font-mono);
    font-size: 7.5px;
    font-weight: 600;
    display: grid;
    place-items: center;
    z-index: 1;
    opacity: 0;
    transition: opacity .12s ease;
}

.mw-ts-tree-on .mw-ts-skip {
    opacity: 1;
    transition: opacity .18s ease .16s;
}

/* dot column: stretches the row height so a parent's trunk can run from just below its dot to
   the row's bottom edge, at the dot's center x — the child rows' verticals continue it. */
.mw-ts-dotcol {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    width: 9px;
    flex-shrink: 0;
}

.mw-ts-dotcol--trunk::after {
    content: '';
    position: absolute;
    left: 4px;
    top: calc(50% + 7px);
    bottom: 0;
    width: 1px;
    background: hsla(0 0% 100% / 0.13);
    opacity: 0;
    transition: opacity .12s ease;
}

.mw-ts-tree-on .mw-ts-dotcol--trunk::after {
    opacity: 1;
    transition: opacity .18s ease .16s;
}

/* hierarchy toggle (next to the search — the control strip has room for more) */
.mw-ts-htog {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--mw-ts-surface-elev);
    border: 1px solid var(--mw-ts-lines-strong);
    border-radius: 9px;
    color: var(--mw-ts-text-dim);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.mw-ts-htog:hover { border-color: hsla(0 0% 100% / 0.2); }

.mw-ts-htog .mw-ts-mi { font-size: 16px; }

.mw-ts-htog--on {
    color: var(--mw-ts-accent-soft);
    border-color: color-mix(in srgb, var(--mw-ts-accent) 55%, transparent);
    background: color-mix(in srgb, var(--mw-ts-accent) 10%, var(--mw-ts-surface-elev));
}

.mw-ts-pop-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 4px;
}

.mw-ts-pop-top .mw-ts-search { margin: 0; flex: 1; }

.mw-ts-sheet-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 6px;
}

.mw-ts-sheet-top .mw-ts-search { margin: 0; flex: 1; }

/* just-moved flash: shows where a row landed, then fades out */
@keyframes mw-ts-flash-fade {
    0%, 25% { background: color-mix(in srgb, var(--mw-ts-accent) 24%, transparent); }
    100% { background: transparent; }
}

.mw-ts-flash { animation: mw-ts-flash-fade 1.6s ease-out; }

/* ── search fields (popover + sheet) ── */
.mw-ts-search {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--mw-ts-lines-strong);
    border-radius: 9px;
    padding: 0 9px;
    color: var(--mw-ts-text-faint);
    flex-shrink: 0;
    transition: border-color .15s;
}

.mw-ts-search:focus-within { border-color: color-mix(in srgb, var(--mw-ts-accent) 45%, transparent); }

.mw-ts-search .mw-ts-mi { font-size: 13px; }

/* NOTE: no standalone margins — the search always sits inside .mw-ts-pop-top / .mw-ts-sheet-top. */

.mw-ts-search input {
    flex: 1;
    min-width: 0;
    height: 30px;
    background: none;
    border: none;
    outline: none;
    color: var(--mw-ts-text);
    font-family: var(--mw-ts-font-body);
    font-size: 12.5px;
}

.mw-ts-search input::placeholder { color: var(--mw-ts-text-faint); }

.mw-ts-empty {
    padding: 18px 14px;
    color: var(--mw-ts-text-faint);
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
}

/* ── mobile: scrim + bottom sheet ── */
.mw-ts-scrim {
    position: fixed;
    inset: 0;
    background: hsla(240 20% 4% / 0.5);
    z-index: 1299;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.mw-ts-scrim--open { opacity: 1; pointer-events: auto; }

.mw-ts-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mw-ts-surface-pop);
    border-top: 1px solid var(--mw-ts-lines-strong);
    border-radius: 18px 18px 0 0;
    z-index: 1300;
    transform: translateY(105%);
    transition: transform .22s cubic-bezier(.3, .9, .3, 1);
    display: flex;
    flex-direction: column;
    height: 66.67dvh; /* ALWAYS two thirds of the screen — content and collapse state never resize the sheet */
    box-shadow: 0 -14px 40px hsla(240 30% 3% / 0.55);
    color: var(--mw-ts-text);
    font-family: var(--mw-ts-font-body);
}

.mw-ts-sheet--open { transform: none; }

/* grab zone: generous hit area, swipe down to dismiss (touch-action: none so the
   vertical pan drives the sheet, not the page) */
.mw-ts-grabzone {
    padding: 8px 0 10px;
    flex-shrink: 0;
    touch-action: none;
    cursor: grab;
}

.mw-ts-grabzone:active { cursor: grabbing; }

.mw-ts-grab {
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: hsla(0 0% 100% / 0.14);
    margin: 0 auto;
}

.mw-ts-sheet-scroll {
    overflow-y: auto;
    flex: 1;
    padding-bottom: 24px;
    overscroll-behavior: contain;
}

.mw-ts-grouphead {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 7px;
    font-family: var(--mw-ts-font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mw-ts-text-faint);
    background: var(--mw-ts-surface-pop);
    z-index: 2;
}

.mw-ts-grouphead .mw-ts-mi { font-size: 12px; }

.mw-ts-grouphead-line { flex: 1; height: 1px; background: var(--mw-ts-lines); }

.mw-ts-grouphead--sel { background: color-mix(in srgb, var(--mw-ts-accent) 5%, var(--mw-ts-surface-pop)); }

/* group collapse toggle — left of the Keine/Alle pill; chevron points right while collapsed */
.mw-ts-gcol {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: hsla(0 0% 100% / 0.06);
    border: 1px solid var(--mw-ts-lines-strong);
    border-radius: 50%;
    color: var(--mw-ts-text-dim);
    cursor: pointer;
    transition: color .12s, border-color .12s;
}

.mw-ts-gcol:hover { color: var(--mw-ts-text); border-color: hsla(0 0% 100% / 0.22); }

.mw-ts-gcol .mw-ts-mi { font-size: 14px; transition: transform .18s ease; }

.mw-ts-gcol--collapsed .mw-ts-mi { transform: rotate(-90deg); }

/* group body roll-up — grid-rows 1fr↔0fr animates the height without measuring content */
.mw-ts-gbody {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .22s ease;
}

.mw-ts-gbody--collapsed { grid-template-rows: 0fr; }

.mw-ts-gbody > div {
    overflow: hidden;
    min-height: 0;
}

.mw-ts-group--sel { background: color-mix(in srgb, var(--mw-ts-accent) 4%, transparent); }

/* mobile row: left −/+ drag zone + tappable body */
.mw-ts-mrow {
    display: flex;
    align-items: stretch;
    user-select: none;
    -webkit-user-select: none;
    transition: background .12s;
}

.mw-ts-mzone {
    width: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    touch-action: none;
    -webkit-touch-callout: none; /* iOS long-press callout would hijack the hold-to-move gesture */
    cursor: pointer;
    color: var(--mw-ts-text-dim);
}

.mw-ts-mzone .mw-ts-op {
    margin-left: 0;
    opacity: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--mw-ts-lines-strong);
    display: grid;
    place-items: center;
    font-size: 15px;
    transition: border-color .12s, color .12s, background .12s;
}

.mw-ts-mrow.mw-ts-row--marked .mw-ts-mzone .mw-ts-op {
    border-color: var(--mw-ts-accent);
    color: var(--mw-ts-accent-soft);
    background: color-mix(in srgb, var(--mw-ts-accent) 14%, transparent);
}

/* No vertical padding — min-height + centered content, so the guides and the parent trunk can
   stretch edge-to-edge and connect across rows. */
.mw-ts-mbody {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px 0 0;
    min-height: 46px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}