/* Team notes panel (mw-tn-*) — standalone, no scoped CSS.
   The notes & Übergabe panel extracted from the Artist Büro dashboard (mw-ab-*) into
   MwTeamNotesPanel so every team-owned ops surface (Artist Office, Volunteer Care) renders the
   identical panel. Same command-palette aesthetic: deep near-black canvas, MitWare violet accent,
   hairline borders, Geist body + JetBrains Mono numerics + Material Symbols Rounded icons.
   Every custom property is scoped to .mw-tn-panel so it never leaks into the rest of the app.
   The Kanban board itself is MwKanbanBoard (mw-kb-*); only its in-card content is styled here.
   .mw-vc-page is the full-page canvas of the Volunteer Care page hosting this panel. */

/* NOTE: Tokens live on BOTH roots — .mw-tn-tokens re-declares them for panel fragments that render
   inside portaled popovers (e.g. the reminder chips inside MwDateTimePickerPopover), OUTSIDE
   .mw-tn-panel, where every var() would otherwise resolve to nothing. */
.mw-tn-panel,
.mw-tn-tokens {
    /* surfaces */
    --mw-tn-surface: hsl(240 12% 9%);
    --mw-tn-surface-elev: hsl(240 11% 11.5%);
    --mw-tn-surface-hover: hsla(0 0% 100% / 0.03);

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

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

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

    /* status — calm, not neon */
    --mw-tn-green: hsl(152 55% 56%);
    --mw-tn-amber: hsl(38 92% 62%);
    --mw-tn-red: hsl(351 75% 64%);
    --mw-tn-blue: hsl(210 80% 65%);
    --mw-tn-teal: hsl(172 60% 50%);
    --mw-tn-pink: hsl(322 70% 68%);

    --mw-tn-font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --mw-tn-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --mw-tn-radius: 12px;
    --mw-tn-radius-sm: 8px;
}

.mw-tn-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    color: var(--mw-tn-text);
    font-family: var(--mw-tn-font-body);
    font-weight: 400;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

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

.mw-tn-topbar {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 10px 0;
    flex-shrink: 0;
}

.mw-tn-topbar .mw-tn-composer { flex: 1; min-width: 0; margin: 0; }

/* Two-icon segmented toggle between the feed and the board view */
.mw-tn-view-switch {
    display: flex;
    flex-shrink: 0;
    border: 1px solid var(--mw-tn-border);
    border-radius: var(--mw-tn-radius);
    background: var(--mw-tn-surface-elev);
    overflow: hidden;
}

.mw-tn-view-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 11px 0;
    background: transparent;
    border: none;
    border-right: 1px solid var(--mw-tn-border);
    color: var(--mw-tn-text-faint);
    cursor: pointer;
    transition: 120ms ease;
}

.mw-tn-view-switch button:last-child { border-right: none; }

.mw-tn-view-switch button:hover { color: var(--mw-tn-text); background: var(--mw-tn-surface-hover); }

.mw-tn-view-switch button.mw-tn-view-switch--active {
    color: var(--mw-tn-accent);
    background: var(--mw-tn-accent-tint);
}

.mw-tn-view-switch .mw-tn-mi { font-size: 18px; }

/* ── Note composer — collapses to a single title line until focused ── */
.mw-tn-composer {
    background: var(--mw-tn-surface-elev);
    border: 1px solid var(--mw-tn-border);
    border-radius: var(--mw-tn-radius);
    margin: 10px 10px 0;
    padding: 10px 12px;
    flex-shrink: 0;
}

.mw-tn-composer-head { display: flex; align-items: center; gap: 8px; }

.mw-tn-composer-head-icon { color: var(--mw-tn-text-faint); font-size: 17px; flex-shrink: 0; transition: color 150ms ease; }
.mw-tn-composer:focus-within .mw-tn-composer-head-icon { color: var(--mw-tn-accent-soft); }

.mw-tn-composer-heading {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--mw-tn-text);
    font-family: var(--mw-tn-font-body);
    font-size: 13px;
    font-weight: 500;
}

