/*
    Project grouping - see Mobile-ProjectJobSelection-Design.md.

    Colours come from Tokens.css rather than hex, so this works unchanged across all four theme
    combinations: Tradie Classic and Tradie Light, each with Dark Mode on or off. Dark.css
    redefines these tokens at :root, so no Classic-specific duplicate rules are needed here - there
    is no Theme.css rule to lose the cascade to, every declaration below reads a var directly.
*/

.ProjectFilterBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0;
    padding: 10px 12px;
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius, 4px);
    color: var(--text);
}

.ProjectFilterBarName {
    font-weight: bold;
    color: var(--text);
    /* Long project names wrap rather than pushing Change off the row. */
    overflow-wrap: anywhere;
}

/* The value beside a bold label ("Current Project:"), so the label is what stands out rather than
   the whole line - ProjectFilterBarName is bold for the bars that have no separate label. */
.ProjectFilterBarValue {
    font-weight: normal;
}

.ProjectFilterBarChange {
    flex: 0 0 auto;
    padding: 4px 10px;
    color: var(--brand);
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}