.mw-tn-composer-heading::placeholder { color: var(--mw-tn-text-faint); }

.mw-tn-composer-chevron {
    color: var(--mw-tn-text-faint);
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 200ms ease, color 200ms ease;
}

.mw-tn-composer:focus-within .mw-tn-composer-chevron { transform: rotate(180deg); color: var(--mw-tn-accent-soft); }

.mw-tn-composer-extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms ease; }
.mw-tn-composer:focus-within .mw-tn-composer-extra { grid-template-rows: 1fr; }
/* NOTE: Keep the composer expanded while the link picker is open — its portaled popover steals
   focus, which would otherwise drop :focus-within and collapse the composer under the dropdown. */
.mw-tn-composer--pinned .mw-tn-composer-extra { grid-template-rows: 1fr; }

.mw-tn-composer-extra-inner {
    overflow: hidden;
    min-height: 0;
    border-top: 1px solid var(--mw-tn-border);
    margin-top: 9px;
    padding-top: 3px;
}

.mw-tn-composer-body {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: var(--mw-tn-text-dim);
    font-family: var(--mw-tn-font-body);
    font-size: 12.5px;
    line-height: 1.55;
    padding: 8px 0 0;
}

.mw-tn-composer-body::placeholder { color: var(--mw-tn-text-faint); }

.mw-tn-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }

.mw-tn-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--mw-tn-border);
    background: transparent;
    color: var(--mw-tn-text-dim);
    font-family: var(--mw-tn-font-body);
    font-size: 11px;
    font-weight: 500;
    transition: 120ms ease;
}

.mw-tn-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.mw-tn-chip { cursor: pointer; }
.mw-tn-chip:hover { border-color: var(--mw-tn-border-light); }
.mw-tn-chip:disabled { opacity: 0.45; cursor: default; }

.mw-tn-chip.mw-tn-chip--active {
    background: color-mix(in srgb, var(--c) 16%, transparent);
    border-color: var(--c);
    color: var(--c);
}

.mw-tn-segmented {
    display: flex;
    border: 1px solid var(--mw-tn-border);
    border-radius: var(--mw-tn-radius-sm);
    overflow: hidden;
    width: fit-content;
    margin-top: 8px;
}

.mw-tn-segmented button {
    padding: 5px 14px;
    font-family: var(--mw-tn-font-body);
    font-size: 11px;
    font-weight: 500;
    background: transparent;
    color: var(--mw-tn-text-dim);
    border: none;
    border-right: 1px solid var(--mw-tn-border);
}

.mw-tn-segmented button:last-child { border-right: none; }

.mw-tn-segmented button.mw-tn-segmented-active {
    background: color-mix(in srgb, var(--c) 16%, transparent);
    color: var(--c);
}

/* Inside the note detail's actions row the surrounding flexbox already spaces it */
.mw-tn-segmented--flat { margin-top: 0; }

.mw-tn-composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mw-tn-composer-row--end { justify-content: flex-end; }

/* Row directly after a hairline — the line already provides the separation */
.mw-tn-composer-row--flat { margin-top: 0; }

/* ── Hairline section divider — composer AND note detail share it. The line alone separates
   the sections (⅔ width), no extra whitespace beyond the small symmetric margin. ── */
.mw-tn-hr { width: 66%; height: 1px; background: var(--mw-tn-border); border: none; margin: 8px 0; }

/* ── Rail blocks — ONE compact icon control on the left (Verknüpfen · Anhängen), the items as a
   vertical list right of it. Flex (not grid) so component wrappers (MWMenu, MudStack) stay one child. ── */
.mw-tn-railblock { display: flex; align-items: flex-start; gap: 7px; }

.mw-tn-railbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--mw-tn-border);
    background: transparent;
    color: var(--mw-tn-text-dim);
    cursor: pointer;
    flex-shrink: 0;
    transition: 130ms ease;
}

.mw-tn-railbtn .mw-tn-mi { font-size: 15px; }

.mw-tn-railbtn .mud-icon-root { width: 15px; height: 15px; font-size: 15px; }

.mw-tn-railbtn:hover {
    border-color: var(--mw-tn-accent-line);
    color: var(--mw-tn-accent-soft);
    background: var(--mw-tn-accent-tint);
}

.mw-tn-railbtn:disabled { opacity: 0.5; cursor: default; }

/* NOTE: MwAttachmentField renders [items][button-row] in its own vertical MudStack; row-reverse
   puts the compact button left of the items without touching the component. !important beats
   MudBlazor's flex utility classes. */
.mw-tn-railblock--attach { display: block; }

.mw-tn-railblock--attach > .mud-stack {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
}

.mw-tn-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--mw-tn-border);
    background: transparent;
    color: var(--mw-tn-text-dim);
    font-family: var(--mw-tn-font-body);
    font-size: 11px;
    font-weight: 500;
    transition: 120ms ease;
}

.mw-tn-btn-ghost:hover { border-color: var(--mw-tn-border-light); color: var(--mw-tn-text); }
.mw-tn-btn-ghost .mw-tn-mi { font-size: 14px; }

/* ── MwAttachmentField restyle — it renders MudBlazor chrome; pull it onto the ops-board palette ── */
.mw-tn-composer .mud-text-secondary,
.mw-tn-note-detail .mud-text-secondary {
    font-family: var(--mw-tn-font-body) !important;
    font-size: 11px !important;
    color: var(--mw-tn-text-faint) !important;
}

.mw-tn-composer .mud-button-outlined-primary,
.mw-tn-note-detail .mud-button-outlined-primary {
    background: transparent !important;
    border: 1px solid var(--mw-tn-border) !important;
    border-radius: 999px !important;
    color: var(--mw-tn-text-dim) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: var(--mw-tn-font-body) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 6px 12px !important;
    min-width: 0 !important;
    box-shadow: none !important;
}

.mw-tn-composer .mud-button-outlined-primary:hover,
.mw-tn-note-detail .mud-button-outlined-primary:hover {
    background: var(--mw-tn-surface-hover) !important;
    border-color: var(--mw-tn-border-light) !important;
}

.mw-tn-composer .mud-button-outlined-primary .mud-icon-root,
.mw-tn-note-detail .mud-button-outlined-primary .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
    color: var(--mw-tn-text-faint) !important;
}

/* NOTE: The "Verknüpfen" link picker is MwEntityLinkPicker (mw-elp-*, built on MWMenu);
   only the linked-entity result chips live here: a vertical list of full-name rows, each with a
   type badge in the per-type colour (--c, set inline via LinkColor). ── */
.mw-tn-ln-list { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.mw-tn-ln-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2.5px 6px 2.5px 5px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
    background: color-mix(in srgb, var(--c) 6%, transparent);
    width: fit-content;
    max-width: 100%;
    transition: border-color 130ms ease, background 130ms ease;
}

.mw-tn-ln-row:hover {
    border-color: color-mix(in srgb, var(--c) 40%, transparent);
    background: color-mix(in srgb, var(--c) 9%, transparent);
}

.mw-tn-ln-type {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 1.5px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--c) 16%, transparent);
    color: color-mix(in srgb, var(--c) 80%, white);
    font-family: var(--mw-tn-font-mono);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mw-tn-ln-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--mw-tn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-tn-ln-x {
    flex-shrink: 0;
    font-size: 12px !important;
    cursor: pointer;
    color: var(--mw-tn-text-faint);
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease;
}

.mw-tn-ln-row:hover .mw-tn-ln-x { opacity: 1; }

.mw-tn-ln-x:hover { color: var(--mw-tn-red); }

/* ── Due ("Fällig") control — a chip trigger that opens a styled date+time popover ── */
.mw-tn-due-anchor { position: relative; display: inline-flex; align-items: center; gap: 4px; }

.mw-tn-due-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid var(--mw-tn-border);
    background: transparent;
    color: var(--mw-tn-text-dim);
    font-family: var(--mw-tn-font-body);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: 120ms ease;
}

.mw-tn-due-trigger .mw-tn-mi { font-size: 15px; color: var(--mw-tn-text-faint); }

.mw-tn-due-trigger:hover { border-color: var(--mw-tn-border-light); color: var(--mw-tn-text); }

.mw-tn-due-trigger-text--empty { color: var(--mw-tn-text-faint); }

.mw-tn-due-trigger-lead { color: var(--mw-tn-text-faint); }

.mw-tn-due-trigger--set {
    border-color: var(--mw-tn-accent-line);
    background: var(--mw-tn-accent-tint);
    color: var(--mw-tn-accent-soft);
}

.mw-tn-due-trigger--set .mw-tn-mi { color: var(--mw-tn-accent-soft); }

.mw-tn-due-trigger--open { border-color: var(--mw-tn-accent-line); background: var(--mw-tn-accent-tint); }

.mw-tn-due-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--mw-tn-border);
    background: transparent;
    color: var(--mw-tn-text-faint);
    cursor: pointer;
    transition: 120ms ease;
}

.mw-tn-due-x .mw-tn-mi { font-size: 13px; }

.mw-tn-due-x:hover { color: var(--mw-tn-red); border-color: color-mix(in srgb, var(--mw-tn-red) 40%, var(--mw-tn-border)); }

/* NOTE: The due popover itself is MwDateTimePickerPopover (mw-dtp-*, mw-datetime-picker.css);
   only the panel-provided Erinnerung section inside it (.mw-tn-tokens wrapper) lives here. */
.mw-tn-due-pop-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mw-tn-text-faint);
    margin-bottom: 6px;
}

.mw-tn-due-pop-leads { border-top: 1px solid var(--mw-tn-border); padding-top: 10px; }

/* Reminder-lead chips — times are meta, so they render in the mono stack */
.mw-tn-due-pop-leads .mw-tn-chip {
    font-family: var(--mw-tn-font-mono);
    font-variant-numeric: tabular-nums;
}

.mw-tn-assignee-select {
    background: var(--mw-tn-surface-hover);
    border: 1px solid var(--mw-tn-border);
    border-radius: var(--mw-tn-radius-sm);
    padding: 4px 7px;
    font-family: var(--mw-tn-font-body);
    font-size: 11px;
    color: var(--mw-tn-text);
}

/* ── Kanban board view (rendered by MwKanbanBoard — column/card chrome comes from mw-kanban.css/mw-kb-*) ── */
.mw-tn-board {
    flex: 1;
    min-height: 0;
    margin: 8px 10px 0;
}

.mw-tn-card-text {
    color: var(--mw-tn-text);
    margin-bottom: 7px;
    line-height: 1.45;
}

.mw-tn-card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }

.mw-tn-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    color: var(--mw-tn-text-faint);
}

.mw-tn-card-assignee { color: var(--mw-tn-text-dim); font-weight: 500; }

/* ── Kanban column header — only the full name + a small count top-right ── */
.mw-tn-board .mw-kb-column-header { align-items: flex-start; gap: 6px; }

.mw-tn-kb-col-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.25;
    color: var(--mw-tn-text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.mw-tn-kb-col-count {
    flex-shrink: 0;
    font-family: var(--mw-tn-font-mono);
    font-size: 10px;
    color: var(--mw-tn-text-faint);
    font-variant-numeric: tabular-nums;
}

.mw-tn-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--mw-tn-text-faint);
    font-style: italic;
}

/* ── Notes feed ── */
.mw-tn-note-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    flex: 1;
}

.mw-tn-note-item { border-radius: var(--mw-tn-radius-sm); font-size: 13px; line-height: 1.5; }

.mw-tn-note-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--mw-tn-radius-sm);
    cursor: pointer;
    transition: background 120ms ease;
}

.mw-tn-note-row:hover { background: var(--mw-tn-surface-hover); }

.mw-tn-note-time {
    font-family: var(--mw-tn-font-mono);
    font-size: 10.5px;
    color: var(--mw-tn-text-faint);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.mw-tn-note-prio { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; }

.mw-tn-note-item--urgent .mw-tn-note-prio {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent);
}

.mw-tn-note-cat {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Left meta column of a feed row: weekday·date·time on top, the author below it */
.mw-tn-note-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    min-width: 92px;
}

/* Weekday · date · time cluster */
.mw-tn-note-when {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--mw-tn-font-mono);
    font-variant-numeric: tabular-nums;
}

.mw-tn-note-weekday {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--mw-tn-text-dim);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.mw-tn-note-date { font-size: 10.5px; color: var(--mw-tn-text-faint); }

.mw-tn-note-author {
    font-weight: 600;
    color: var(--mw-tn-accent-soft);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    width: fit-content;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 120ms ease;
}

.mw-tn-note-author:hover { color: var(--mw-tn-accent); text-decoration: underline; text-decoration-style: dotted; }

.mw-tn-note-text { flex: 1; color: var(--mw-tn-text); font-weight: 500; }
.mw-tn-note-text--resolved { color: var(--mw-tn-text-faint); text-decoration: line-through; font-weight: 400; }

.mw-tn-note-chevron {
    color: var(--mw-tn-text-faint);
    font-size: 15px;
    flex-shrink: 0;
    transition: transform 200ms ease, color 200ms ease;
}

.mw-tn-note-item--expanded .mw-tn-note-chevron { transform: rotate(180deg); color: var(--mw-tn-accent-soft); }

/* Expanded item reads as one surface now that the detail bubble is gone */
.mw-tn-note-item--expanded { background: var(--mw-tn-surface-hover); }

/* ── Due & reminder glow — applied to feed items AND Kanban cards. --due-c is the note's priority
   colour (blue Info / amber Wichtig / red Dringend), set inline by the panel. A due note glows
   steadily; a reminding note pulsates a notch softer. Both stop on acknowledge-click or Done. ── */
.mw-tn-due-glow,
.mw-tn-due-pulse { --due-c: var(--mw-tn-red); }

.mw-tn-due-glow {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--due-c) 60%, transparent),
        0 0 16px 1px color-mix(in srgb, var(--due-c) 35%, transparent);
}

/* Feed rows additionally tint their background (Kanban cards keep their own card surface) */
.mw-tn-note-item.mw-tn-due-glow { background: color-mix(in srgb, var(--due-c) 9%, transparent); }

.mw-tn-due-pulse { animation: mw-tn-due-pulse 2.4s ease-in-out infinite; }

@keyframes mw-tn-due-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--due-c) 22%, transparent),
            0 0 6px 0 color-mix(in srgb, var(--due-c) 10%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--due-c) 45%, transparent),
            0 0 12px 1px color-mix(in srgb, var(--due-c) 24%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-tn-due-pulse {
        animation: none;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--due-c) 35%, transparent);
    }
}

/* Due-time chip on a feed row / Kanban card — alarm icon + wall-clock time in the priority colour */
.mw-tn-note-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mw-tn-font-mono);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 13%, transparent);
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.mw-tn-note-due .mw-tn-mi { font-size: 12px; }

/* ── Note filter menu — funnel toggle in the topbar + a collapsed-by-default grouped-chip bar ── */
.mw-tn-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    padding: 11px 0;
    background: var(--mw-tn-surface-elev);
    border: 1px solid var(--mw-tn-border);
    border-radius: var(--mw-tn-radius);
    color: var(--mw-tn-text-faint);
    cursor: pointer;
    position: relative;
    transition: 120ms ease;
}

.mw-tn-filter-toggle:hover { color: var(--mw-tn-text); background: var(--mw-tn-surface-hover); }

.mw-tn-filter-toggle .mw-tn-mi { font-size: 18px; }

.mw-tn-filter-toggle--open { color: var(--mw-tn-accent); border-color: var(--mw-tn-accent-line); background: var(--mw-tn-accent-tint); }

/* A dot badge when any filter is active */
.mw-tn-filter-toggle--active::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mw-tn-accent);
    border: 1.5px solid var(--mw-tn-surface);
}

/* Pure-CSS collapse: the single grid row animates 0fr → 1fr; the clip hides overflow during the run */
.mw-tn-filterbar-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .26s cubic-bezier(.32, .72, 0, 1);
    margin: 0 10px;
    flex-shrink: 0;
}

.mw-tn-filterbar-collapse--open { grid-template-rows: 1fr; }

.mw-tn-filterbar-clip { overflow: hidden; }

.mw-tn-filterbar {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--mw-tn-surface-elev);
    border: 1px solid var(--mw-tn-border);
    border-radius: var(--mw-tn-radius);
}

/* Search field at the top of the filter bar — mirrors the label-printer popover's search */
.mw-tn-fsearch { position: relative; display: flex; align-items: center; }

.mw-tn-fsearch-icon { position: absolute; left: 8px; font-size: 16px; color: var(--mw-tn-text-faint); pointer-events: none; }

.mw-tn-fsearch-input {
    flex: 1;
    height: 30px;
    padding: 0 28px 0 30px;
    background: var(--mw-tn-surface);
    border: 1px solid var(--mw-tn-border);
    border-radius: var(--mw-tn-radius-sm);
    color: var(--mw-tn-text);
    font: inherit;
    font-size: 12.5px;
}

.mw-tn-fsearch-input::placeholder { color: var(--mw-tn-text-faint); }

.mw-tn-fsearch-input:focus { outline: none; border-color: var(--mw-tn-accent-line); }

.mw-tn-fsearch-clear {
    position: absolute;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    background: var(--mw-tn-surface-hover);
    color: var(--mw-tn-text-dim);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mw-tn-fsearch-clear:hover { color: var(--mw-tn-text); }

.mw-tn-fgroup { display: flex; align-items: baseline; gap: 8px; }

.mw-tn-fgroup-label {
    flex: 0 0 66px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mw-tn-text-faint);
    padding-top: 3px;
}

.mw-tn-fgroup-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }

.mw-tn-fchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--mw-tn-border);
    background: var(--mw-tn-surface);
    border-radius: 999px;
    color: var(--mw-tn-text-dim);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    transition: 120ms ease;
}

.mw-tn-fchip:hover { border-color: var(--mw-tn-border-light); color: var(--mw-tn-text); }

.mw-tn-fchip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; }

.mw-tn-fchip--on {
    color: var(--c);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--c) 45%, var(--mw-tn-border));
    background: color-mix(in srgb, var(--c) 14%, transparent);
}

.mw-tn-filterbar-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--mw-tn-border);
}

.mw-tn-filter-hint { font-size: 10.5px; color: var(--mw-tn-text-faint); }

.mw-tn-filter-count {
    margin-left: auto;
    font-family: var(--mw-tn-font-mono);
    font-size: 10.5px;
    color: var(--mw-tn-text-dim);
    font-variant-numeric: tabular-nums;
}

.mw-tn-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--mw-tn-border);
    background: var(--mw-tn-surface);
    border-radius: var(--mw-tn-radius-sm);
    color: var(--mw-tn-text-dim);
    font-size: 11px;
    cursor: pointer;
    transition: 120ms ease;
}

.mw-tn-filter-clear:hover { color: var(--mw-tn-red); border-color: color-mix(in srgb, var(--mw-tn-red) 40%, var(--mw-tn-border)); }

.mw-tn-filter-clear .mw-tn-mi { font-size: 13px; }

/* NOTE: No inner bubble — the detail body sits directly under the row, indented into the item,
   with the composer's hairline dividers between its sections. */
.mw-tn-note-detail { padding: 9px 12px 11px; border-top: 1px solid var(--mw-tn-border); margin: 0 2px; }

.mw-tn-note-detail-text { font-size: 12.5px; color: var(--mw-tn-text-dim); line-height: 1.6; }

.mw-tn-note-assignee {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--mw-tn-text-dim);
    margin-top: 5px;
}

.mw-tn-note-assignee .mw-tn-mi { font-size: 13px; color: var(--mw-tn-text-faint); }

/* ── Send button (notes composer) ── */
.mw-tn-send {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mw-tn-accent-tint);
    border: 1px solid var(--mw-tn-accent-line);
    border-radius: var(--mw-tn-radius-sm);
    padding: 0 14px;
    color: var(--mw-tn-accent-soft);
    font-family: var(--mw-tn-font-body);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.mw-tn-send:hover {
    background: hsla(263 90% 67% / 0.18);
    border-color: var(--mw-tn-accent);
}

/* ── Volunteer Care page (mw-vc-*) — full-page host of the panel, on the same near-black
   ops canvas as the Artist Büro dashboard so the shared panel reads identically. ── */
.mw-vc-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
    box-sizing: border-box;
    overflow: hidden;
    padding: 12px;
    background: #07070a;
    color: hsl(0 0% 96%);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}

.mw-vc-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 2px 4px 10px;
    flex-shrink: 0;
}

.mw-vc-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mw-vc-team {
    font-size: 12px;
    color: hsl(172 60% 50%);
    font-weight: 600;
}

.mw-vc-frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: hsl(240 12% 9%);
    border: 1px solid hsla(0 0% 100% / 0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 0 hsla(0 0% 100% / 0.02) inset,
        0 18px 40px -24px hsla(0 0% 0% / 0.8);
}

.mw-vc-hint {
    margin: 24px auto;
    max-width: 560px;
    padding: 16px 20px;
    border: 1px solid hsla(0 0% 100% / 0.10);
    border-radius: 12px;
    background: hsl(240 11% 11.5%);
    color: hsl(240 5% 60%);
    font-size: 13px;
    line-height: 1.6;
}

/* ── Volunteer Care tab bar — mockup vtab cards: edge-glow card per tab, category-colored ── */
.mw-vc-tabs { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.mw-vc-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 12px;
    border-top-left-radius: 4px;
    border: 1.5px solid hsla(0 0% 100% / 0.10);
    background: hsl(240 12% 9%);
    cursor: pointer;
    font-family: inherit;
    color: hsl(240 5% 60%);
    text-align: left;
    transition: 150ms ease;
}

.mw-vc-tab-name { font-weight: 700; font-size: 13px; color: hsl(0 0% 96%); }

.mw-vc-tab-sub { font-size: 10.5px; color: hsl(240 5% 40%); }

.mw-vc-tab--on {
    border-color: transparent;
    background:
        linear-gradient(color-mix(in srgb, var(--vc) 7%, hsl(240 12% 9%)), color-mix(in srgb, var(--vc) 7%, hsl(240 12% 9%))) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--vc) 80%, transparent) 0%,
            color-mix(in srgb, var(--vc) 45%, transparent) 40%, transparent 72%) border-box,
        linear-gradient(hsla(0 0% 100% / 0.14), hsla(0 0% 100% / 0.14)) border-box;
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--vc) 65%, transparent);
}

.mw-vc-tab--on .mw-vc-tab-sub { color: hsl(240 5% 60%); }

/* ── Volunteer Care mobile (below 960px) — the fat tab cards shrink to one segmented row ── */
@media (max-width: 959.98px) {
    .mw-vc-page { padding: 8px; }

    .mw-vc-header { flex-wrap: wrap; gap: 6px 10px; margin: 2px 2px 8px; }

    .mw-vc-tabs { flex-basis: 100%; margin-left: 0; }

    .mw-vc-tab { flex: 1; align-items: center; padding: 7px 6px; }

    .mw-vc-tab-name { font-size: 12px; }

    .mw-vc-tab-sub { display: none; }
}