/* /Components/Layout/AlertBell.razor.rz.scp.css */
.alert-bell-wrap[b-c9f4grlvor] {
    position: relative;
    display: inline-flex;
}

.alert-bell-btn[b-c9f4grlvor] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.375rem;
    cursor: pointer;
    color: var(--df-text-muted);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.alert-bell-btn:hover[b-c9f4grlvor] {
    background: #f1f5f9;
    border-color: var(--df-border);
    color: #334155;
}

.alert-bell-badge[b-c9f4grlvor] {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    background: #ef4444;
    border-radius: 9999px;
    pointer-events: none;
}

/* --- Hairline "unread alerts" dropdown, opens on bell click --- */

/* Transparent overlay so a click anywhere outside closes the dropdown. */
.ab-backdrop[b-c9f4grlvor] {
    position: fixed;
    inset: 0;
    z-index: 1070;
}

.ab-pop[b-c9f4grlvor] {
    position: absolute;
    top: calc(100% + 12px);
    right: -2px;
    width: 362px;
    background: var(--df-surface);
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.22), 0 4px 12px -6px rgba(15, 23, 42, 0.10);
    z-index: 1080;
    overflow: hidden;
    transform-origin: top right;
    animation: ab-in-b-c9f4grlvor 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes ab-in-b-c9f4grlvor {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

.ab-head[b-c9f4grlvor] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem 0.7rem;
}

.ab-title[b-c9f4grlvor] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0f172a;
}

.ab-count[b-c9f4grlvor] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
}

.ab-sp[b-c9f4grlvor] { flex: 1; }

.ab-ghost[b-c9f4grlvor] {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--df-text-muted);
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    letter-spacing: -0.01em;
}

.ab-ghost:hover:not(:disabled)[b-c9f4grlvor] {
    color: #0f172a;
    background: #eef1f5;
}

.ab-ghost:disabled[b-c9f4grlvor] {
    opacity: 0.45;
    cursor: default;
}

.ab-list[b-c9f4grlvor] {
    max-height: 340px;
    overflow-y: auto;
}

.ab-row[b-c9f4grlvor] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ab-row + .ab-row[b-c9f4grlvor] {
    border-top: 1px solid #eef1f5;
}

.ab-row:hover[b-c9f4grlvor] {
    background: #fafbfd;
}

.ab-dot[b-c9f4grlvor] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.42rem;
}

.ab-rb[b-c9f4grlvor] {
    flex: 1;
    min-width: 0;
}

.ab-rt[b-c9f4grlvor] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.ab-rtitle[b-c9f4grlvor] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ab-time[b-c9f4grlvor] {
    font-size: 0.72rem;
    color: #94a3b8;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.ab-msg[b-c9f4grlvor] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-top: 0.12rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ab-foot[b-c9f4grlvor] {
    padding: 0.5rem;
    border-top: 1px solid #eef1f5;
}

.ab-foot-link[b-c9f4grlvor] {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--df-primary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    letter-spacing: -0.01em;
}

.ab-foot-link:hover[b-c9f4grlvor] {
    background: var(--df-primary-light);
}

.ab-empty[b-c9f4grlvor] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.78rem;
}

.ab-empty-dot[b-c9f4grlvor] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--df-primary-light);
    color: var(--df-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.6rem;
    font-size: 1rem;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .ab-title[b-c9f4grlvor] {
    color: var(--df-text);
}
html.nav-theme-dark .ab-ghost:hover:not(:disabled)[b-c9f4grlvor] {
    color: var(--df-text);
    background: var(--df-bg);
}
html.nav-theme-dark .ab-row + .ab-row[b-c9f4grlvor] {
    border-top: 1px solid var(--df-border);
}
html.nav-theme-dark .ab-row:hover[b-c9f4grlvor] {
    background: var(--df-surface);
}
html.nav-theme-dark .ab-rtitle[b-c9f4grlvor] {
    color: var(--df-text);
}
html.nav-theme-dark .ab-foot[b-c9f4grlvor] {
    border-top: 1px solid var(--df-border);
}
/* /Components/Layout/FavoriteLinks.razor.rz.scp.css */
/* ── Favorites strip ── */
.favorite-links[b-kqiokcw7kt] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.3) transparent;
    padding: 0 0 2px;
}

.favorite-links[b-kqiokcw7kt]::-webkit-scrollbar {
    height: 3px;
}

.favorite-links[b-kqiokcw7kt]::-webkit-scrollbar-track {
    background: transparent;
}

.favorite-links[b-kqiokcw7kt]::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.3);
    border-radius: 3px;
}

/* ── Ghost link ── */
.fav-link[b-kqiokcw7kt] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--df-text-muted);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.01em;
    background: transparent;
    border: 1px solid transparent;
    flex-shrink: 0;
    transition: color 0.15s ease,
                background-color 0.15s ease,
                border-color 0.15s ease;
}

.fav-link:hover[b-kqiokcw7kt] {
    color: var(--df-primary-hover);
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.12);
    text-decoration: none;
}

.fav-link:active[b-kqiokcw7kt] {
    background: rgba(99, 102, 241, 0.10);
}

/* ── Pinned from the Shortcuts board ── */
.fav-strip-divider[b-kqiokcw7kt] {
    width: 1px;
    height: 16px;
    background: var(--df-border);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

.fav-ext[b-kqiokcw7kt] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--df-info);
    line-height: 1;
}

/* ── Icon ── */
.fav-link-icon[b-kqiokcw7kt] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.45;
    transition: opacity 0.15s ease;
    filter: brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(500%) hue-rotate(185deg) brightness(95%) contrast(90%);
}

.fav-link:hover .fav-link-icon[b-kqiokcw7kt] {
    opacity: 0.85;
    filter: brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(4867%) hue-rotate(238deg) brightness(92%) contrast(90%);
}

/* ── Text ── */
.fav-link-text[b-kqiokcw7kt] {
    line-height: 1;
}

/* ── Unread badge ── */
.fav-badge[b-kqiokcw7kt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: var(--df-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}


/* ── Right-click menu ── */
/* Placed at the cursor by Blazor, then clamped into the viewport by clampMenuToViewport() */
.fav-ctx[b-kqiokcw7kt] {
    position: fixed;
    z-index: 1095;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 12rem;
    max-width: calc(100vw - 1rem);
    padding: 0.3rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.fav-ctx-title[b-kqiokcw7kt] {
    padding: 0.3rem 0.5rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--df-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-ctx-item[b-kqiokcw7kt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: 0.35rem;
    background: none;
    color: var(--df-text);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.fav-ctx-item:hover[b-kqiokcw7kt] {
    color: var(--df-primary-hover);
    background: rgba(99, 102, 241, 0.08);
    text-decoration: none;
}

.fav-ctx-item-danger:hover[b-kqiokcw7kt] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.fav-ctx-glyph[b-kqiokcw7kt] {
    width: 0.9rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.7;
}

/* ── Dropdown chip ── */
.fav-group[b-kqiokcw7kt] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.fav-chip[b-kqiokcw7kt] {
    font-weight: 600;
    color: var(--df-text);
}

.fav-caret[b-kqiokcw7kt] {
    width: 0;
    height: 0;
    margin-left: 0.05rem;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.fav-chip-open[b-kqiokcw7kt] {
    color: var(--df-primary-hover);
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.20);
}

.fav-chip-open .fav-caret[b-kqiokcw7kt] {
    transform: rotate(180deg);
}

/* Dragging a favorite over a chip files it inside, rather than reordering the strip */
.fav-chip-drop[b-kqiokcw7kt] {
    color: var(--df-primary-hover);
    background: rgba(99, 102, 241, 0.10);
    border-color: var(--df-primary);
    border-style: dashed;
}

/* ── New-dropdown button ── */
.fav-add[b-kqiokcw7kt] {
    opacity: 0.55;
    padding: 0.3rem 0.4rem;
}

.fav-add:hover[b-kqiokcw7kt] {
    opacity: 1;
}

.fav-add-glyph[b-kqiokcw7kt] {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
}

/* ── Panel ── */
.fav-overlay[b-kqiokcw7kt] {
    position: fixed;
    inset: 0;
    z-index: 1085;
}

/* Positioned to `fixed` by positionFavPanel() once open — the strip clips overflow, so the
   absolute fallback here only holds until that first measurement lands. */
.fav-panel[b-kqiokcw7kt] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 13.5rem;
    max-width: calc(100vw - 1rem);
    max-height: min(70vh, 26rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.3rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.fav-panel-form[b-kqiokcw7kt] {
    min-width: 16.5rem;
}

.fav-panel-item[b-kqiokcw7kt] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--df-text);
    text-decoration: none;
    line-height: 1;
    cursor: grab;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.fav-panel-item:hover[b-kqiokcw7kt] {
    color: var(--df-primary-hover);
    background: rgba(99, 102, 241, 0.08);
    text-decoration: none;
}

.fav-panel-item:active[b-kqiokcw7kt] {
    cursor: grabbing;
}

.fav-panel-item-text[b-kqiokcw7kt] {
    flex: 1;
    white-space: nowrap;
}

.fav-panel-count[b-kqiokcw7kt] {
    font-size: 0.72rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
}

.fav-panel-empty[b-kqiokcw7kt] {
    margin: 0.15rem;
    padding: 0.85rem 0.5rem;
    border: 1px dashed var(--df-border);
    border-radius: 0.35rem;
    text-align: center;
    font-size: 0.74rem;
    color: var(--df-text-muted);
}

.fav-panel-divider[b-kqiokcw7kt] {
    height: 1px;
    margin: 0.3rem 0.15rem;
    background: var(--df-border);
}

.fav-panel-foot[b-kqiokcw7kt] {
    display: flex;
    gap: 0.15rem;
}

.fav-panel-action[b-kqiokcw7kt] {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 0.35rem;
    background: none;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--df-text-muted);
    text-align: left;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.fav-panel-action:hover[b-kqiokcw7kt] {
    color: var(--df-primary-hover);
    background: rgba(99, 102, 241, 0.08);
}

.fav-panel-action-danger:hover[b-kqiokcw7kt] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* ── Name + icon form ── */
.fav-form[b-kqiokcw7kt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.55rem;
}

.fav-form-label[b-kqiokcw7kt] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--df-text-muted);
}

.fav-form-input[b-kqiokcw7kt] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--df-border);
    border-radius: 0.375rem;
    background: var(--df-bg);
    color: var(--df-text);
    font-family: inherit;
    font-size: 0.82rem;
}

.fav-form-input:focus[b-kqiokcw7kt] {
    outline: none;
    border-color: var(--df-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.fav-icon-grid[b-kqiokcw7kt] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.15rem;
}

.fav-icon-opt[b-kqiokcw7kt] {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    background: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.fav-icon-opt:hover[b-kqiokcw7kt] {
    background: var(--df-bg);
}

.fav-icon-opt-on[b-kqiokcw7kt] {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.35);
}

.fav-icon-opt-on .fav-link-icon[b-kqiokcw7kt] {
    opacity: 0.9;
    filter: brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(4867%) hue-rotate(238deg) brightness(92%) contrast(90%);
}

.fav-form-actions[b-kqiokcw7kt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.1rem;
}

.fav-form-btn[b-kqiokcw7kt] {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--df-border);
    border-radius: 0.375rem;
    background: none;
    color: var(--df-text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.fav-form-btn:hover[b-kqiokcw7kt] {
    color: var(--df-text);
    background: var(--df-bg);
}

.fav-form-btn-primary[b-kqiokcw7kt] {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: #fff;
}

.fav-form-btn-primary:hover[b-kqiokcw7kt] {
    background: var(--df-primary-hover);
    border-color: var(--df-primary-hover);
    color: #fff;
}

.fav-form-btn-primary:disabled[b-kqiokcw7kt] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Separator dot between links ── */
/* Chips sit inside a positioned wrapper, so every strip-neighbour pairing gets a selector */
.fav-link + .fav-link[b-kqiokcw7kt]::before,
.fav-group + .fav-link[b-kqiokcw7kt]::before,
.fav-link + .fav-group > .fav-link[b-kqiokcw7kt]::before,
.fav-group + .fav-group > .fav-link[b-kqiokcw7kt]::before {
    content: "";
    position: absolute;
    left: -0.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #cbd5e1;
}

/* ── Drag-and-drop states ── */
.fav-link[draggable="true"][b-kqiokcw7kt] {
    cursor: grab;
}

.fav-link[draggable="true"]:active[b-kqiokcw7kt] {
    cursor: grabbing;
}

.fav-dragging[b-kqiokcw7kt] {
    opacity: 0.35;
}

.fav-drop-before[b-kqiokcw7kt] {
    box-shadow: -2px 0 0 0 #6366f1;
}

.fav-drop-after[b-kqiokcw7kt] {
    box-shadow: 2px 0 0 0 #6366f1;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .favorite-links[b-kqiokcw7kt] {
        max-width: 35vw;
    }

    .fav-link-text[b-kqiokcw7kt] {
        display: none;
    }

    .fav-link[b-kqiokcw7kt] {
        padding: 0.3rem;
    }

    .fav-link + .fav-link[b-kqiokcw7kt]::before,
    .fav-group + .fav-link[b-kqiokcw7kt]::before,
    .fav-link + .fav-group > .fav-link[b-kqiokcw7kt]::before,
    .fav-group + .fav-group > .fav-link[b-kqiokcw7kt]::before {
        display: none;
    }

    /* A chip keeps its label — an icon-only dropdown says nothing about what's in it */
    .fav-chip .fav-link-text[b-kqiokcw7kt] {
        display: inline;
    }
}
/* /Components/Layout/LoopPanel.razor.rz.scp.css */
/* ── top-bar button ── */

.loop-btn-wrap[b-xbra8e55bj] {
    position: relative;
    display: flex;
    align-items: center;
}

.loop-btn[b-xbra8e55bj] {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--df-text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--df-transition);
}

.loop-btn:hover[b-xbra8e55bj] {
    background: var(--df-bg);
    color: var(--df-text);
}

.loop-btn-on[b-xbra8e55bj] {
    background: var(--df-primary-light);
    color: var(--df-primary);
    border-color: var(--df-primary-border);
}

.loop-badge[b-xbra8e55bj] {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--df-danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid var(--df-surface);
}

/* ── the panel ──
   Docked, not modal: no backdrop, because the point is to read a thread while you keep
   working on the page behind it.

   Shape, shadow and inset match SidePanel (the drill-in panel on Bug Overview and the
   ticket preview) so the app has one idea of what a side panel is. The drag handle is
   the shared .side-panel-resize-handle from app.css, driven by side-panel-resize.js —
   the [data-resizable-panel] attribute on the <aside> is what that script keys off.

   A default in px rather than vw: 424px is the width the thread was designed to read at
   and it shouldn't grow on a wide monitor just because there's room. Dragging switches
   it to vw, which is fine — by then the user has picked the width. */

.loop-panel[b-xbra8e55bj] {
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    width: 424px;
    min-width: 340px;
    max-width: calc(100vw - 40px);
    background: var(--df-surface);
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    box-shadow:
        0 60px 100px -30px rgba(15, 23, 42, 0.22),
        0 20px 40px -12px rgba(15, 23, 42, 0.12),
        0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--df-z-dropdown);
    animation: lp-slide-in-b-xbra8e55bj 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes lp-slide-in-b-xbra8e55bj {
    from {
        transform: translateX(calc(100% + 20px));
        opacity: 0.8;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loop-panel[b-xbra8e55bj] {
        animation: none;
    }
}

@media (max-width: 640px) {
    .loop-panel[b-xbra8e55bj] {
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
        min-width: 0;
        /* Must be restated: the desktop max-width is calc(100vw - 40px), which would win
           over the width above and leave the panel sitting 30px from the left edge and
           8px from the right. */
        max-width: calc(100vw - 16px);
        border-radius: 10px;
    }
}

.lp-head[b-xbra8e55bj] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--df-border);
}

.lp-title[b-xbra8e55bj] {
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

.lp-title i[b-xbra8e55bj] {
    color: var(--df-primary);
}

.lp-sp[b-xbra8e55bj] {
    flex: 1;
}

.lp-ico[b-xbra8e55bj] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--df-transition);
}

.lp-ico:hover[b-xbra8e55bj] {
    background: var(--df-bg);
    color: var(--df-text);
}

/* On-state for the notification bell: the icon already carries the meaning (bell vs
   struck-through bell), the colour only reinforces it. */
.lp-ico-on[b-xbra8e55bj] {
    color: var(--df-primary);
}

.lp-primary[b-xbra8e55bj] {
    border: none;
    background: var(--df-primary);
    color: #fff;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background var(--df-transition);
}

.lp-primary:hover[b-xbra8e55bj] {
    background: var(--df-primary-hover);
}

/* Asks once, in context, behind a real click. A permission dialog on page load is
   auto-denied by some browsers and resented by everyone else. */
.lp-notify[b-xbra8e55bj] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 14px 0;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--df-primary-light);
    border: 1px solid var(--df-primary-border);
}

.lp-notify > i[b-xbra8e55bj] {
    color: var(--df-primary);
    flex: none;
}

.lp-notify-t[b-xbra8e55bj] {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--df-text);
    line-height: 1.4;
}

.lp-notify-yes[b-xbra8e55bj] {
    flex: none;
    border: none;
    background: var(--df-primary);
    color: #fff;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--df-transition);
}

.lp-notify-yes:hover[b-xbra8e55bj] {
    background: var(--df-primary-hover);
}

/* ── search + filters ── */

.lp-search[b-xbra8e55bj] {
    flex: none;
    position: relative;
    padding: 10px 14px 8px;
}

.lp-search i[b-xbra8e55bj] {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-45%);
    color: var(--df-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.lp-search input[b-xbra8e55bj] {
    width: 100%;
    /* app.css has no global border-box reset (only .login-input sets it), so width:100%
       plus horizontal padding would push the input past the panel's right edge. */
    box-sizing: border-box;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    background: var(--df-bg);
    font-size: 0.85rem;
}

.lp-search input:focus[b-xbra8e55bj] {
    outline: none;
    border-color: var(--df-primary);
    background: var(--df-surface);
}

.lp-filters[b-xbra8e55bj] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 0 14px 9px;
}

.lp-f[b-xbra8e55bj] {
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: var(--df-text-muted);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.73rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--df-transition);
}

.lp-f:hover[b-xbra8e55bj] {
    border-color: var(--df-primary);
    color: var(--df-primary);
}

.lp-f-on[b-xbra8e55bj] {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: #fff;
}

/* ── "about this page" ── */

.lp-ctx[b-xbra8e55bj] {
    margin: 0 14px 10px;
    padding: 9px 11px;
    border: 1px solid var(--df-primary-border);
    background: var(--df-primary-light);
    border-radius: 9px;
}

.lp-ctx-t[b-xbra8e55bj] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--df-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.lp-ctx-b[b-xbra8e55bj] {
    font-size: 0.79rem;
    line-height: 1.5;
}

.lp-ctx-b a[b-xbra8e55bj] {
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

/* ── conversation rows ── */

.lp-list[b-xbra8e55bj] {
    flex: 1;
    overflow-y: auto;
}

.lp-row[b-xbra8e55bj] {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    position: relative;
    transition: background var(--df-transition);
}

.lp-row:hover[b-xbra8e55bj] {
    background: var(--df-bg);
}

.lp-row-unread[b-xbra8e55bj] {
    background: #fbfcff;
}

.lp-row-unread[b-xbra8e55bj]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--df-primary);
}

.lp-rb[b-xbra8e55bj] {
    min-width: 0;
    flex: 1;
}

.lp-rt[b-xbra8e55bj] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.lp-subj[b-xbra8e55bj] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.lp-row-unread .lp-subj[b-xbra8e55bj] {
    font-weight: 700;
}

.lp-time[b-xbra8e55bj] {
    font-size: 0.7rem;
    color: var(--df-text-muted);
    flex: none;
}

.lp-prev[b-xbra8e55bj] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-chips[b-xbra8e55bj] {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.lp-ext[b-xbra8e55bj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--df-warning);
}

/* A group's own thread, as opposed to an ad-hoc conversation that happens to have several
   people on it. Same info colour the group avatar uses in the pickers. */
.lp-group[b-xbra8e55bj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--df-info);
}

.lp-muted[b-xbra8e55bj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--df-text-muted);
}

.lp-pill[b-xbra8e55bj] {
    flex: none;
    align-self: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--df-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.lp-pill-men[b-xbra8e55bj] {
    background: var(--df-danger);
}

.lp-empty[b-xbra8e55bj] {
    padding: 40px 20px;
    text-align: center;
    color: var(--df-text-muted);
    font-size: .82rem;
    line-height: 1.6;
}

.lp-empty i[b-xbra8e55bj] {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 8px;
    opacity: .5;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .loop-panel[b-xbra8e55bj] {
    border: 1px solid var(--df-border);
}
html.nav-theme-dark .lp-row[b-xbra8e55bj] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .lp-row-unread[b-xbra8e55bj] {
    background: var(--df-primary-light);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-1ljzhzqrsz] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Applied when the page is loaded with ?embed=true (inside the list-row preview
   iframe). Drops the sidebar + top bar so the iframe shows only page content,
   and strips the outer horizontal padding so the page uses the full iframe width. */
.page.embed-mode[b-1ljzhzqrsz] {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.page.embed-mode main[b-1ljzhzqrsz] {
    min-height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Override Bootstrap's px-4 on the .content wrapper. Using !important because
   .px-4 sets padding-left/right with its own specificity. The ::deep lets this
   rule break out of MainLayout's scope and also affect the embedded page's
   first-level descendants which may have their own max-width / container. */
.page.embed-mode .content[b-1ljzhzqrsz],
.page.embed-mode article.content.px-4[b-1ljzhzqrsz] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
}

[b-1ljzhzqrsz] .page.embed-mode .container,
[b-1ljzhzqrsz] .page.embed-mode .container-fluid,
[b-1ljzhzqrsz] .page.embed-mode .container-sm,
[b-1ljzhzqrsz] .page.embed-mode .container-md,
[b-1ljzhzqrsz] .page.embed-mode .container-lg,
[b-1ljzhzqrsz] .page.embed-mode .container-xl,
[b-1ljzhzqrsz] .page.embed-mode .container-xxl {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

main[b-1ljzhzqrsz] {
    flex: 1;
    background-color: var(--df-bg);
    min-height: 100vh;
    min-width: 0;
    overflow-x: hidden;
}

.sidebar[b-1ljzhzqrsz] {
    background: #f3f5f7;
    border-right: 1px solid #e5e8ec;
}

/* Left group in top bar: toggle + favorites */
.top-row-start[b-1ljzhzqrsz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 0%;
}

/* Toggle button in top bar */
.sidebar-toggle-btn[b-1ljzhzqrsz] {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 0.375rem;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    background: none;
    border: none;
    padding: 0;
}

.sidebar-toggle-btn:hover[b-1ljzhzqrsz] {
    background-color: #f1f5f9;
}

.toggle-bar[b-1ljzhzqrsz] {
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--df-text-muted);
    border-radius: 1px;
    transition: all 0.3s ease;
}

.top-row[b-1ljzhzqrsz] {
    background-color: var(--df-surface);
    border-bottom: 1px solid var(--df-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .top-row[b-1ljzhzqrsz]  a, .top-row[b-1ljzhzqrsz]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.875rem;
        color: var(--df-text-muted);
        transition: color 0.2s ease;
    }

    .top-row[b-1ljzhzqrsz]  a:hover, .top-row[b-1ljzhzqrsz]  .btn-link:hover {
        text-decoration: none;
        color: #0d9488;
    }

    .top-row[b-1ljzhzqrsz]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ── Phone: the sidebar is a drawer ──────────────────────────────────────────
   Below this width the shell used to stack — .page went column, so the entire
   navigation rendered above every page and you scrolled past the menu to reach
   the content. It is now a drawer over the page, opened by the hamburger that
   was previously hidden at exactly the size where it was most needed. */
@media (max-width: 640.98px) {
    .top-row[b-1ljzhzqrsz] {
        justify-content: space-between;
        /* Stays put while the article scrolls under it: on a phone the alert bell and the
           timecard button are the reason you opened the app, and hunting back up for them
           after scrolling a ticket is the difference between usable and not. */
        position: sticky;
        top: 0;
        z-index: 20;
        gap: 0.35rem;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .top-row[b-1ljzhzqrsz]  a, .top-row[b-1ljzhzqrsz]  .btn-link {
        margin-left: 0;
    }

    /* The hamburger is the only way to the menu here, so it is not optional. */
    .sidebar-toggle-btn[b-1ljzhzqrsz] {
        display: flex;
    }

    /* Favourites come off the top bar. They are a desktop shortcut rail — a row of unlabelled
       icons squeezed between the hamburger and the avatar, each well under a thumb's width, with
       the ones that don't fit simply cut off. Everything they point at is two taps away in the
       drawer, which has room to say what each one is. */
    .top-row-start[b-1ljzhzqrsz]  .favorite-links {
        display: none;
    }

    .sidebar[b-1ljzhzqrsz] {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: min(84vw, 300px);
        height: 100vh;
        height: 100dvh;    /* keeps the drawer off Safari's toolbars; vh above is the fallback */
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
    }

    .page.nav-open .sidebar[b-1ljzhzqrsz] {
        transform: translateX(0);
    }

    .nav-scrim[b-1ljzhzqrsz] {
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .page.nav-open .nav-scrim[b-1ljzhzqrsz] {
        opacity: 1;
        pointer-events: auto;
    }

    article.content[b-1ljzhzqrsz] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* The scrim is a phone affordance only; at any width where the sidebar is a column it must not
   exist at all, or it would sit invisibly over the page waiting to swallow a click. */
@media (min-width: 641px) {
    .nav-scrim[b-1ljzhzqrsz] {
        display: none;
    }
}

@media (min-width: 641px) {
    .page[b-1ljzhzqrsz] {
        flex-direction: row;
    }

    .sidebar[b-1ljzhzqrsz] {
        width: 260px;
        min-width: 260px;
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width 0.3s ease, min-width 0.3s ease;
    }

    main[b-1ljzhzqrsz] {
        height: 100vh;
        overflow-y: auto;
        transition: margin-left 0.3s ease;
    }

    .top-row[b-1ljzhzqrsz] {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .top-row.auth[b-1ljzhzqrsz]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-1ljzhzqrsz], article[b-1ljzhzqrsz] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* Show toggle button on desktop */
    .sidebar-toggle-btn[b-1ljzhzqrsz] {
        display: flex;
    }

    /* ── Collapsed sidebar ── */
    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz] {
        width: 64px;
        min-width: 64px;
        overflow: hidden;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 50;
        transition: width 0.25s ease, min-width 0.25s ease, box-shadow 0.25s ease;
    }

    .page.sidebar-collapsed main[b-1ljzhzqrsz] {
        margin-left: 64px;
    }

    /* Hide brand text when collapsed */
    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .brand-text {
        display: none;
    }

    /* Center brand icon when collapsed */
    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .top-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center;
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .top-row .container-fluid {
        padding: 0;
        justify-content: center;
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .navbar-brand {
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .brand-icon {
        font-size: 0.875rem;
        width: 28px;
        height: 28px;
    }

    /* Strip card styling when collapsed */
    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-section {
        background: none;
        border: none;
        padding: 0;
        margin: 0.1rem 0;
        border-radius: 0;
    }

    /* Show section headers as icon-only when collapsed */
    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-section-header {
        justify-content: center;
        padding: 0.4rem;
        margin: 0;
        border-radius: 0.375rem;
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-section-header:hover {
        background: rgba(15,23,42,0.06);
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-section-title {
        display: none;
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-section-icon {
        margin-right: 0;
    }

    /* Hide child items and search when collapsed */
    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-item {
        display: none;
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-search {
        display: none;
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-section-chevron {
        display: none;
    }

    /* Compact footer when collapsed */
    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-footer {
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.5rem 0.25rem;
        justify-content: center;
    }

    .page.sidebar-collapsed .sidebar[b-1ljzhzqrsz]  .nav-version {
        display: none;
    }

    /* Restore footer on hover-expand */
    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-footer {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        justify-content: center;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-version {
        display: block;
    }

    /* Hamburger → X animation when collapsed */
    .page.sidebar-collapsed main .toggle-bar:nth-child(1)[b-1ljzhzqrsz] {
        transform: rotate(45deg) translate(4.5px, 4.5px);
    }

    .page.sidebar-collapsed main .toggle-bar:nth-child(2)[b-1ljzhzqrsz] {
        opacity: 0;
    }

    .page.sidebar-collapsed main .toggle-bar:nth-child(3)[b-1ljzhzqrsz] {
        transform: rotate(-45deg) translate(4.5px, -4.5px);
    }

    /* ── Expand on hover when collapsed ── */
    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz] {
        width: 260px;
        box-shadow: 4px 0 24px rgba(15,23,42,0.12);
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .brand-text {
        display: inline;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .top-row {
        padding-left: 1rem !important;
        justify-content: flex-start;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .top-row .container-fluid {
        padding: 0 var(--bs-gutter-x, 0.75rem);
        justify-content: flex-start;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .navbar-brand {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .brand-icon {
        font-size: 0.95rem;
        width: 30px;
        height: 30px;
    }

    /* Restore card styling on hover */
    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-section {
        background: var(--df-surface);
        border: 1px solid var(--df-border);
        border-radius: 0.625rem;
        padding: 0.375rem 0;
        margin: 0.25rem 0.5rem;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-section-header {
        justify-content: flex-start;
        padding: 0.35rem 0.75rem 0.2rem;
        margin: 0;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-section-title {
        display: inline;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-search {
        display: block;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-item {
        display: block;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-section-chevron {
        display: inline-flex;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-section.section-collapsed .nav-section-items {
        display: none;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-link {
        font-size: 0.875rem;
        justify-content: flex-start;
    }

    .page.sidebar-collapsed .sidebar.sidebar-hover[b-1ljzhzqrsz]  .nav-link .bi {
        margin-right: 0.625rem;
    }
}

#blazor-error-ui[b-1ljzhzqrsz] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-radius: 0;
}

    #blazor-error-ui .dismiss[b-1ljzhzqrsz] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media print {
    .sidebar[b-1ljzhzqrsz] {
        display: none !important;
    }

    .top-row[b-1ljzhzqrsz] {
        display: none !important;
    }

    .page[b-1ljzhzqrsz] {
        display: block !important;
    }

    main[b-1ljzhzqrsz] {
        background-color: var(--df-surface) !important;
        min-height: auto !important;
    }

    article[b-1ljzhzqrsz] {
        padding: 0 !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-naw8tjd2bm] {
    min-height: 3.25rem;
    background: transparent;
    border-bottom: 1px solid transparent;
    position: relative;
}

.navbar-brand[b-naw8tjd2bm] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    color: var(--df-text) !important;
}

.navbar-brand:hover[b-naw8tjd2bm] {
    color: #0f172a !important;
}

.brand-icon[b-naw8tjd2bm] {
    font-size: 0.875rem;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, var(--df-primary));
    color: #ffffff;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(79,70,229,0.3);
    line-height: 1;
}

.brand-text[b-naw8tjd2bm] {
    transition: opacity 0.2s ease;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.brand-sub[b-naw8tjd2bm] {
    font-size: 0.65rem;
    font-weight: 400;
    color: #94a3b8;
}

.bi[b-naw8tjd2bm] {
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-right: 0.65rem;
    top: -1px;
    background-size: cover;
    opacity: 0.75;
    filter: brightness(0) saturate(100%) invert(42%) sepia(8%) saturate(530%) hue-rotate(181deg) brightness(95%) contrast(88%);
    transition: opacity 0.12s ease, filter 0.12s ease;
    flex-shrink: 0;
}

.nav-item[b-naw8tjd2bm] {
    font-size: 0.875rem;
    padding: 0 0.6rem;
}

    .nav-item[b-naw8tjd2bm]  .nav-link {
        color: #475569;
        background: none;
        border: none;
        border-radius: 0.45rem;
        height: 2.15rem;
        display: flex;
        align-items: center;
        line-height: 2.15rem;
        width: 100%;
        font-weight: 500;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.15s ease, background-color 0.15s ease;
        padding: 0 0.7rem;
        position: relative;
    }

.nav-item[b-naw8tjd2bm]  a.active {
    background: rgba(99,102,241,0.1);
    color: var(--df-primary-hover);
    font-weight: 600;
    box-shadow: none;
}

.nav-item[b-naw8tjd2bm]  a.active::before {
    content: none;
}

.nav-item[b-naw8tjd2bm]  a.active .bi {
    filter: brightness(0) saturate(100%) invert(22%) sepia(76%) saturate(3340%) hue-rotate(233deg) brightness(92%) contrast(98%);
    opacity: 1;
}

.nav-item[b-naw8tjd2bm]  .nav-link:hover {
    background-color: #f3f4f6;
    color: #0f172a;
}

.nav-item[b-naw8tjd2bm]  .nav-link:hover .bi {
    opacity: 1;
}

/* The nav is always rendered. It used to be hidden below 641px behind the stock template's
   checkbox toggler — a second, competing way to open a menu that now lives in a drawer with its
   own hamburger in the top bar. Two togglers meant the drawer slid open showing nothing but the
   brand. The checkbox is gone from the markup and these rules with it. */
.nav-scrollable[b-naw8tjd2bm] {
    display: block;
    height: calc(100vh - 3.5rem);
    height: calc(100dvh - 3.5rem);
    overflow-y: auto;
}

/* ---- Sidebar scrollbar ---- */
.nav-scrollable[b-naw8tjd2bm]::-webkit-scrollbar {
    width: 4px;
}

.nav-scrollable[b-naw8tjd2bm]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-scrollable[b-naw8tjd2bm]::-webkit-scrollbar-thumb {
    background: rgba(15,23,42,0.15);
    border-radius: 2px;
}

.nav-scrollable[b-naw8tjd2bm]::-webkit-scrollbar-thumb:hover {
    background: rgba(15,23,42,0.3);
}

/* ---- Nav Search ---- */
.nav-search[b-naw8tjd2bm] {
    padding: 0.6rem 0.75rem 0.5rem;
}

.nav-search-input[b-naw8tjd2bm] {
    width: 100%;
    padding: 0.4rem 0.625rem 0.4rem 1.85rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background-color: #f1f5f9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.6rem center;
    background-size: 0.8rem;
    color: var(--df-text);
    font-size: 0.78rem;
    outline: none;
    box-shadow: none;
    transition: all 0.15s ease;
}

.nav-search-input[b-naw8tjd2bm]::placeholder {
    color: #94a3b8;
}

.nav-search-input:focus[b-naw8tjd2bm] {
    border-color: #cbd5e1;
    background-color: var(--df-surface);
    box-shadow: 0 0 0 3px rgba(15,23,42,0.06);
}

/* ---- Favorite star button ---- */
.nav-sub-item[b-naw8tjd2bm] {
    position: relative;
}

.nav-fav-btn[b-naw8tjd2bm] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: rgba(15,23,42,0.25);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    z-index: 10;
}

html.nav-theme-dark .nav-fav-btn[b-naw8tjd2bm] {
    color: rgba(226, 232, 240, 0.35);
}

.nav-sub-item:hover .nav-fav-btn[b-naw8tjd2bm] {
    opacity: 1;
}

.nav-fav-btn.is-fav[b-naw8tjd2bm] {
    color: #fbbf24;
    opacity: 1;
}

.nav-fav-btn:hover[b-naw8tjd2bm] {
    color: #fbbf24;
    opacity: 1;
}

.nav-badge[b-naw8tjd2bm] {
    position: absolute;
    right: 1.8rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    z-index: 5;
    pointer-events: none;
}

.nav-footer[b-naw8tjd2bm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--df-border);
    margin-top: auto;
}

.nav-version[b-naw8tjd2bm] {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */

/* ── Phone: the nav is something you tap, not click ──────────────────────────
   In the drawer these are the only controls on screen, and they were sized for a mouse: 34px
   rows and a 24px star. Apple asks for 44pt, and a star that small sitting inside a link you
   meant to open is a coin-flip between navigating and un-favouriting something.

   Last in the file on purpose: the base .nav-fav-btn sizes appear further up and would otherwise
   win on source order alone. */
@media (max-width: 640.98px) {
    .nav-item[b-naw8tjd2bm]  .nav-link {
        height: 2.75rem;
        line-height: 2.75rem;
        font-size: 0.95rem;
    }

    /* The star is revealed by hover, which a phone does not have — so it is either invisible or,
       enlarged to a thumb-sized target, an invisible 40px trap over the right end of every link
       that un-favourites the page you were trying to open. Favouriting is a desktop action, and
       the strip it feeds is itself hidden on phones (see MainLayout), so the control goes too. */
    .nav-fav-btn[b-naw8tjd2bm] {
        display: none;
    }

    .nav-search-input[b-naw8tjd2bm] {
        height: 2.5rem;
    }

    .nav-section-header[b-naw8tjd2bm] {
        min-height: 2.6rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-mpjz7kbq3a],
.components-reconnect-repeated-attempt-visible[b-mpjz7kbq3a],
.components-reconnect-failed-visible[b-mpjz7kbq3a],
.components-pause-visible[b-mpjz7kbq3a],
.components-resume-failed-visible[b-mpjz7kbq3a],
.components-rejoining-animation[b-mpjz7kbq3a] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-mpjz7kbq3a],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-mpjz7kbq3a],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-mpjz7kbq3a],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-mpjz7kbq3a],
#components-reconnect-modal.components-reconnect-retrying[b-mpjz7kbq3a],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-mpjz7kbq3a],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-mpjz7kbq3a],
#components-reconnect-modal.components-reconnect-failed[b-mpjz7kbq3a],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-mpjz7kbq3a] {
    display: block;
}


#components-reconnect-modal[b-mpjz7kbq3a] {
    background-color: var(--df-surface);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-mpjz7kbq3a 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-mpjz7kbq3a 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-mpjz7kbq3a 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-mpjz7kbq3a]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-mpjz7kbq3a 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-mpjz7kbq3a {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-mpjz7kbq3a {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-mpjz7kbq3a {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-mpjz7kbq3a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-mpjz7kbq3a] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-mpjz7kbq3a] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-mpjz7kbq3a] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-mpjz7kbq3a] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-mpjz7kbq3a] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-mpjz7kbq3a] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-mpjz7kbq3a 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-mpjz7kbq3a] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-mpjz7kbq3a {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TimecardButton.razor.rz.scp.css */
/* === Top-bar timecard chip ===
   One control where there used to be a pill and a button. Fixed-ish width and no seconds, so
   the bar stops reflowing every time a digit rolls over or you switch tasks. */
.tc-btn-wrap[b-bwuqdxr3oo] {
    position: relative;
    display: inline-flex;
}

.tc-chip[b-bwuqdxr3oo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 32px;
    padding: 0 0.6rem;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    background: transparent;
    color: var(--df-text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--df-transition), border-color var(--df-transition), color var(--df-transition);
}

.tc-chip:hover[b-bwuqdxr3oo] {
    border-color: var(--df-primary);
    color: var(--df-primary);
}

/* A timer is running. Green field rather than green text alone — this is the state that has to
   be readable from across the room, because the cost of missing it is an unlogged afternoon. */
.tc-chip--running[b-bwuqdxr3oo] {
    border-color: #bbf7d0;
    background: #dcfce7;
    color: #166534;
}

.tc-chip--running:hover[b-bwuqdxr3oo] {
    border-color: #86efac;
    background: #bbf7d0;
    color: #166534;
}

/* Clocked in, tracking nothing. */
.tc-chip--idle[b-bwuqdxr3oo] {
    border-color: var(--df-warning-border);
    background: var(--df-warning-light);
    color: #92400e;
}

.tc-chip--idle:hover[b-bwuqdxr3oo] {
    border-color: #fcd34d;
    background: #fef3c7;
    color: #92400e;
}

.tc-chip-time[b-bwuqdxr3oo] {
    font-variant-numeric: tabular-nums;
}

/* How many other timers are also running. Quieter than the time it sits next to — it is a
   qualifier on that number, not a second number. */
.tc-chip-count[b-bwuqdxr3oo] {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.7;
}

.tc-chip-emoji[b-bwuqdxr3oo] {
    line-height: 1;
}

.tc-chip:focus-visible[b-bwuqdxr3oo] {
    outline: 2px solid var(--df-primary);
    outline-offset: 2px;
}

/* --- Speech bubble under the button (idle state) --- */
.tc-btn-bubble[b-bwuqdxr3oo] {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform-origin: 50% 0%;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid var(--df-warning-border);
    padding: 0.3rem 0.65rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    animation: tc-bubble-pop-b-bwuqdxr3oo 18s ease-in-out infinite;
}

.tc-btn-bubble[b-bwuqdxr3oo]::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fef3c7;
    filter: drop-shadow(0 -1px 0 var(--df-warning-border));
}

@keyframes tc-bubble-pop-b-bwuqdxr3oo {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.6); }
    3%   { opacity: 1; transform: translateX(-50%) translateY(6px) scale(1.12); }
    7%   { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(0.97); }
    10%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    30%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    34%  { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.85); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.6); }
}

/* === Modal Shell ===
   Marker class with no visual styling of its own — purely a hook for dark-mode CSS
   scoping. The modal renders with default Bootstrap styling, matching every other
   modal in the app. */

/* === Clock-In (compact) === */
.tc-clockin-compact[b-bwuqdxr3oo] {
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f0fdf4, var(--df-success-light));
    border-bottom: 1px solid #d1fae5;
}

.tc-clockin-input[b-bwuqdxr3oo] {
    width: auto;
    max-width: 180px;
    font-size: 0.875rem;
}

/* === Stats Strip === */
.tc-stats-strip[b-bwuqdxr3oo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f0fdf4, var(--df-success-light));
    border-bottom: 1px solid #d1fae5;
}

.tc-stat[b-bwuqdxr3oo] {
    text-align: center;
}

.tc-stat-value[b-bwuqdxr3oo] {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.tc-stat-primary[b-bwuqdxr3oo] {
    color: #16a34a;
}

.tc-stat-absence[b-bwuqdxr3oo] {
    color: var(--df-info);
}

.tc-stat-lunch[b-bwuqdxr3oo] {
    color: #b45309;
    font-size: 1rem;
}

.tc-stat-label[b-bwuqdxr3oo] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--df-text-muted);
    font-weight: 600;
    margin-top: 2px;
}

.tc-stat-divider[b-bwuqdxr3oo] {
    width: 1px;
    height: 32px;
    background: #d1d5db;
    flex-shrink: 0;
}

/* === Date Bar === */
.tc-date-bar[b-bwuqdxr3oo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    background: var(--df-surface);
    border-bottom: 1px solid #f3f4f6;
}

/* === Active Timers === */
.tc-active-timers[b-bwuqdxr3oo] {
    margin: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--df-warning-light);
    border: 1px solid var(--df-warning-border);
}

.tc-label[b-bwuqdxr3oo] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
}

.tc-timer-row[b-bwuqdxr3oo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.25rem;
    background: rgba(255, 255, 255, 0.6);
}

.tc-timer-row:last-child[b-bwuqdxr3oo] {
    margin-bottom: 0;
}

.tc-timer-name[b-bwuqdxr3oo] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.tc-timer-sub[b-bwuqdxr3oo] {
    font-size: 0.72rem;
    color: #9ca3af;
}

.tc-timer-badge[b-bwuqdxr3oo] {
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
}

/* === Top Split: Log Work (left) + Summary (right) === */
.tc-split[b-bwuqdxr3oo] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
    gap: 1rem;
    padding: 0.75rem;
    align-items: stretch;
}

.tc-split > *[b-bwuqdxr3oo] {
    display: flex;
    flex-direction: column;
}

.tc-split-right .tc-summary-card[b-bwuqdxr3oo] {
    flex: 1 1 auto;
}

.tc-split-left[b-bwuqdxr3oo],
.tc-split-right[b-bwuqdxr3oo] {
    min-width: 0;
}

.tc-split-left .tc-log-panel[b-bwuqdxr3oo] {
    margin: 0;
}

.tc-summary-card[b-bwuqdxr3oo] {
    border: 1px solid var(--df-border);
    border-radius: 8px;
    background: var(--df-surface);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.tc-summary-date[b-bwuqdxr3oo] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.25rem;
}

.tc-summary-row[b-bwuqdxr3oo] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.tc-summary-label[b-bwuqdxr3oo] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--df-text-muted);
    font-weight: 600;
}

.tc-summary-value[b-bwuqdxr3oo] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1f2937;
}

/* === Unified Log-Work Panel === */
.tc-log-panel[b-bwuqdxr3oo] {
    margin: 0.75rem;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--df-surface);
}

.tc-log-header[b-bwuqdxr3oo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-bottom: 1px solid var(--df-border);
}

.tc-mode-group[b-bwuqdxr3oo] {
    display: inline-flex;
    gap: 2px;
    background: var(--df-border);
    padding: 2px;
    border-radius: 6px;
}

.tc-mode-btn[b-bwuqdxr3oo] {
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.tc-mode-btn:hover[b-bwuqdxr3oo] {
    color: #374151;
}

.tc-mode-btn.active[b-bwuqdxr3oo] {
    background: var(--df-surface);
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.tc-log-body[b-bwuqdxr3oo] {
    padding: 0.75rem;
}

.tc-picker-row[b-bwuqdxr3oo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tc-search-wrap[b-bwuqdxr3oo] {
    position: relative;
    flex-grow: 1;
}

.tc-search-icon[b-bwuqdxr3oo] {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    opacity: 0.5;
    pointer-events: none;
}

.tc-search-input[b-bwuqdxr3oo] {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    font-size: 0.78rem;
}

.tc-search-clear[b-bwuqdxr3oo] {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0 0.25rem;
}

.tc-search-clear:hover[b-bwuqdxr3oo] {
    color: #374151;
}

.tc-inputs-row[b-bwuqdxr3oo] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tc-input-field[b-bwuqdxr3oo] {
    display: flex;
    flex-direction: column;
}

.tc-input-field label[b-bwuqdxr3oo] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--df-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.tc-input-field input[b-bwuqdxr3oo] {
    width: 110px;
    font-size: 0.78rem;
}

.tc-inputs-hint[b-bwuqdxr3oo] {
    font-size: 0.72rem;
    color: #9ca3af;
    flex-grow: 1;
    align-self: center;
}

.tc-submit[b-bwuqdxr3oo] {
    font-size: 0.78rem;
    padding: 0.3rem 1.25rem;
    margin-left: auto;
}

/* === Time Entries (Timeline) === */
.tc-entries-wrap[b-bwuqdxr3oo] {
    margin: 0.75rem;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    overflow: hidden;
}

.tc-entries-header[b-bwuqdxr3oo] {
    padding: 0.6rem 0.75rem;
    background: #f9fafb;
    border-bottom: 1px solid var(--df-border);
}

.tc-grid[b-bwuqdxr3oo] {
    display: flex;
    flex-direction: column;
    font-variant-numeric: tabular-nums;
}

.tc-grid-head[b-bwuqdxr3oo],
.tc-grid-row[b-bwuqdxr3oo] {
    display: grid;
    grid-template-columns: 78px minmax(150px, 1fr) minmax(150px, 1.3fr) 95px 95px 72px 72px;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
}

.tc-grid-head[b-bwuqdxr3oo] {
    background: #f9fafb;
    border-bottom: 1px solid var(--df-border);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--df-text-muted);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tc-grid-row[b-bwuqdxr3oo] {
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.78rem;
    transition: background 0.15s;
    min-height: 44px;
    background: var(--df-surface);
}

.tc-grid-row:nth-child(even)[b-bwuqdxr3oo] {
    background: #fafbfc;
}

.tc-grid-row:last-child[b-bwuqdxr3oo] {
    border-bottom: none;
}

.tc-grid-row:hover[b-bwuqdxr3oo] {
    background: var(--df-primary-light);
}

.tc-grid-row.is-running[b-bwuqdxr3oo] {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    padding-left: calc(0.9rem - 3px);
}

.tc-grid-row.is-running:hover[b-bwuqdxr3oo] {
    background: var(--df-success-light);
}

.tc-grid-row.is-editing[b-bwuqdxr3oo] {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    padding-left: calc(0.9rem - 3px);
}

.tc-grid-row.is-absence[b-bwuqdxr3oo] {
    border-left: 3px solid var(--df-info);
    padding-left: calc(0.9rem - 3px);
}

.tc-g-time[b-bwuqdxr3oo] {
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.25;
}

.tc-g-date[b-bwuqdxr3oo] {
    font-size: 0.65rem;
    color: #9ca3af;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.tc-g-time-val[b-bwuqdxr3oo] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.tc-g-duration[b-bwuqdxr3oo] {
    text-align: right;
}

.tc-g-type[b-bwuqdxr3oo] {
    white-space: nowrap;
}

.tc-g-item[b-bwuqdxr3oo] {
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-g-details[b-bwuqdxr3oo] {
    color: var(--df-text-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-g-actions[b-bwuqdxr3oo] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

.tc-g-actions .btn[b-bwuqdxr3oo] {
    font-size: 1rem;
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
}

.tc-lunch-sub[b-bwuqdxr3oo] {
    font-size: 0.65rem;
    color: #92400e;
    margin-top: 2px;
}

.tc-edit-time[b-bwuqdxr3oo] {
    width: 100%;
    max-width: 110px;
    font-size: 0.78rem;
    padding: 0.2rem 0.4rem;
}

/* === Entry Details === */
.tc-entry-name[b-bwuqdxr3oo] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.tc-entry-sub[b-bwuqdxr3oo] {
    font-size: 0.72rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-type-badge[b-bwuqdxr3oo] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    margin-right: 4px;
}

.tc-type-task[b-bwuqdxr3oo] {
    background: #dbeafe;
    color: #1e40af;
}

.tc-type-project[b-bwuqdxr3oo] {
    background: #ede9fe;
    color: #5b21b6;
}

.tc-type-timecode[b-bwuqdxr3oo] {
    background: var(--df-border);
    color: #374151;
}

.tc-type-absence[b-bwuqdxr3oo] {
    background: #fef3c7;
    color: #92400e;
}

.tc-entry-hours[b-bwuqdxr3oo] {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: center;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid var(--df-border);
}

.tc-entry-hours--running[b-bwuqdxr3oo] {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.tc-lunch-badge[b-bwuqdxr3oo] {
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    background: #fef3c7;
    color: #92400e;
}

.tc-lunch-row[b-bwuqdxr3oo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    background: var(--df-warning-light);
    border-top: 1px solid var(--df-warning-border);
    color: #92400e;
}

/* === Entry Actions === */
.tc-entry-actions[b-bwuqdxr3oo] {
    opacity: 0;
    transition: opacity 0.15s;
}

.tc-tl-row:hover .tc-entry-actions[b-bwuqdxr3oo] {
    opacity: 1;
}

/* === Pulsing Dot === */
.tc-pulse-dot[b-bwuqdxr3oo] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: tc-pulse-b-bwuqdxr3oo 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.tc-pulse-green[b-bwuqdxr3oo] {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
}

.tc-pulse-amber[b-bwuqdxr3oo] {
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
}

@keyframes tc-pulse-b-bwuqdxr3oo {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50% { box-shadow: 0 0 0 4px transparent; opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
}

/* ============================================
   Dark theme overrides
   ============================================ */
/* The chip sits on the dark top bar, so it gets the same treatment the alert bell does there:
   a tinted field rather than the light one, which on #0f172a reads as a lit panel. */
html.nav-theme-dark .tc-chip[b-bwuqdxr3oo] {
    border-color: #334155;
    color: #cbd5e1;
}

html.nav-theme-dark .tc-chip:hover[b-bwuqdxr3oo] {
    border-color: #64748b;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

html.nav-theme-dark .tc-chip--running[b-bwuqdxr3oo] {
    border-color: #166534;
    background: rgba(34, 197, 94, 0.16);
    color: #6ee7b7;
}

html.nav-theme-dark .tc-chip--running:hover[b-bwuqdxr3oo] {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.26);
    color: #6ee7b7;
}

html.nav-theme-dark .tc-chip--idle[b-bwuqdxr3oo] {
    border-color: #92400e;
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
}

html.nav-theme-dark .tc-chip--idle:hover[b-bwuqdxr3oo] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.26);
    color: #fcd34d;
}

html.nav-theme-dark .tc-modal[b-bwuqdxr3oo] {
    background: #0b1220;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

html.nav-theme-dark .tc-modal .modal-header[b-bwuqdxr3oo],
html.nav-theme-dark .tc-date-bar[b-bwuqdxr3oo] {
    background: #0f172a;
    border-bottom-color: var(--df-text);
    color: var(--df-border);
}

html.nav-theme-dark .tc-modal .modal-footer[b-bwuqdxr3oo] {
    background: #0f172a;
    border-top-color: var(--df-text);
}

/* Stats / clock-in green strips */
html.nav-theme-dark .tc-clockin-compact[b-bwuqdxr3oo],
html.nav-theme-dark .tc-stats-strip[b-bwuqdxr3oo] {
    background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(16,185,129,0.06));
    border-bottom-color: rgba(16,185,129,0.25);
}
html.nav-theme-dark .tc-stat-primary[b-bwuqdxr3oo] { color: #6ee7b7; }
html.nav-theme-dark .tc-stat-absence[b-bwuqdxr3oo] { color: #67e8f9; }
html.nav-theme-dark .tc-stat-lunch[b-bwuqdxr3oo]   { color: #fcd34d; }
html.nav-theme-dark .tc-stat-label[b-bwuqdxr3oo]   { color: #94a3b8; }
html.nav-theme-dark .tc-stat-divider[b-bwuqdxr3oo] { background: #334155; }

/* Right-hand summary card */
html.nav-theme-dark .tc-summary-card[b-bwuqdxr3oo] {
    background: #0f172a;
    border-color: var(--df-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
html.nav-theme-dark .tc-summary-date[b-bwuqdxr3oo] {
    color: #f1f5f9;
    border-bottom-color: var(--df-text);
}
html.nav-theme-dark .tc-summary-label[b-bwuqdxr3oo] { color: #94a3b8; }
html.nav-theme-dark .tc-summary-value[b-bwuqdxr3oo] { color: var(--df-border); }

/* Log Work panel */
html.nav-theme-dark .tc-log-panel[b-bwuqdxr3oo] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .tc-log-header[b-bwuqdxr3oo],
html.nav-theme-dark .tc-entries-header[b-bwuqdxr3oo],
html.nav-theme-dark .tc-grid-head[b-bwuqdxr3oo] {
    background: #111c33;
    border-bottom-color: var(--df-text);
    color: #94a3b8;
}
html.nav-theme-dark .tc-mode-group[b-bwuqdxr3oo] {
    background: var(--df-text);
}
html.nav-theme-dark .tc-mode-btn[b-bwuqdxr3oo] { color: #94a3b8; }
html.nav-theme-dark .tc-mode-btn:hover[b-bwuqdxr3oo] { color: #cbd5e1; }
html.nav-theme-dark .tc-mode-btn.active[b-bwuqdxr3oo] {
    background: #0f172a;
    color: #c7d2fe;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
html.nav-theme-dark .tc-search-clear[b-bwuqdxr3oo] { color: var(--df-text-muted); }
html.nav-theme-dark .tc-search-clear:hover[b-bwuqdxr3oo] { color: #cbd5e1; }
html.nav-theme-dark .tc-input-field label[b-bwuqdxr3oo],
html.nav-theme-dark .tc-label[b-bwuqdxr3oo] { color: #cbd5e1; }
html.nav-theme-dark .tc-inputs-hint[b-bwuqdxr3oo] { color: #94a3b8; }

/* Active timers card (amber) */
html.nav-theme-dark .tc-active-timers[b-bwuqdxr3oo] {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.30);
}
html.nav-theme-dark .tc-timer-row[b-bwuqdxr3oo] {
    background: rgba(255,255,255,0.04);
}
html.nav-theme-dark .tc-timer-name[b-bwuqdxr3oo] { color: #f1f5f9; }
html.nav-theme-dark .tc-timer-sub[b-bwuqdxr3oo] { color: #94a3b8; }
html.nav-theme-dark .tc-timer-badge[b-bwuqdxr3oo] {
    background: rgba(245,158,11,0.20);
    color: #fde68a;
}

/* Time Entries grid */
html.nav-theme-dark .tc-entries-wrap[b-bwuqdxr3oo] {
    border-color: var(--df-text);
    background: #0f172a;
}
html.nav-theme-dark .tc-grid-row[b-bwuqdxr3oo] {
    background: #0f172a;
    border-bottom-color: var(--df-text);
    color: var(--df-border);
}
html.nav-theme-dark .tc-grid-row:nth-child(even)[b-bwuqdxr3oo] {
    background: #111c33;
}
html.nav-theme-dark .tc-grid-row:hover[b-bwuqdxr3oo] {
    background: rgba(99,102,241,0.12);
}
html.nav-theme-dark .tc-grid-row.is-running[b-bwuqdxr3oo] {
    background: rgba(16,185,129,0.10);
}
html.nav-theme-dark .tc-grid-row.is-running:hover[b-bwuqdxr3oo] {
    background: rgba(16,185,129,0.16);
}
html.nav-theme-dark .tc-grid-row.is-editing[b-bwuqdxr3oo] {
    background: rgba(59,130,246,0.10);
}
html.nav-theme-dark .tc-g-time[b-bwuqdxr3oo],
html.nav-theme-dark .tc-g-time-val[b-bwuqdxr3oo],
html.nav-theme-dark .tc-g-item[b-bwuqdxr3oo],
html.nav-theme-dark .tc-entry-name[b-bwuqdxr3oo] { color: var(--df-border); }
html.nav-theme-dark .tc-g-date[b-bwuqdxr3oo],
html.nav-theme-dark .tc-g-details[b-bwuqdxr3oo],
html.nav-theme-dark .tc-entry-sub[b-bwuqdxr3oo] { color: #94a3b8; }
html.nav-theme-dark .tc-lunch-sub[b-bwuqdxr3oo] { color: #fde68a; }

/* Type badges */
html.nav-theme-dark .tc-type-task[b-bwuqdxr3oo]     { background: rgba(59,130,246,0.18); color: #93c5fd; }
html.nav-theme-dark .tc-type-project[b-bwuqdxr3oo]  { background: rgba(139,92,246,0.18); color: #c4b5fd; }
html.nav-theme-dark .tc-type-timecode[b-bwuqdxr3oo] { background: #334155; color: #cbd5e1; }
html.nav-theme-dark .tc-type-absence[b-bwuqdxr3oo]  { background: rgba(245,158,11,0.18); color: #fde68a; }

/* Entry hours pill */
html.nav-theme-dark .tc-entry-hours[b-bwuqdxr3oo] {
    background: var(--df-text);
    color: #cbd5e1;
    border-color: #334155;
}
html.nav-theme-dark .tc-entry-hours--running[b-bwuqdxr3oo] {
    background: rgba(16,185,129,0.18);
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.35);
}

/* Lunch row */
html.nav-theme-dark .tc-lunch-row[b-bwuqdxr3oo] {
    background: rgba(245,158,11,0.10);
    border-top-color: rgba(245,158,11,0.30);
    color: #fde68a;
}
html.nav-theme-dark .tc-lunch-badge[b-bwuqdxr3oo] {
    background: rgba(245,158,11,0.20);
    color: #fde68a;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .tc-btn-bubble[b-bwuqdxr3oo] {
    background: var(--df-warning-light);
}
html.nav-theme-dark .tc-btn-bubble[b-bwuqdxr3oo]::after {
    border-bottom: 6px solid var(--df-warning-light);
}
html.nav-theme-dark .tc-date-bar[b-bwuqdxr3oo] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .tc-summary-date[b-bwuqdxr3oo] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .tc-grid-row[b-bwuqdxr3oo] {
    border-bottom: 1px solid var(--df-border);
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-dropdown[b-d8vs1pmh6d] {
    position: relative;
}

.user-dropdown-toggle[b-d8vs1pmh6d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.user-dropdown-toggle:hover[b-d8vs1pmh6d] {
    background: #f1f5f9;
    border-color: var(--df-border);
}

.user-dropdown-name[b-d8vs1pmh6d] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}

.user-dropdown-caret[b-d8vs1pmh6d] {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* ── Dropdown menu ── */

.user-dropdown-menu[b-d8vs1pmh6d] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 240px;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    padding: 0.5rem;
    animation: dropdownFadeIn-b-d8vs1pmh6d 0.15s ease-out;
}

@keyframes dropdownFadeIn-b-d8vs1pmh6d {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── User header inside dropdown ── */

.user-dropdown-header[b-d8vs1pmh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
}

.user-dropdown-header-avatar[b-d8vs1pmh6d],
.user-dropdown-header-avatar-fallback[b-d8vs1pmh6d] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.user-dropdown-header-avatar[b-d8vs1pmh6d] {
    object-fit: cover;
}

.user-dropdown-header-avatar-fallback[b-d8vs1pmh6d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.user-dropdown-header-info[b-d8vs1pmh6d] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-dropdown-header-name[b-d8vs1pmh6d] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-header-label[b-d8vs1pmh6d] {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.3;
}

/* ── Menu items ── */

.user-dropdown-item[b-d8vs1pmh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    line-height: 1.25rem;
}

.user-dropdown-item .menu-icon[b-d8vs1pmh6d] {
    display: block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.user-dropdown-item:hover[b-d8vs1pmh6d] {
    background: #f1f5f9;
    color: var(--df-text);
    text-decoration: none;
}

.user-dropdown-item:hover .menu-icon[b-d8vs1pmh6d] {
    opacity: 0.85;
}

.user-dropdown-item:active[b-d8vs1pmh6d] {
    background: var(--df-border);
}

/* Sign-out item */
.user-dropdown-item-danger:hover[b-d8vs1pmh6d] {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

.user-dropdown-item-danger:hover .menu-icon[b-d8vs1pmh6d] {
    opacity: 0.85;
}

.user-dropdown-item-danger:active[b-d8vs1pmh6d] {
    background: #fee2e2;
}

/* ── Divider ── */

.user-dropdown-divider[b-d8vs1pmh6d] {
    height: 1px;
    background: var(--df-border);
    margin: 0.5rem 0;
}

/* ── Toggle button avatar ── */

.user-avatar[b-d8vs1pmh6d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
}

.user-avatar-img[b-d8vs1pmh6d] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ---- Dark theme overrides ---- */
html.nav-theme-dark .user-dropdown-toggle:hover[b-d8vs1pmh6d] {
    background: rgba(255,255,255,0.06);
    border-color: #334155;
}

html.nav-theme-dark .user-dropdown-name[b-d8vs1pmh6d] {
    color: #cbd5e1;
}

html.nav-theme-dark .user-dropdown-caret[b-d8vs1pmh6d] {
    color: var(--df-text-muted);
}

html.nav-theme-dark .user-dropdown-menu[b-d8vs1pmh6d] {
    background: #0f172a;
    border-color: var(--df-text);
    box-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
}

html.nav-theme-dark .user-dropdown-header-name[b-d8vs1pmh6d] {
    color: #f1f5f9;
}

html.nav-theme-dark .user-dropdown-header-label[b-d8vs1pmh6d] {
    color: #94a3b8;
}

html.nav-theme-dark .user-dropdown-item[b-d8vs1pmh6d] {
    color: #cbd5e1;
}

html.nav-theme-dark .user-dropdown-item:hover[b-d8vs1pmh6d] {
    background: rgba(99,102,241,0.18);
    color: #e0e7ff;
}

html.nav-theme-dark .user-dropdown-item:active[b-d8vs1pmh6d] {
    background: rgba(99,102,241,0.28);
}

html.nav-theme-dark .user-dropdown-item-danger:hover[b-d8vs1pmh6d] {
    background: rgba(239,68,68,0.18);
    color: #fecaca;
}

html.nav-theme-dark .user-dropdown-item-danger:active[b-d8vs1pmh6d] {
    background: rgba(239,68,68,0.28);
}

html.nav-theme-dark .user-dropdown-divider[b-d8vs1pmh6d] {
    background: var(--df-text);
}
/* /Components/Pages/Admin/DatabaseMaintenance.razor.rz.scp.css */
.dm-header[b-bd7k9p1jsn] { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; }
.dm-title[b-bd7k9p1jsn] { margin-bottom:.2rem; font-size:1.55rem; font-weight:750; letter-spacing:-.02em; }
.dm-header p[b-bd7k9p1jsn] { margin:0; color:var(--df-text-muted); font-size:0.78rem; }
.dm-actions[b-bd7k9p1jsn] { display:flex; gap:.55rem; margin-left:auto; flex-shrink:0; }
.dm-alert[b-bd7k9p1jsn] { margin-bottom:1rem; }

.dm-stats[b-bd7k9p1jsn] { display:grid; grid-template-columns:repeat(4,minmax(145px,1fr)); gap:.75rem; margin-bottom:1.1rem; }
.dm-stat[b-bd7k9p1jsn] { display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border:1px solid var(--df-border); border-left:4px solid; border-radius:var(--df-radius); background:var(--df-surface); box-shadow:var(--df-card-shadow); }
.dm-stat.red[b-bd7k9p1jsn] { border-left-color:var(--df-danger); } .dm-stat.amber[b-bd7k9p1jsn] { border-left-color:var(--df-warning); }
.dm-stat.green[b-bd7k9p1jsn] { border-left-color:var(--df-success); } .dm-stat.blue[b-bd7k9p1jsn] { border-left-color:var(--df-primary); }
.dm-stat strong[b-bd7k9p1jsn] { font-size:1.4rem; line-height:1; } .dm-stat span[b-bd7k9p1jsn] { color:var(--df-text-muted); font-size:0.72rem; }
.dm-stat.red strong[b-bd7k9p1jsn] { color:var(--df-danger); } .dm-stat.amber strong[b-bd7k9p1jsn] { color:var(--df-warning); }
.dm-stat.green strong[b-bd7k9p1jsn] { color:var(--df-success); } .dm-stat.blue strong[b-bd7k9p1jsn] { color:var(--df-primary); }

.dm-layout[b-bd7k9p1jsn] { display:grid; grid-template-columns:215px minmax(0,1fr); gap:1rem; align-items:start; }
.dm-filters[b-bd7k9p1jsn] { position:sticky; top:1rem; padding:1rem; border:1px solid var(--df-border); border-radius:var(--df-radius); background:var(--df-surface); box-shadow:var(--df-card-shadow); }
.dm-filters h3[b-bd7k9p1jsn] { margin:1rem 0 .4rem; color:var(--df-text-muted); font-size:0.65rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.dm-filter-row[b-bd7k9p1jsn] { display:flex; align-items:center; gap:.45rem; padding:.3rem 0; font-size:0.78rem; cursor:pointer; }
.dm-filter-row input[b-bd7k9p1jsn] { accent-color:var(--df-primary); }
.dm-filter-count[b-bd7k9p1jsn] { margin-left:auto; color:var(--df-text-muted); font-size:0.65rem; }
.dm-dot[b-bd7k9p1jsn] { display:inline-block; width:8px; height:8px; margin-right:.28rem; border-radius:2px; background:var(--df-text-muted); flex:none; }
.dm-dot.prod[b-bd7k9p1jsn] { background:var(--df-danger); } .dm-dot.stage[b-bd7k9p1jsn] { background:var(--df-warning); }
.dm-dot.dev[b-bd7k9p1jsn] { background:var(--df-primary); } .dm-dot.other[b-bd7k9p1jsn] { background:var(--df-text-muted); }

.dm-main[b-bd7k9p1jsn] { min-width:0; }
.dm-toolbar[b-bd7k9p1jsn] { display:flex; align-items:center; min-height:2.25rem; margin-bottom:.5rem; }
.dm-info[b-bd7k9p1jsn] { color:var(--df-text-muted); font-size:0.78rem; }
.dm-tabs[b-bd7k9p1jsn] { display:flex; margin-left:auto; overflow:hidden; border:1px solid var(--df-border); border-radius:.45rem; background:var(--df-surface); }
.dm-tabs button[b-bd7k9p1jsn] { padding:.43rem .8rem; border:0; border-right:1px solid var(--df-border); color:var(--df-text-muted); background:var(--df-surface); font-size:0.78rem; }
.dm-tabs button:last-child[b-bd7k9p1jsn] { border-right:0; }
.dm-tabs button.active[b-bd7k9p1jsn] { color:var(--df-primary); background:var(--df-primary-light); font-weight:700; }

.dm-section-label[b-bd7k9p1jsn] { display:flex; align-items:center; gap:.45rem; margin:.85rem .1rem .4rem; color:var(--df-text-muted); font-size:0.65rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.dm-section-label:first-child[b-bd7k9p1jsn] { margin-top:0; }
.dm-section-label span[b-bd7k9p1jsn] { display:grid; place-items:center; min-width:19px; height:19px; padding:0 .3rem; border-radius:10px; background:#e9edf3; font-size:0.65rem; }
.dm-schedule-card[b-bd7k9p1jsn] { margin-bottom:.55rem; overflow:hidden; border:1px solid var(--df-border); border-left:4px solid var(--df-primary); border-radius:var(--df-radius); background:var(--df-surface); box-shadow:var(--df-card-shadow); }
.dm-schedule-card.over[b-bd7k9p1jsn] { border-left-color:var(--df-danger); } .dm-schedule-card.today[b-bd7k9p1jsn] { border-left-color:var(--df-warning); }
.dm-card-summary[b-bd7k9p1jsn] { display:grid; grid-template-columns:minmax(230px,1.25fr) minmax(150px,.75fr) 125px 115px 25px; gap:.8rem; align-items:center; width:100%; padding:.82rem .9rem; border:0; color:inherit; background:var(--df-surface); text-align:left; }
.dm-card-summary:hover[b-bd7k9p1jsn] { background:#fbfcfe; }
.dm-card-identity > strong[b-bd7k9p1jsn] { display:block; font-size:.9rem; }
.dm-card-identity small[b-bd7k9p1jsn] { display:flex; align-items:center; gap:.4rem; margin-top:.25rem; color:var(--df-text-muted); font-size:0.65rem; }
.dm-type[b-bd7k9p1jsn] { display:inline-flex; padding:.12rem .4rem; border-radius:99px; color:var(--df-primary); background:var(--df-primary-light); font-size:0.65rem; font-weight:700; white-space:nowrap; }
.dm-progress-block > small[b-bd7k9p1jsn] { display:flex; justify-content:space-between; margin-bottom:.3rem; color:var(--df-text-muted); font-size:.65rem; }
.dm-progress-block > small strong[b-bd7k9p1jsn] { color:var(--bs-body-color); }
.dm-progress[b-bd7k9p1jsn] { display:block; height:5px; overflow:hidden; border-radius:4px; background:#e7ebf1; }
.dm-progress i[b-bd7k9p1jsn] { display:block; height:100%; border-radius:inherit; background:var(--df-success); }
.dm-status[b-bd7k9p1jsn] { display:inline-flex; justify-content:center; padding:.25rem .45rem; border-radius:99px; font-size:0.65rem; font-weight:650; white-space:nowrap; }
.dm-status.over[b-bd7k9p1jsn] { color:var(--df-danger); background:#fff0f1; } .dm-status.soon[b-bd7k9p1jsn] { color:#9a5a00; background:#fff6e5; } .dm-status.ok[b-bd7k9p1jsn] { color:var(--df-success); background:#eaf8f1; }
.dm-due[b-bd7k9p1jsn] { text-align:right; } .dm-due strong[b-bd7k9p1jsn],.dm-due small[b-bd7k9p1jsn] { display:block; } .dm-due strong[b-bd7k9p1jsn] { font-size:0.78rem; } .dm-due small[b-bd7k9p1jsn] { margin-top:.15rem; color:var(--df-text-muted); font-size:.65rem; }
.dm-chevron[b-bd7k9p1jsn] { color:var(--df-text-muted); font-size:1rem; text-align:center; transition:transform .15s; }
.dm-schedule-card.open .dm-chevron[b-bd7k9p1jsn] { transform:rotate(180deg); }
.dm-checklist[b-bd7k9p1jsn] { display:none; border-top:1px solid var(--df-border); background:#fbfcfe; }
.dm-schedule-card.open .dm-checklist[b-bd7k9p1jsn] { display:block; }
.dm-check-head[b-bd7k9p1jsn] { display:flex; align-items:center; padding:.55rem .9rem; border-bottom:1px solid #edf0f4; color:var(--df-text-muted); font-size:0.65rem; }
.dm-check-head .btn[b-bd7k9p1jsn] { margin-left:auto; }
.dm-db-check[b-bd7k9p1jsn] { display:grid; grid-template-columns:28px minmax(180px,1fr) 165px minmax(130px,.7fr) 60px; gap:.55rem; align-items:center; min-height:50px; padding:.42rem .9rem; border-bottom:1px solid #edf0f4; }
.dm-db-check:last-child[b-bd7k9p1jsn] { border-bottom:0; }
.dm-check[b-bd7k9p1jsn] { display:grid; place-items:center; width:23px; height:23px; padding:0; border:1.5px solid #aab5c4; border-radius:6px; color:transparent; background:var(--df-surface); font-weight:800; }
button.dm-check:hover[b-bd7k9p1jsn] { color:#fff; border-color:var(--df-primary); background:var(--df-primary); }
.dm-db-check.done .dm-check[b-bd7k9p1jsn] { color:#fff; border-color:var(--df-success); background:var(--df-success); }
.dm-db-name strong[b-bd7k9p1jsn],.dm-db-name small[b-bd7k9p1jsn] { display:block; } .dm-db-name strong[b-bd7k9p1jsn] { font-size:.78rem; } .dm-db-name small[b-bd7k9p1jsn] { color:var(--df-text-muted); font-size:.65rem; }
.dm-completed[b-bd7k9p1jsn] { color:var(--df-success); font-size:0.65rem; } .dm-pending[b-bd7k9p1jsn],.dm-note[b-bd7k9p1jsn],.dm-muted[b-bd7k9p1jsn] { color:var(--df-text-muted); font-size:0.65rem; }

.dm-banner[b-bd7k9p1jsn] { display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.75rem; padding:.65rem .75rem; border:1px solid #c9dafa; border-radius:.45rem; color:#315385; background:#f3f7ff; font-size:.72rem; }
.dm-tablewrap[b-bd7k9p1jsn] { overflow:hidden; border:1px solid var(--df-border); border-radius:var(--df-radius); background:var(--df-surface); box-shadow:var(--df-card-shadow); }
.dm-table[b-bd7k9p1jsn] { width:100%; border-collapse:collapse; }
.dm-table th[b-bd7k9p1jsn] { padding:.62rem .7rem; border-bottom:1px solid var(--df-border); color:var(--df-text-muted); background:#f8f9fb; text-align:left; font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.dm-table td[b-bd7k9p1jsn] { padding:.65rem .7rem; border-bottom:1px solid #edf0f4; font-size:.78rem; vertical-align:middle; }
.dm-table tr:last-child td[b-bd7k9p1jsn] { border-bottom:0; } .dm-table tbody tr:hover td[b-bd7k9p1jsn] { background:#fbfcfe; }
.dm-row-actions[b-bd7k9p1jsn] { text-align:right; white-space:nowrap; }
.dm-next-pill[b-bd7k9p1jsn] { display:inline-flex; margin-top:.2rem; padding:.12rem .4rem; border-radius:99px; color:#7556c5; background:#f1edfb; font-size:0.65rem; font-weight:650; white-space:nowrap; }
.dm-next-pill.removed[b-bd7k9p1jsn] { color:var(--df-danger); background:#fff0f1; }
.dm-empty-card[b-bd7k9p1jsn] { padding:2.5rem; border:1px solid var(--df-border); border-radius:var(--df-radius); color:var(--df-text-muted); background:var(--df-surface); text-align:center; box-shadow:var(--df-card-shadow); }

.dm-modal-bg[b-bd7k9p1jsn] { overflow-y:auto; background:rgba(10,18,30,.55); }
.dm-db-selector[b-bd7k9p1jsn] { max-height:285px; overflow:auto; border:1px solid var(--df-border); border-radius:.45rem; }
.dm-db-selector-search[b-bd7k9p1jsn] { position:sticky; top:0; z-index:1; display:flex; gap:.5rem; padding:.55rem; border-bottom:1px solid var(--df-border); background:#fafbfc; }
.dm-db-option[b-bd7k9p1jsn] { display:flex; align-items:center; gap:.55rem; padding:.55rem .7rem; border-bottom:1px solid #edf0f4; cursor:pointer; }
.dm-db-option:last-child[b-bd7k9p1jsn] { border-bottom:0; } .dm-db-option input[b-bd7k9p1jsn] { accent-color:var(--df-primary); }
.dm-db-option > span:nth-of-type(2)[b-bd7k9p1jsn] { flex:1; }
.dm-db-option strong[b-bd7k9p1jsn],.dm-db-option small[b-bd7k9p1jsn] { display:block; } .dm-db-option strong[b-bd7k9p1jsn] { font-size:.78rem; } .dm-db-option small[b-bd7k9p1jsn] { color:var(--df-text-muted); font-size:0.65rem; }
.dm-complete-summary[b-bd7k9p1jsn] { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; padding:.75rem; border:1px solid var(--df-border); border-radius:.45rem; background:#fafbfc; }
.dm-complete-summary > span[b-bd7k9p1jsn] { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:var(--df-primary); background:var(--df-primary-light); font-size:1.1rem; }
.dm-complete-summary strong[b-bd7k9p1jsn],.dm-complete-summary small[b-bd7k9p1jsn] { display:block; } .dm-complete-summary small[b-bd7k9p1jsn] { color:var(--df-text-muted); font-size:0.72rem; }

@media (max-width:1100px) {
    .dm-layout[b-bd7k9p1jsn] { grid-template-columns:1fr; } .dm-filters[b-bd7k9p1jsn] { position:static; display:none; }
    .dm-card-summary[b-bd7k9p1jsn] { grid-template-columns:minmax(220px,1.2fr) minmax(140px,.7fr) 110px 25px; }
    .dm-card-summary > .dm-status[b-bd7k9p1jsn] { display:none; }
    .dm-db-check[b-bd7k9p1jsn] { grid-template-columns:28px minmax(160px,1fr) 135px minmax(110px,.6fr) 55px; }
}
@media (max-width:760px) {
    .dm-header[b-bd7k9p1jsn] { display:block; } .dm-actions[b-bd7k9p1jsn] { margin-top:.8rem; } .dm-stats[b-bd7k9p1jsn] { grid-template-columns:1fr 1fr; }
    .dm-toolbar[b-bd7k9p1jsn] { display:block; } .dm-tabs[b-bd7k9p1jsn] { margin:.5rem 0 0; overflow-x:auto; } .dm-tabs button[b-bd7k9p1jsn] { flex:1; white-space:nowrap; }
    .dm-card-summary[b-bd7k9p1jsn] { grid-template-columns:1fr 25px; }
    .dm-card-summary > .dm-progress-block[b-bd7k9p1jsn],.dm-card-summary > .dm-due[b-bd7k9p1jsn] { grid-column:1; text-align:left; }
    .dm-chevron[b-bd7k9p1jsn] { grid-column:2; grid-row:1; }
    .dm-db-check[b-bd7k9p1jsn] { grid-template-columns:28px 1fr auto; }
    .dm-db-check > :nth-child(3)[b-bd7k9p1jsn],.dm-db-check > :nth-child(4)[b-bd7k9p1jsn] { grid-column:2; }
    .dm-db-check > :nth-child(5)[b-bd7k9p1jsn] { grid-column:3; grid-row:1 / 3; }
    .dm-tablewrap[b-bd7k9p1jsn] { overflow-x:auto; } .dm-table[b-bd7k9p1jsn] { min-width:720px; }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .dm-section-label span[b-bd7k9p1jsn] {
    background: var(--df-bg);
}
html.nav-theme-dark .dm-card-summary:hover[b-bd7k9p1jsn] {
    background: var(--df-surface);
}
html.nav-theme-dark .dm-progress[b-bd7k9p1jsn] {
    background: var(--df-bg);
}
html.nav-theme-dark .dm-status.over[b-bd7k9p1jsn] {
    background: var(--df-danger-light);
}
html.nav-theme-dark .dm-status.soon[b-bd7k9p1jsn] {
    background: var(--df-warning-light);
}
html.nav-theme-dark .dm-status.ok[b-bd7k9p1jsn] {
    background: var(--df-success-light);
}
html.nav-theme-dark .dm-checklist[b-bd7k9p1jsn] {
    background: var(--df-surface);
}
html.nav-theme-dark .dm-banner[b-bd7k9p1jsn] {
    background: var(--df-primary-light);
}
html.nav-theme-dark .dm-table th[b-bd7k9p1jsn] {
    background: var(--df-surface);
}
html.nav-theme-dark .dm-table tbody tr:hover td[b-bd7k9p1jsn] {
    background: var(--df-surface);
}
html.nav-theme-dark .dm-next-pill[b-bd7k9p1jsn] {
    color: var(--df-purple);
    background: var(--df-purple-light);
}
html.nav-theme-dark .dm-next-pill.removed[b-bd7k9p1jsn] {
    background: var(--df-danger-light);
}
html.nav-theme-dark .dm-db-selector-search[b-bd7k9p1jsn] {
    background: var(--df-surface);
}
html.nav-theme-dark .dm-complete-summary[b-bd7k9p1jsn] {
    background: var(--df-surface);
}
/* /Components/Pages/Admin/EmployeeManagement.razor.rz.scp.css */
/* ======================================================
   Hero Header
   ====================================================== */
.hr-hero[b-otjfq59xti] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, var(--df-primary-light) 0%, #faf5ff 100%);
    border: 1px solid #e9e5f7;
    border-radius: 14px;
}

.hr-hero-content[b-otjfq59xti] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hr-hero-icon[b-otjfq59xti] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
    flex-shrink: 0;
}

.hr-hero-text h3[b-otjfq59xti] {
    font-weight: 600;
    color: #1f2937;
}

.btn-new-employee[b-otjfq59xti] {
    font-weight: 500;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2);
}

/* ======================================================
   Stat Cards
   ====================================================== */
.hr-stat-card[b-otjfq59xti] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hr-stat-card:hover[b-otjfq59xti] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.hr-stat-icon[b-otjfq59xti] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.hr-stat-body[b-otjfq59xti] {
    min-width: 0;
}

.hr-stat-value[b-otjfq59xti] {
    font-size: 1.6rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.1;
}

.hr-stat-label[b-otjfq59xti] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

/* ======================================================
   Toolbar (search + filters)
   ====================================================== */
.hr-toolbar[b-otjfq59xti] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.hr-search[b-otjfq59xti] {
    position: relative;
    flex: 1 1 280px;
    min-width: 240px;
}

.hr-search .form-control[b-otjfq59xti] {
    padding-left: 2.25rem;
    padding-right: 2rem;
    border-radius: 8px;
    border-color: var(--df-border);
}

.hr-search .form-control:focus[b-otjfq59xti] {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.hr-search-icon[b-otjfq59xti] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.95rem;
    pointer-events: none;
}

.hr-search-clear[b-otjfq59xti] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}

.hr-search-clear:hover[b-otjfq59xti] {
    color: #4b5563;
}

.hr-filter-select[b-otjfq59xti] {
    width: auto;
    min-width: 180px;
    flex: 0 0 auto;
    border-radius: 8px;
    border-color: var(--df-border);
}

.hr-status-chips[b-otjfq59xti] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.hr-chip[b-otjfq59xti] {
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: #4b5563;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hr-chip:hover[b-otjfq59xti] {
    background: #f9fafb;
    border-color: #d1d5db;
}

.hr-chip.active[b-otjfq59xti] {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: white;
}

.hr-chip.active.hr-chip-active[b-otjfq59xti] { background: #16a34a; border-color: #16a34a; }
.hr-chip.active.hr-chip-onleave[b-otjfq59xti] { background: var(--df-warning); border-color: var(--df-warning); }
.hr-chip.active.hr-chip-terminated[b-otjfq59xti] { background: var(--df-danger); border-color: var(--df-danger); }
.hr-chip.active.hr-chip-resigned[b-otjfq59xti] { background: var(--df-text-muted); border-color: var(--df-text-muted); }
.hr-chip.active.hr-chip-retired[b-otjfq59xti] { background: var(--df-info); border-color: var(--df-info); }

/* ======================================================
   Employee List
   ====================================================== */
.hr-list[b-otjfq59xti] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 12px;
    overflow: hidden;
}

.hr-list-header[b-otjfq59xti],
.hr-row[b-otjfq59xti] {
    display: grid;
    grid-template-columns: minmax(220px, 2.2fr) minmax(140px, 1.6fr) minmax(120px, 1.2fr) minmax(100px, 1fr) minmax(110px, 1.1fr) minmax(110px, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.hr-list-header[b-otjfq59xti] {
    background: #f9fafb;
    border-bottom: 1px solid var(--df-border);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-text-muted);
}

.hr-row[b-otjfq59xti] {
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.hr-row:last-child[b-otjfq59xti] {
    border-bottom: none;
}

.hr-row:hover[b-otjfq59xti] {
    background: #f9fafb;
}

.hr-col-emp[b-otjfq59xti] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.hr-row-avatar[b-otjfq59xti] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.hr-row-name[b-otjfq59xti] {
    min-width: 0;
}

.hr-name-primary[b-otjfq59xti] {
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hr-name-secondary[b-otjfq59xti] {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}

.hr-col-title[b-otjfq59xti] {
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hr-dept-pill[b-otjfq59xti] {
    display: inline-block;
    background: #f3f4f6;
    color: #4b5563;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
}

.hr-col-status[b-otjfq59xti] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #374151;
    font-size: 0.875rem;
}

.hr-status-dot[b-otjfq59xti] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hr-status-dot-active[b-otjfq59xti] { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.hr-status-dot-onleave[b-otjfq59xti] { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.hr-status-dot-terminated[b-otjfq59xti] { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.hr-status-dot-resigned[b-otjfq59xti] { background: var(--df-text-muted); box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15); }
.hr-status-dot-retired[b-otjfq59xti] { background: #06b6d4; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); }

.hr-col-hire[b-otjfq59xti] {
    color: var(--df-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

.hr-col-actions[b-otjfq59xti] {
    display: flex;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.hr-row:hover .hr-col-actions[b-otjfq59xti] {
    opacity: 1;
}

.btn-icon[b-otjfq59xti] {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    line-height: 1;
}

.btn-icon:hover[b-otjfq59xti] {
    background: var(--df-surface);
    border-color: #d1d5db;
}

.hr-action-danger:hover[b-otjfq59xti] {
    background: var(--df-danger-light);
    border-color: var(--df-danger-border);
}

/* Smaller screens — collapse columns */
@@media (max-width: 992px) {
    .hr-list-header[b-otjfq59xti] { display: none; }
    .hr-row[b-otjfq59xti] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 1rem;
    }
    .hr-col-actions[b-otjfq59xti] { opacity: 1; justify-content: flex-end; }
}

/* ======================================================
   Empty State
   ====================================================== */
.hr-empty[b-otjfq59xti] {
    text-align: center;
    padding: 3rem 1rem;
}

.hr-empty-icon[b-otjfq59xti] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

/* ======================================================
   Detail Modal
   ====================================================== */
.detail-modal-header[b-otjfq59xti] {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 1px solid var(--df-border);
}

.hr-detail-section[b-otjfq59xti] {
    background: #f9fafb;
    border: 1px solid var(--df-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    height: 100%;
}

.hr-detail-heading[b-otjfq59xti] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--df-border);
}

.hr-detail-list[b-otjfq59xti] {
    display: grid;
    grid-template-columns: 130px 1fr;
    row-gap: 0.4rem;
    column-gap: 0.5rem;
    font-size: 0.9rem;
}

.hr-detail-list dt[b-otjfq59xti] {
    color: var(--df-text-muted);
    font-weight: 500;
}

.hr-detail-list dd[b-otjfq59xti] {
    color: #111827;
    margin: 0;
}

/* ======================================================
   Edit Modal — Avatar & Tabs (kept compatible with create)
   ====================================================== */
.avatar-circle[b-otjfq59xti] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.avatar-circle-lg[b-otjfq59xti] {
    width: 56px;
    height: 56px;
    font-size: 1.15rem;
}

.edit-employee-modal .modal-header[b-otjfq59xti] {
    background-color: var(--df-bg);
    border-bottom: 1px solid var(--df-border);
}

.edit-employee-modal .nav-tabs[b-otjfq59xti] {
    border-bottom: 1px solid var(--df-border);
    margin: 0;
    padding: 0 1rem;
    flex-shrink: 0;
}

.edit-employee-modal .nav-tabs .nav-link[b-otjfq59xti] {
    color: var(--df-text-muted);
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

.edit-employee-modal .nav-tabs .nav-link:hover[b-otjfq59xti] {
    color: var(--df-primary, #0d6efd);
    background: rgba(13, 110, 253, 0.05);
}

.edit-employee-modal .nav-tabs .nav-link.active[b-otjfq59xti] {
    color: var(--df-primary, #0d6efd);
    background: var(--df-surface);
    border-color: var(--df-border) var(--df-border) var(--df-surface);
    font-weight: 500;
}

.edit-employee-modal .modal-body[b-otjfq59xti] {
    padding: 1.25rem 1.5rem;
}

.edit-employee-modal .modal-footer[b-otjfq59xti] {
    background-color: var(--df-bg);
    border-top: 1px solid var(--df-border);
}

.tab-pane-content[b-otjfq59xti] {
    min-height: 240px;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .hr-hero[b-otjfq59xti] {
    background: linear-gradient(135deg, var(--df-primary-light) 0%, var(--df-purple-light) 100%);
}
html.nav-theme-dark .hr-hero-text h3[b-otjfq59xti] {
    color: var(--df-text);
}
html.nav-theme-dark .hr-stat-value[b-otjfq59xti] {
    color: var(--df-text);
}
html.nav-theme-dark .hr-search-clear:hover[b-otjfq59xti] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .hr-chip[b-otjfq59xti] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .hr-chip:hover[b-otjfq59xti] {
    background: var(--df-bg);
}
html.nav-theme-dark .hr-list-header[b-otjfq59xti] {
    background: var(--df-bg);
}
html.nav-theme-dark .hr-row[b-otjfq59xti] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .hr-row:hover[b-otjfq59xti] {
    background: var(--df-bg);
}
html.nav-theme-dark .hr-name-primary[b-otjfq59xti] {
    color: var(--df-text);
}
html.nav-theme-dark .hr-col-title[b-otjfq59xti] {
    color: var(--df-text);
}
html.nav-theme-dark .hr-dept-pill[b-otjfq59xti] {
    background: var(--df-bg);
    color: var(--df-text-muted);
}
html.nav-theme-dark .hr-col-status[b-otjfq59xti] {
    color: var(--df-text);
}
html.nav-theme-dark .detail-modal-header[b-otjfq59xti] {
    background: linear-gradient(135deg, var(--df-bg) 0%, var(--df-bg) 100%);
}
html.nav-theme-dark .hr-detail-section[b-otjfq59xti] {
    background: var(--df-bg);
}
html.nav-theme-dark .hr-detail-list dd[b-otjfq59xti] {
    color: var(--df-text);
}
/* /Components/Pages/Admin/MenuSetup.razor.rz.scp.css */
.menu-setup-section[b-6omzvtjlj1] {
    border-bottom: 1px solid var(--df-border);
}

.menu-setup-section:last-child[b-6omzvtjlj1] {
    border-bottom: none;
}

.menu-setup-section-header[b-6omzvtjlj1] {
    background: var(--df-bg);
}

.menu-setup-section-header:hover[b-6omzvtjlj1] {
    background: #f1f5f9;
}

.menu-setup-item:hover[b-6omzvtjlj1] {
    background: #fefce8;
}

/* ---- Dark theme overrides ---- */
html.nav-theme-dark .menu-setup-section[b-6omzvtjlj1] {
    border-bottom-color: var(--df-text);
}

html.nav-theme-dark .menu-setup-section-header[b-6omzvtjlj1] {
    background: #111c33;
    color: var(--df-border);
}

html.nav-theme-dark .menu-setup-section-header:hover[b-6omzvtjlj1] {
    background: rgba(255,255,255,0.05);
}

html.nav-theme-dark .menu-setup-item:hover[b-6omzvtjlj1] {
    background: rgba(245,158,11,0.10);
}
/* /Components/Pages/Admin/TaskCategoryManagement.razor.rz.scp.css */
[b-ciktmrf9e7] tr.drag-over-highlight {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
    background-color: rgba(13, 110, 253, 0.08);
}

[b-ciktmrf9e7] tr[draggable="true"]:active {
    opacity: 0.5;
}

/* Soft-tinted pill marking the one category that gates deployment readiness.
   Carries its own icon so the meaning doesn't rest on the green alone. */
[b-ciktmrf9e7] .deploy-category-badge {
    background-color: var(--df-success-light);
    color: var(--df-success);
    border: 1px solid var(--df-success);
}

/* Same treatment for the categories that offer to clean up ticket branches on
   completion. Icon-carrying for the same reason: the hue alone isn't the message. */
[b-ciktmrf9e7] .branch-cleanup-badge {
    background-color: var(--df-info-light);
    color: var(--df-info);
    border: 1px solid var(--df-info);
}
/* /Components/Pages/Admin/TaskTemplates.razor.rz.scp.css */
[b-06pjhcnw4k] tr.drag-over-highlight {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
    background-color: rgba(13, 110, 253, 0.08);
}

[b-06pjhcnw4k] tr[draggable="true"]:active {
    opacity: 0.5;
}

/* --- Branching: pick where Create Branch starts for this ticket type --- */

.bsrc-cards[b-06pjhcnw4k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

@media (max-width: 700px) {
    .bsrc-cards[b-06pjhcnw4k] {
        grid-template-columns: 1fr;
    }
}

.bsrc-card[b-06pjhcnw4k] {
    display: block;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    cursor: pointer;
    transition: var(--df-transition);
}

.bsrc-card:hover[b-06pjhcnw4k] {
    border-color: var(--df-primary);
}

.bsrc-card.selected[b-06pjhcnw4k] {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
}

.bsrc-head[b-06pjhcnw4k] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}

.bsrc-head input[b-06pjhcnw4k] {
    flex: 0 0 auto;
    margin: 0;
}

.bsrc-title[b-06pjhcnw4k] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--df-text);
}

.bsrc-sub[b-06pjhcnw4k] {
    display: block;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--df-text-muted);
}
/* /Components/Pages/Admin/UserManagement.razor.rz.scp.css */
/* ============================================
   User Management — scoped styles
   ============================================ */

.users-toolbar .input-group-text[b-ucq4dwfzuz] {
    border-right: 0;
}

.users-toolbar .input-group .form-control[b-ucq4dwfzuz] {
    border-left: 0;
}

/* ------- Users table ------- */
.users-table[b-ucq4dwfzuz] {
    font-size: 0.9rem;
}

.users-table thead th[b-ucq4dwfzuz] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--df-border);
}

.users-table tbody tr[b-ucq4dwfzuz] {
    transition: background-color 0.15s ease;
}

.users-table tbody tr:hover[b-ucq4dwfzuz] {
    background-color: var(--df-primary-light);
}

/* ------- User cell with avatar ------- */
.user-cell[b-ucq4dwfzuz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar[b-ucq4dwfzuz] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-meta[b-ucq4dwfzuz] {
    min-width: 0;
}

.user-name[b-ucq4dwfzuz] {
    font-weight: 600;
    color: var(--df-text);
    line-height: 1.2;
}

.user-email[b-ucq4dwfzuz] {
    color: var(--df-text-muted);
    font-size: 0.78rem;
    line-height: 1.3;
}

.user-username[b-ucq4dwfzuz] {
    color: var(--df-text-muted);
    font-size: 0.72rem;
    opacity: 0.75;
}

/* ------- Status badge ------- */
.status-badge[b-ucq4dwfzuz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    padding: 0.3em 0.6em;
}

.status-badge .status-dot[b-ucq4dwfzuz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* ------- Action icon buttons ------- */
.action-buttons[b-ucq4dwfzuz] {
    display: inline-flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.btn-icon[b-ucq4dwfzuz] {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-icon:hover[b-ucq4dwfzuz] {
    background: var(--df-bg);
    border-color: var(--df-border);
}

.btn-icon-danger:hover[b-ucq4dwfzuz] {
    background: var(--df-danger-light);
    border-color: var(--df-danger);
}

.btn-icon-success:hover[b-ucq4dwfzuz] {
    background: var(--df-success-light);
    border-color: var(--df-success);
}

/* ------- Modal — create/edit ------- */
.setup-toggle[b-ucq4dwfzuz] {
    background: var(--df-primary-light);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    padding: 0.75rem 1rem;
}

.setup-toggle .form-check-input[b-ucq4dwfzuz] {
    margin-top: 0.35rem;
}

/* ------- Permissions modal ------- */
.permission-group .card-header[b-ucq4dwfzuz] {
    background: var(--df-bg);
}

.permission-group .form-check-label[b-ucq4dwfzuz] {
    font-size: 0.875rem;
    cursor: pointer;
}

.permissions-toolbar .input-group-text[b-ucq4dwfzuz] {
    border-right: 0;
}

.permissions-toolbar .input-group .form-control[b-ucq4dwfzuz] {
    border-left: 0;
}

/* ------- Responsive tweaks ------- */
@media (max-width: 768px) {
    .users-table[b-ucq4dwfzuz] {
        font-size: 0.875rem;
    }

    .user-avatar[b-ucq4dwfzuz] {
        width: 32px;
        height: 32px;
        font-size: 0.72rem;
    }

    .action-buttons[b-ucq4dwfzuz] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Agenda/MyNotes.razor.rz.scp.css */
/* Resizable split layout — calendar | handle | day panel.
   Height is set by agenda-splitter.js to fill the viewport. */
.agenda-split[b-oj189ifjfo] {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 420px;
    --agenda-left: 360px;
}

.agenda-split-left[b-oj189ifjfo] {
    flex: 0 0 auto;
    width: var(--agenda-left);
    min-width: 240px;
    overflow: auto;
}

.agenda-split-handle[b-oj189ifjfo] {
    flex: 0 0 auto;
    width: 12px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.agenda-split-handle[b-oj189ifjfo]::before {
    content: "";
    width: 2px;
    height: 100%;
    background: #e9ecef;
    border-radius: 2px;
    transition: background-color 0.1s ease, width 0.1s ease;
}

.agenda-split-handle:hover[b-oj189ifjfo]::before,
.agenda-split-handle.dragging[b-oj189ifjfo]::before {
    background: #0d6efd;
    width: 4px;
}

.agenda-split-right[b-oj189ifjfo] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* Left-pane navigator: users can keep the calendar or browse dated notes directly. */
.agenda-navigator-card[b-oj189ifjfo],
.agenda-navigator-body[b-oj189ifjfo] {
    min-height: 0;
}

.agenda-navigator-body[b-oj189ifjfo] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.agenda-view-switch[b-oj189ifjfo] {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    margin-bottom: 14px;
    border: 1px solid var(--df-border);
    border-radius: 9px;
    background: var(--df-bg);
}

.agenda-view-switch button[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--df-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.agenda-view-switch button:hover[b-oj189ifjfo] {
    color: var(--df-primary);
}

.agenda-view-switch button.active[b-oj189ifjfo] {
    background: var(--df-surface);
    color: var(--df-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.agenda-calendar-view[b-oj189ifjfo] {
    overflow-y: auto;
}

.agenda-notes-list-head[b-oj189ifjfo] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px 8px;
    color: var(--df-text-muted);
    font-size: 0.7rem;
}

.agenda-notes-list-head > span:first-child[b-oj189ifjfo] {
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.agenda-notes-head-actions[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.agenda-new-note[b-oj189ifjfo] {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.55rem;
    font-size: 0.72rem;
}

.agenda-icon-btn[b-oj189ifjfo] {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.2;
}

.agenda-notes-count[b-oj189ifjfo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 3px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-size: 0.68rem;
}

.agenda-notes-list[b-oj189ifjfo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 4px 8px;
}

/* --- Notes tree ---
   Rows are a single line each, and nesting is drawn rather than measured: every level of
   children sits in an .agenda-tree-kids wrapper whose left border is the rail. The rail lands
   under the centre of the parent's chevron, so a branch reads at a glance instead of asking
   the eye to compare indents. */
.agenda-tree-node[b-oj189ifjfo] {
    display: block;
}

.agenda-tree-kids[b-oj189ifjfo] {
    /* 15px clears the chevron's half-width, putting the rail on its centre line. */
    margin-left: 15px;
    padding-left: 9px;
    border-left: 1px solid var(--df-border);
}

.agenda-folder-row[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 6px 0 4px;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: grab;
}

.agenda-folder-row:hover[b-oj189ifjfo] {
    background: var(--df-bg);
}

.agenda-folder-toggle[b-oj189ifjfo] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.7rem;
}

.agenda-folder-toggle:hover[b-oj189ifjfo] {
    color: var(--df-primary);
}

.agenda-folder-toggle .bi[b-oj189ifjfo] {
    transition: transform 0.15s ease;
}

.agenda-folder-toggle.collapsed .bi[b-oj189ifjfo] {
    transform: rotate(-90deg);
}

.agenda-folder-name[b-oj189ifjfo] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.agenda-folder-count[b-oj189ifjfo] {
    flex: none;
    color: #94a3b8;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.agenda-folder-rename[b-oj189ifjfo] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 6px;
    border: 1px solid var(--df-primary);
    border-radius: 6px;
    outline: 0;
    background: var(--df-surface);
    font-size: 0.82rem;
    font-weight: 600;
}

/* Per-row kebab, revealed on hover to keep the tree quiet. Always visible on touch. */
.agenda-row-menu[b-oj189ifjfo] {
    position: relative;
    flex: none;
}

.agenda-row-menu-btn[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.agenda-folder-row:hover .agenda-row-menu-btn[b-oj189ifjfo],
.agenda-folder-row:focus-within .agenda-row-menu-btn[b-oj189ifjfo] {
    opacity: 1;
}

.agenda-row-menu-btn:hover[b-oj189ifjfo] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

@media (hover: none) {
    .agenda-row-menu-btn[b-oj189ifjfo] {
        opacity: 1;
    }
}

.agenda-row-menu-list[b-oj189ifjfo] {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1050;
    min-width: 190px;
    font-size: 0.82rem;
}

.agenda-row-menu-list .dropdown-item[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

/* Drop feedback — the folder (or the root scroller) that would receive the dragged row. */
.agenda-drop-over[b-oj189ifjfo] {
    border-color: var(--df-primary-border);
    background: var(--df-primary-light);
    box-shadow: inset 0 0 0 1px var(--df-primary-border);
}

.agenda-dragging[b-oj189ifjfo] {
    opacity: 0.45;
}

.agenda-note-row[b-oj189ifjfo] {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 6px 0 4px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: grab;
}

.agenda-note-row:hover[b-oj189ifjfo] {
    background: var(--df-bg);
}

.agenda-note-row.active[b-oj189ifjfo],
.agenda-note-row.active:hover[b-oj189ifjfo] {
    border-color: var(--df-primary-border);
    background: var(--df-primary-light);
}

/* The open note claims its segment of the parent rail, so you can see which branch you're in
   even when the row itself is scrolled against the edge. Root-level notes have no rail to
   claim, and fall back to the tint alone. */
.agenda-tree-kids > .agenda-note-row.active[b-oj189ifjfo]::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -10px;
    width: 2px;
    border-radius: 1px;
    background: var(--df-primary);
}

.agenda-note-row-top[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    font-size: 0.8rem;
    font-weight: 500;
}

.agenda-note-row.active .agenda-note-row-top[b-oj189ifjfo] {
    font-weight: 600;
}

/* Stands in for the old file glyph on the chevron's column, so note titles and folder names
   start flush with each other. The margins pad it out to the chevron's 18px. */
.agenda-note-dot[b-oj189ifjfo] {
    flex: none;
    width: 5px;
    height: 5px;
    margin: 0 6.5px;
    border-radius: 50%;
    background: #cbd5e1;
}

.agenda-note-row.active .agenda-note-dot[b-oj189ifjfo] {
    background: var(--df-primary);
}

/* Every row carrying a date turns the column into noise, so it waits for attention. Kept in
   the layout at zero opacity rather than removed, so nothing shifts on hover. */
.agenda-note-edited[b-oj189ifjfo] {
    flex: none;
    color: #94a3b8;
    font-size: 0.67rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity var(--df-transition);
}

.agenda-note-row:hover .agenda-note-edited[b-oj189ifjfo],
.agenda-note-row:focus-visible .agenda-note-edited[b-oj189ifjfo],
.agenda-note-row.active .agenda-note-edited[b-oj189ifjfo],
.agenda-note-hit .agenda-note-edited[b-oj189ifjfo] {
    opacity: 1;
}

@media (hover: none) {
    .agenda-note-edited[b-oj189ifjfo] {
        opacity: 1;
    }
}

/* Search flattens the tree, so a hit gets the two lines a tree row doesn't need: what the note
   says, and which folder it was found in. */
.agenda-note-hit[b-oj189ifjfo] {
    padding-bottom: 7px;
}

.agenda-note-preview[b-oj189ifjfo] {
    display: block;
    padding-left: 24px;
    overflow: hidden;
    color: var(--df-text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-note-path[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    padding-left: 24px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-notes-empty[b-oj189ifjfo] {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 14px;
    color: var(--df-text-muted);
    text-align: center;
    font-size: 0.82rem;
}

.agenda-notes-empty > .bi[b-oj189ifjfo] {
    color: #94a3b8;
    font-size: 1.7rem;
}

.agenda-notes-empty small[b-oj189ifjfo] {
    max-width: 220px;
}

.agenda-list-note-header[b-oj189ifjfo] {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
}

.agenda-list-note-headings[b-oj189ifjfo] {
    flex: 1 1 auto;
    min-width: 0;
}

/* The open note's folder, doubling as the control that refiles it. */
.agenda-folder-chip[b-oj189ifjfo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--df-border);
    border-radius: 50rem;
    background: var(--df-bg);
    color: var(--df-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    transition: var(--df-transition);
}

.agenda-folder-chip:hover[b-oj189ifjfo] {
    border-color: var(--df-primary-border);
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.agenda-folder-chip-path[b-oj189ifjfo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-folder-chip-caret[b-oj189ifjfo] {
    flex: none;
    font-size: 0.6rem;
}

.agenda-list-note-title[b-oj189ifjfo] {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 2px 2px 6px;
    border: 0;
    border-bottom: 1px solid transparent;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 650;
}

.agenda-list-note-title:hover[b-oj189ifjfo] {
    border-bottom-color: var(--df-border);
}

.agenda-list-note-title:focus[b-oj189ifjfo] {
    border-bottom-color: var(--df-primary);
}

.agenda-list-editor-empty[b-oj189ifjfo] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--df-text-muted);
    text-align: center;
}

.agenda-list-editor-empty > .bi[b-oj189ifjfo] {
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 2.2rem;
}

.agenda-list-editor-empty h5[b-oj189ifjfo] {
    margin-bottom: 5px;
    color: inherit;
    font-size: 1rem;
    font-weight: 650;
}

.agenda-list-editor-empty p[b-oj189ifjfo] {
    margin-bottom: 14px;
    font-size: 0.82rem;
}

/* Move-to picker — the keyboard-reachable counterpart to dragging a row. */
.agenda-move-tree[b-oj189ifjfo] {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
}

.agenda-move-target[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    text-align: left;
    transition: var(--df-transition);
}

.agenda-move-target .bi[b-oj189ifjfo] {
    flex: none;
    color: #94a3b8;
    font-size: 0.85rem;
}

.agenda-move-target:hover:not(:disabled)[b-oj189ifjfo] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.agenda-move-target:disabled[b-oj189ifjfo] {
    color: #cbd5e1;
    cursor: default;
}

.agenda-move-target:disabled .bi[b-oj189ifjfo] {
    color: #cbd5e1;
}

/* Day panel fills its pane; notes/tasks grow to fill the height. */
.agenda-day-card[b-oj189ifjfo] {
    display: flex;
    flex-direction: column;
}

.agenda-day-body[b-oj189ifjfo] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.agenda-day-content[b-oj189ifjfo] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.agenda-tasks-scroll[b-oj189ifjfo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Calendar grid */
.agenda-cal[b-oj189ifjfo] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.agenda-cal th[b-oj189ifjfo] {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--df-text-muted);
    padding: 4px 0;
}

.agenda-cal td[b-oj189ifjfo] {
    padding: 2px;
}

.agenda-day[b-oj189ifjfo] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.agenda-day:hover[b-oj189ifjfo] {
    background: #e8edfd;
}

/* A literal grey here was the same brightness as a real day once the tokens flipped, so the
   month read as 35 days of September. Muted-plus-opacity dims against whichever surface it
   lands on, which is the whole point of doing it with tokens. */
.agenda-day-other[b-oj189ifjfo] {
    color: var(--df-text-muted);
    opacity: 0.55;
}

.agenda-day-today[b-oj189ifjfo] {
    font-weight: 700;
    color: #0d6efd;
}

.agenda-day-selected[b-oj189ifjfo],
.agenda-day-selected:hover[b-oj189ifjfo] {
    background: #0d6efd;
    color: #fff;
}

.agenda-day-marks[b-oj189ifjfo] {
    position: absolute;
    bottom: 5px;
    display: flex;
    gap: 3px;
}

.agenda-dot[b-oj189ifjfo] {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.agenda-dot-notes[b-oj189ifjfo] {
    background: #0d6efd;
}

.agenda-dot-tasks[b-oj189ifjfo] {
    background: #198754;
}

.agenda-day-selected .agenda-dot[b-oj189ifjfo] {
    background: var(--df-surface);
}

.agenda-legend[b-oj189ifjfo] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.agenda-legend .agenda-dot[b-oj189ifjfo] {
    margin-right: 4px;
    vertical-align: middle;
}

/* Rich-text notes editor — grows to fill the day panel's height */
.agenda-editor-wrap[b-oj189ifjfo] {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.agenda-editor-wrap[b-oj189ifjfo]  .rich-text-editor {
    flex: 1 1 auto;
    min-height: 0;
}

/* Notes search box + results dropdown */
.agenda-search[b-oj189ifjfo] {
    position: relative;
    min-width: 260px;
}

.agenda-search-results[b-oj189ifjfo] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px;
}

.agenda-search-item[b-oj189ifjfo] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 8px 10px;
    border-radius: 8px;
}

.agenda-search-item:hover[b-oj189ifjfo] {
    background: #e8edfd;
}

.agenda-search-item + .agenda-search-item[b-oj189ifjfo] {
    border-top: 1px solid #f1f3f5;
}

.agenda-save[b-oj189ifjfo] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.agenda-save-dot[b-oj189ifjfo] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #198754;
}

.agenda-save-dirty .agenda-save-dot[b-oj189ifjfo] {
    background: #f5a524;
}

/* Tasks */
.agenda-task[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
}

.agenda-task + .agenda-task[b-oj189ifjfo] {
    border-top: 1px solid #e9ecef;
}

.agenda-task-accent[b-oj189ifjfo] {
    width: 4px;
    align-self: stretch;
    min-height: 22px;
    border-radius: 4px;
}

.agenda-task-cb[b-oj189ifjfo] {
    flex: none;
    cursor: pointer;
}

.agenda-task-text[b-oj189ifjfo] {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.35;
}

.agenda-task-done .agenda-task-text[b-oj189ifjfo] {
    text-decoration: line-through;
    color: var(--df-text-muted);
}

.agenda-task-del[b-oj189ifjfo] {
    text-decoration: none;
    font-size: 0.9rem;
}

/* Per-row quick actions (move/delete), revealed on hover to keep rows clean.
   On touch devices — where there is no hover — they stay visible. */
.agenda-task-actions[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.agenda-task:hover .agenda-task-actions[b-oj189ifjfo],
.agenda-task:focus-within .agenda-task-actions[b-oj189ifjfo] {
    opacity: 1;
}

@media (hover: none) {
    .agenda-task-actions[b-oj189ifjfo] {
        opacity: 1;
    }
}

.agenda-task-move[b-oj189ifjfo] {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 7px;
    font-size: 0.72rem;
    line-height: 1;
}

/* Overdue backlog pinned above today's tasks */
.agenda-task-group[b-oj189ifjfo] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9aa0a6;
    padding: 12px 6px 4px;
}

.agenda-task-group-overdue[b-oj189ifjfo] {
    color: var(--df-danger);
}

/* Red pill on the Tasks toggle — visible from any day/panel when a backlog exists. */
.agenda-overdue-indicator[b-oj189ifjfo] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--df-danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
}

.agenda-overdue-indicator .bi[b-oj189ifjfo] {
    font-size: 0.65rem;
}

/* Summary banner above the overdue backlog, with a bulk "move all" action. */
.agenda-overdue-banner[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fdecec;
    border: 1px solid #f6d7da;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
}

.agenda-overdue-banner > .bi[b-oj189ifjfo] {
    color: var(--df-danger);
    font-size: 1.1rem;
}

.agenda-overdue-banner-text[b-oj189ifjfo] {
    font-size: 0.875rem;
    color: #842029;
    flex: 1;
}

.agenda-overdue-banner-text strong[b-oj189ifjfo] {
    color: var(--df-danger);
}

/* Collapsible "Overdue" header with chevron + running count. */
.agenda-overdue-toggle[b-oj189ifjfo] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    color: var(--df-danger);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 12px 6px 4px;
}

.agenda-overdue-toggle .chev[b-oj189ifjfo] {
    transition: transform 0.15s ease;
}

.agenda-overdue-toggle.collapsed .chev[b-oj189ifjfo] {
    transform: rotate(-90deg);
}

.agenda-overdue-count[b-oj189ifjfo] {
    margin-left: auto;
    background: var(--df-danger);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    padding: 1px 8px;
    letter-spacing: 0;
}

/* Per-original-day sub-heading inside the overdue group. */
.agenda-overdue-day[b-oj189ifjfo] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #b02a37;
    padding: 8px 6px 2px;
    letter-spacing: 0.3px;
}

.agenda-task-overdue[b-oj189ifjfo] {
    background: #fdf6f6;
    border-radius: 8px;
}

.agenda-task-overdue + .agenda-task-overdue[b-oj189ifjfo] {
    border-top-color: #f6d7da;
}

.agenda-task-overdue-date[b-oj189ifjfo] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--df-danger);
    background: #fdecec;
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
}

/* Priority colors */
.agenda-pri-high[b-oj189ifjfo] { background: var(--df-danger); }
.agenda-pri-normal[b-oj189ifjfo] { background: var(--df-text-muted); }
.agenda-pri-low[b-oj189ifjfo] { background: #198754; }

.agenda-pri-swatch[b-oj189ifjfo] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.agenda-pri-badge[b-oj189ifjfo] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.agenda-pri-badge-high[b-oj189ifjfo] { background: #fdecec; color: var(--df-danger); }
.agenda-pri-badge-normal[b-oj189ifjfo] { background: #eef0f3; color: #5b6573; }
.agenda-pri-badge-low[b-oj189ifjfo] { background: #e7f6ef; color: #198754; }

/* Mobile: stack calendar above the day panel instead of side-by-side.
   The JS splitter forces an inline viewport-fill height and a fixed-width
   left pane — both are overridden here so the page flows and scrolls
   naturally on narrow screens. */
@media (max-width: 768px) {
    .agenda-split[b-oj189ifjfo] {
        flex-direction: column;
        height: auto !important;   /* override agenda-splitter.js inline height */
        min-height: 0;
        --agenda-left: auto;
    }

    .agenda-split-left[b-oj189ifjfo] {
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .agenda-navigator-body[b-oj189ifjfo] {
        overflow: visible;
    }

    .agenda-notes-list[b-oj189ifjfo] {
        max-height: 340px;
        overflow-y: auto;
    }

    /* No horizontal handle to drag when the panes are stacked. */
    .agenda-split-handle[b-oj189ifjfo] {
        display: none;
    }

    .agenda-split-right[b-oj189ifjfo] {
        width: 100%;
        min-width: 0;
        overflow: visible;
        margin-top: 12px;
    }

    /* Give the notes editor / task list a usable height when stacked. */
    .agenda-day-content[b-oj189ifjfo] {
        min-height: 360px;
    }

    /* Search box goes full-width and drops onto its own row in the header. */
    .agenda-search[b-oj189ifjfo] {
        min-width: 0;
        width: 100%;
    }
}

/* ── The phone's own chrome, hidden by default ────────────────────────────────
   Four elements below are in the markup for every viewport but are only ever the
   phone's: the week strip, the date button that opens the month sheet, the back
   arrow out of a note, and the sheet's scrim. Each is given its display by the
   641px block below, so the default has to be none — without it they render on
   the desktop as bare browser buttons above the day, which is exactly what they
   did. Same contract the editor's overflow button keeps in app.css: phone-only
   markup is hidden at the base and turned on by the phone block, never the other
   way round. .agenda-day-heading-full is the opposite case — the desktop's long
   date, shown here and hidden there. */
.agenda-weekstrip[b-oj189ifjfo],
.agenda-month-btn[b-oj189ifjfo],
.agenda-phone-back[b-oj189ifjfo],
.agenda-phone-scrim[b-oj189ifjfo] {
    display: none;
}

/* ── Phone: the day is the screen, the month is a sheet ───────────────────────
   The 768px block above stacks the two panes. That is fine on a tablet and wrong
   on a phone: the navigator keeps its full month grid and the day panel — the
   note you opened the app to write — starts 700px down, below the fold on every
   load. Same failure as the ~80 nav items that used to render above every page.

   So below 641px only one pane is on screen. Calendar mode shows the day, with a
   week strip where the month was and the month itself one tap away in a sheet;
   the notes list shows the list until you pick a note. Everything here is inside
   this block, so the desktop is untouched.

   Takes its row rhythm from the --df-row-* bloc in app.css, like the ticket list,
   the timecard and alerts — that shared bloc is what stops four phone surfaces
   looking like four apps. */
@media (max-width: 640.98px) {
    .agenda-split[b-oj189ifjfo] {
        position: relative;
        gap: 0;
    }

    /* Whichever pane is not the screen is not rendered at all — display:none rather
       than a transform, so the editor inside it cannot take a tap it never shows. */
    .agenda-split.phone-day > .agenda-split-left[b-oj189ifjfo],
    .agenda-split.phone-nav > .agenda-split-right[b-oj189ifjfo] {
        display: none;
    }

    .agenda-split-right[b-oj189ifjfo],
    .agenda-split-left[b-oj189ifjfo] {
        margin-top: 0;
        width: 100%;
    }

    .agenda-navigator-card[b-oj189ifjfo],
    .agenda-day-card[b-oj189ifjfo] {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }

    .agenda-navigator-body[b-oj189ifjfo],
    .agenda-day-body[b-oj189ifjfo] {
        padding: 0;
    }

    /* The day heading is the phone's date button; the desktop's long-form date is not.
       Both are in the markup, and exactly one is ever shown. */
    .agenda-day-heading-full[b-oj189ifjfo] {
        display: none;
    }

    .agenda-month-btn[b-oj189ifjfo] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 4px 10px 4px 12px;
        border: 1px solid var(--df-border);
        border-radius: 50rem;
        background: var(--df-surface);
        color: var(--df-text);
        font-size: 1rem;
        font-weight: 600;
    }

    .agenda-month-btn .bi[b-oj189ifjfo] {
        font-size: 0.75rem;
        color: var(--df-text-muted);
    }

    /* ── The week strip ─────────────────────────────────────────────────────
       Seven days and two chevrons across 390px: 44px of tappable day, which is
       the floor, with the steppers taking the slack. It never scrolls sideways —
       every day it offers is on screen. */
    .agenda-weekstrip[b-oj189ifjfo] {
        display: flex;
        align-items: stretch;
        gap: 1px;
        margin: 0 0 10px;
        padding: 4px 0;
        border-bottom: 1px solid var(--df-border);
    }

    .agenda-weekstep[b-oj189ifjfo] {
        flex: 0 0 auto;
        width: 26px;
        border: 0;
        background: none;
        color: var(--df-text-muted);
        font-size: 1.1rem;
        line-height: 1;
        padding: 0;
        border-radius: 0.5rem;
    }

    .agenda-wday[b-oj189ifjfo] {
        flex: 1 1 0;
        min-width: 0;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 0;
        border: 0;
        border-radius: 0.6rem;
        background: none;
        color: var(--df-text-muted);
        transition: background-color var(--df-transition);
    }

    .agenda-wday-name[b-oj189ifjfo] {
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .agenda-wday-num[b-oj189ifjfo] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--df-text);
    }

    /* Today is marked even when it is not the selection — otherwise stepping two weeks
       out leaves nothing on screen saying where "now" is. */
    .agenda-wday.is-today .agenda-wday-num[b-oj189ifjfo] {
        color: var(--df-primary);
    }

    .agenda-wday.sel[b-oj189ifjfo] {
        background: var(--df-primary);
    }

    .agenda-wday.sel .agenda-wday-name[b-oj189ifjfo],
    .agenda-wday.sel .agenda-wday-num[b-oj189ifjfo] {
        color: var(--df-on-primary, #fff);
    }

    .agenda-wday.sel .agenda-dot[b-oj189ifjfo] {
        background: var(--df-surface);
    }

    /* ── The month, as a bottom sheet ───────────────────────────────────────
       This is the left pane restyled, not a second copy of the calendar: one grid
       in the markup means the two cannot drift apart. It carries the Calendar /
       Notes list switch with it, which is also how the phone reaches the list once
       the navigator has stopped being a pane of its own. */
    .agenda-split.phone-month-open > .agenda-split-left[b-oj189ifjfo] {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1055;
        width: auto;
        max-height: 88vh;
        overflow-y: auto;
        padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
        background: var(--df-surface);
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
    }

    /* The grab handle, drawn rather than added to the markup — it is pure affordance
       and has nothing to say to the desktop. */
    .agenda-split.phone-month-open > .agenda-split-left[b-oj189ifjfo]::before {
        content: "";
        display: block;
        width: 38px;
        height: 4px;
        margin: 0 auto 12px;
        border-radius: 50rem;
        background: var(--df-border);
    }

    .agenda-phone-scrim[b-oj189ifjfo] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1054;
        background: rgba(15, 23, 42, 0.45);
    }

    /* Day cells get a real target inside the sheet. */
    .agenda-day[b-oj189ifjfo] {
        min-height: 44px;
    }

    /* ── Notes list: the note needs a way back to the list ──────────────────── */
    .agenda-phone-back[b-oj189ifjfo] {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        margin-left: -8px;
        border: 0;
        background: none;
        color: var(--df-primary);
        font-size: 1.5rem;
        line-height: 1;
    }

    .agenda-list-note-header[b-oj189ifjfo] {
        align-items: flex-start;
    }

    /* The list is the whole screen here, so it stops being a 340px box that scrolls
       inside a page that is also scrolling. */
    .agenda-notes-list[b-oj189ifjfo] {
        max-height: none;
        overflow-y: visible;
    }

    .agenda-folder-row[b-oj189ifjfo],
    .agenda-note-row[b-oj189ifjfo] {
        min-height: 48px;
    }

    /* ── Tasks ──────────────────────────────────────────────────────────────
       The add-a-task row is an input, three priority buttons and Add — four
       controls fighting over 390px. The input takes the row; priority and Add
       share the next one. */
    .agenda-day-content .form-control[b-oj189ifjfo] {
        min-width: 0;
    }

    .agenda-task[b-oj189ifjfo] {
        min-height: var(--df-row-min-h);
        padding-top: var(--df-row-pad-y);
        padding-bottom: var(--df-row-pad-y);
        flex-wrap: wrap;
    }

    /* A 12px checkbox is not a target. This is the one control on the row that
       every task needs, so it gets the room. */
    .agenda-task-cb[b-oj189ifjfo] {
        width: 24px;
        height: 24px;
    }

    .agenda-task-text[b-oj189ifjfo] {
        font-size: var(--df-row-title);
        line-height: 1.35;
    }

    /* Hover-revealed actions do not exist on a phone, and an invisible control that
       still takes taps is how a list of alerts became a coin flip that could throw
       one away. Visible, 40px, and the destructive one set apart from the rest. */
    .agenda-task-actions[b-oj189ifjfo] {
        opacity: 1;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .agenda-task-actions .btn[b-oj189ifjfo],
    .agenda-task-del[b-oj189ifjfo],
    .agenda-task-move[b-oj189ifjfo] {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        padding: 0;
    }

    .agenda-task-del[b-oj189ifjfo] {
        margin-left: 8px;
        color: var(--df-danger);
    }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .agenda-split-handle[b-oj189ifjfo]::before {
    background: var(--df-border);
}
html.nav-theme-dark .agenda-note-dot[b-oj189ifjfo] {
    background: var(--df-border);
}
html.nav-theme-dark .agenda-move-target:disabled[b-oj189ifjfo] {
    color: var(--df-border);
}
html.nav-theme-dark .agenda-move-target:disabled .bi[b-oj189ifjfo] {
    color: var(--df-border);
}
html.nav-theme-dark .agenda-day:hover[b-oj189ifjfo] {
    background: var(--df-primary-light);
}
html.nav-theme-dark .agenda-search-item:hover[b-oj189ifjfo] {
    background: var(--df-primary-light);
}
html.nav-theme-dark .agenda-search-item + .agenda-search-item[b-oj189ifjfo] {
    border-top: 1px solid var(--df-border);
}
html.nav-theme-dark .agenda-task + .agenda-task[b-oj189ifjfo] {
    border-top: 1px solid var(--df-border);
}
html.nav-theme-dark .agenda-overdue-banner[b-oj189ifjfo] {
    background: var(--df-danger-light);
}
html.nav-theme-dark .agenda-task-overdue[b-oj189ifjfo] {
    background: var(--df-danger-light);
}
html.nav-theme-dark .agenda-task-overdue-date[b-oj189ifjfo] {
    background: var(--df-danger-light);
}
html.nav-theme-dark .agenda-pri-badge-high[b-oj189ifjfo] {
    background: var(--df-danger-light);
}
html.nav-theme-dark .agenda-pri-badge-normal[b-oj189ifjfo] {
    background: var(--df-bg);
}
html.nav-theme-dark .agenda-pri-badge-low[b-oj189ifjfo] {
    background: var(--df-success-light);
}
/* /Components/Pages/AIChat/AIChat.razor.rz.scp.css */
.chat-shell[b-np68xhiyn7] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
    height: calc(100vh - 180px);
    min-height: 520px;
}

@media (max-width: 900px) {
    .chat-shell[b-np68xhiyn7] {
        grid-template-columns: 1fr;
        height: auto;
    }
}

/* ---- Session sidebar ---- */
.sessions-card[b-np68xhiyn7] {
    display: flex;
    flex-direction: column;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
    min-height: 0;
}

.sessions-header[b-np68xhiyn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--df-border);
}

.sessions-header h6[b-np68xhiyn7] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--df-text);
}

.new-chat-btn[b-np68xhiyn7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--df-primary);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    transition: background var(--df-transition);
}

.new-chat-btn:hover:not(:disabled)[b-np68xhiyn7] {
    background: var(--df-primary-hover);
}

.new-chat-btn:disabled[b-np68xhiyn7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sessions-list[b-np68xhiyn7] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.session-group-label[b-np68xhiyn7] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--df-text-muted);
    letter-spacing: 0.05em;
    padding: 0.75rem 0.5rem 0.25rem;
}

.session-item[b-np68xhiyn7] {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.65rem;
    margin-bottom: 2px;
    border: none;
    background: transparent;
    border-radius: 0.5rem;
    color: var(--df-text);
    font-size: 0.875rem;
    line-height: 1.3;
    transition: background var(--df-transition);
    cursor: pointer;
}

.session-item:hover:not(:disabled)[b-np68xhiyn7] {
    background: var(--df-primary-light);
}

.session-item.active[b-np68xhiyn7] {
    background: var(--df-primary);
    color: #fff;
}

.session-item.active:hover[b-np68xhiyn7] {
    background: var(--df-primary-hover);
}

.session-item:disabled[b-np68xhiyn7] {
    cursor: not-allowed;
}

.session-title[b-np68xhiyn7] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1.5rem;
    font-weight: 500;
}

.session-delete[b-np68xhiyn7] {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--df-text-muted);
    opacity: 0;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1;
    transition: opacity var(--df-transition), color var(--df-transition), background var(--df-transition);
}

.session-item:hover .session-delete[b-np68xhiyn7],
.session-item:focus-within .session-delete[b-np68xhiyn7] {
    opacity: 1;
}

.session-delete:hover[b-np68xhiyn7] {
    color: var(--df-danger);
    background: var(--df-danger-light);
}

.sessions-empty[b-np68xhiyn7] {
    text-align: center;
    color: var(--df-text-muted);
    padding: 2rem 1rem;
    font-size: 0.875rem;
}

/* ---- Main chat area ---- */
.chat-card[b-np68xhiyn7] {
    display: flex;
    flex-direction: column;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
    min-height: 0;
}

.chat-header[b-np68xhiyn7] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--df-border);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-header .badge-new[b-np68xhiyn7] {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    background: var(--df-primary-light);
    color: var(--df-primary);
    border-radius: 999px;
}

.chat-messages[b-np68xhiyn7] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--df-bg);
    min-height: 0;
}

.msg-row[b-np68xhiyn7] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
}

.msg-row.user[b-np68xhiyn7] {
    flex-direction: row-reverse;
}

.msg-avatar[b-np68xhiyn7] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.msg-avatar.user[b-np68xhiyn7] {
    background: var(--df-primary);
}

.msg-avatar.assistant[b-np68xhiyn7] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.msg-bubble[b-np68xhiyn7] {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-shadow: var(--df-card-shadow);
}

.msg-row.user .msg-bubble[b-np68xhiyn7] {
    background: var(--df-primary);
    color: #fff;
    border-bottom-right-radius: 0.3rem;
}

.msg-row.assistant .msg-bubble[b-np68xhiyn7] {
    background: var(--df-surface);
    color: var(--df-text);
    border: 1px solid var(--df-border);
    border-bottom-left-radius: 0.3rem;
}

.msg-time[b-np68xhiyn7] {
    font-size: 0.72rem;
    color: var(--df-text-muted);
    margin-top: 0.25rem;
    padding: 0 0.25rem;
}

.msg-row.user .msg-time[b-np68xhiyn7] {
    text-align: right;
}

/* Empty state */
.chat-empty[b-np68xhiyn7] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--df-text-muted);
}

.chat-empty-icon[b-np68xhiyn7] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.chat-empty h4[b-np68xhiyn7] {
    font-size: 1.125rem;
    color: var(--df-text);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.chat-empty p[b-np68xhiyn7] {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.suggested-prompts[b-np68xhiyn7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    max-width: 640px;
    width: 100%;
}

.prompt-chip[b-np68xhiyn7] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.78rem;
    color: var(--df-text);
    cursor: pointer;
    transition: border-color var(--df-transition), background var(--df-transition), box-shadow var(--df-transition);
}

.prompt-chip:hover[b-np68xhiyn7] {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
    box-shadow: var(--df-card-shadow);
}

/* Caret + typing */
.ai-chat-caret[b-np68xhiyn7] {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: ai-chat-blink-b-np68xhiyn7 1s steps(2) infinite;
    opacity: 0.75;
}

@keyframes ai-chat-blink-b-np68xhiyn7 {
    to { opacity: 0; }
}

/* ---- Composer / input ---- */
.chat-composer[b-np68xhiyn7] {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--df-border);
    background: var(--df-surface);
}

.composer-wrap[b-np68xhiyn7] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    border: 1px solid var(--df-border);
    border-radius: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    background: var(--df-surface);
    transition: border-color var(--df-transition), box-shadow var(--df-transition);
}

.composer-wrap:focus-within[b-np68xhiyn7] {
    border-color: var(--df-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.composer-textarea[b-np68xhiyn7] {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.35rem 0.25rem;
    max-height: 180px;
    min-height: 24px;
    font-family: inherit;
    background: transparent;
    color: var(--df-text);
}

.composer-textarea[b-np68xhiyn7]::placeholder {
    color: var(--df-text-muted);
}

.send-btn[b-np68xhiyn7] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    background: var(--df-primary);
    color: #fff;
    transition: background var(--df-transition), transform var(--df-transition);
}

.send-btn:hover:not(:disabled)[b-np68xhiyn7] {
    background: var(--df-primary-hover);
}

.send-btn:active:not(:disabled)[b-np68xhiyn7] {
    transform: scale(0.96);
}

.send-btn:disabled[b-np68xhiyn7] {
    background: var(--df-border);
    color: var(--df-text-muted);
    cursor: not-allowed;
}

.composer-hint[b-np68xhiyn7] {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.composer-model[b-np68xhiyn7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
}

.composer-model-select[b-np68xhiyn7] {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: var(--df-text);
    cursor: pointer;
}

.composer-model-select:disabled[b-np68xhiyn7] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Image attachments ---- */
.pending-attachments[b-np68xhiyn7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pending-thumb[b-np68xhiyn7] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--df-border);
    background: var(--df-bg);
}

.pending-thumb img[b-np68xhiyn7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pending-thumb-remove[b-np68xhiyn7] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--df-transition);
}

.pending-thumb-remove:hover[b-np68xhiyn7] {
    background: var(--df-danger);
}

.msg-images[b-np68xhiyn7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.msg-image[b-np68xhiyn7] {
    max-width: 260px;
    max-height: 260px;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: zoom-in;
    display: block;
}

.msg-row.user .msg-image[b-np68xhiyn7] {
    border-color: rgba(255, 255, 255, 0.3);
}

.file-chip[b-np68xhiyn7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    font-size: 0.78rem;
    max-width: 260px;
    color: var(--df-text);
    text-decoration: none;
    line-height: 1.2;
    transition: border-color var(--df-transition), background var(--df-transition);
}

.file-chip:hover[b-np68xhiyn7] {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
    color: var(--df-text);
    text-decoration: none;
}

.file-chip-icon[b-np68xhiyn7] {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
}

.file-chip-name[b-np68xhiyn7] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.file-chip-size[b-np68xhiyn7] {
    color: var(--df-text-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
}

.msg-row.user .file-chip[b-np68xhiyn7] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.msg-row.user .file-chip:hover[b-np68xhiyn7] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.msg-row.user .file-chip-size[b-np68xhiyn7] {
    color: rgba(255, 255, 255, 0.7);
}

/* Pending file chip (before send) */
.pending-file[b-np68xhiyn7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    font-size: 0.78rem;
    max-width: 240px;
    position: relative;
}

.pending-file-name[b-np68xhiyn7] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--df-text);
}

.pending-file-remove[b-np68xhiyn7] {
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: 3px;
    transition: color var(--df-transition), background var(--df-transition);
}

.pending-file-remove:hover[b-np68xhiyn7] {
    color: var(--df-danger);
    background: var(--df-danger-light);
}

/* Attach button */
.attach-btn[b-np68xhiyn7] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--df-text-muted);
    transition: background var(--df-transition), color var(--df-transition);
    cursor: pointer;
}

.attach-btn:hover:not(:disabled)[b-np68xhiyn7] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.attach-btn:disabled[b-np68xhiyn7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.attach-hidden-input[b-np68xhiyn7] {
    display: none;
}

/* Drop zone overlay */
.chat-card.dragging[b-np68xhiyn7]::after {
    content: 'Drop files to attach';
    position: absolute;
    inset: 0;
    background: rgba(79, 70, 229, 0.08);
    border: 2px dashed var(--df-primary);
    border-radius: var(--df-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--df-primary);
    pointer-events: none;
    z-index: 10;
}

.chat-card[b-np68xhiyn7] {
    position: relative;
}

kbd[b-np68xhiyn7] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 0.25rem;
    color: var(--df-text);
}
/* /Components/Pages/Analytics/BugOverview.razor.rz.scp.css */
.bug-overview[b-rt37rtd2im] {
    --bug-primary: var(--df-primary);
    --bug-muted: var(--df-text-muted);
    --bug-border: var(--df-border);
    --bug-surface: #fff;
    --bug-shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    padding-bottom: 2rem;
}

html.nav-theme-dark .bug-overview[b-rt37rtd2im] {
    --bug-muted: #94a3b8;
    --bug-border: #334155;
    --bug-surface: #1e293b;
    --bug-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.page-heading[b-rt37rtd2im] {
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: -.015em;
}

.page-subtitle[b-rt37rtd2im] {
    color: var(--bug-muted);
    font-size: .86rem;
}

.scope-pill[b-rt37rtd2im] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .38rem .75rem;
    border: 1px solid var(--df-primary-border);
    border-radius: 999px;
    background: var(--df-primary-light);
    color: #3730a3;
    font-size: .76rem;
    font-weight: 650;
    white-space: nowrap;
}

.filter-card[b-rt37rtd2im] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem;
    margin: 18px 0;
    padding: .75rem 1rem;
    border: 1px solid var(--bug-border);
    border-radius: .625rem;
    background: var(--bug-surface);
    box-shadow: var(--bug-shadow);
}

.filter-field label[b-rt37rtd2im] {
    display: block;
    margin-bottom: 3px;
    color: var(--bug-muted);
    font-size: .69rem;
    font-weight: 650;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.filter-field select[b-rt37rtd2im] {
    min-width: 180px;
    border-color: var(--bug-border);
    font-size: .8rem;
}

.range-note[b-rt37rtd2im] {
    margin-left: auto;
    padding-bottom: .33rem;
    color: var(--bug-muted);
    font-size: .75rem;
}

.card[b-rt37rtd2im] {
    border-color: var(--bug-border);
    border-radius: .625rem;
    box-shadow: var(--bug-shadow);
}

.kpi-card[b-rt37rtd2im] {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bug-border);
    background: var(--bug-surface);
    color: inherit;
}

/* Bootstrap's row-cols-* stops at 6, so the KPI strip is its own grid. It steps up to all
   eight tiles on one line only once there is room for them to stay legible. */
.kpi-grid[b-rt37rtd2im] {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 992px) {
    .kpi-grid[b-rt37rtd2im] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1600px) {
    .kpi-grid[b-rt37rtd2im] {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (max-width: 479.98px) {
    .kpi-grid[b-rt37rtd2im] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.kpi-clickable[b-rt37rtd2im] {
    cursor: pointer;
    transition: box-shadow var(--df-transition, .2s ease), transform var(--df-transition, .2s ease);
}

.kpi-clickable:hover[b-rt37rtd2im],
.kpi-clickable:focus-visible[b-rt37rtd2im] {
    box-shadow: var(--df-card-shadow-hover, 0 4px 12px rgba(15, 23, 42, .12));
    transform: translateY(-1px);
}

.kpi-clickable:focus-visible[b-rt37rtd2im] {
    outline: 2px solid var(--kpi-color, var(--bug-primary));
    outline-offset: 2px;
}

.kpi-card[b-rt37rtd2im]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--kpi-color, var(--bug-primary));
    content: "";
}

.kpi-card .card-body[b-rt37rtd2im] {
    display: block;
    padding: .7rem .7rem .6rem .8rem;
}

.kpi-top[b-rt37rtd2im] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .4rem;
}

.kpi-label[b-rt37rtd2im] {
    color: var(--bug-muted);
    font-size: .64rem;
    font-weight: 650;
    line-height: 1.3;
    text-transform: uppercase;
}

.kpi-icon[b-rt37rtd2im] {
    display: grid;
    width: 22px;
    height: 22px;
    flex: none;
    place-items: center;
    border-radius: 6px;
    background: var(--kpi-soft, var(--df-primary-light));
    color: var(--kpi-color, var(--bug-primary));
    font-size: .74rem;
}

.kpi-value[b-rt37rtd2im] {
    display: block;
    margin-top: .2rem;
    font-size: 1.4rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.kpi-value small[b-rt37rtd2im] {
    color: var(--bug-muted);
    font-size: .7rem;
    font-weight: 550;
    letter-spacing: 0;
}

/* Left-aligned and wrapping: at eight-across there is no room to push the descriptor to the
   far edge, and a wrapped space-between row reads as two unrelated fragments. */
.kpi-foot[b-rt37rtd2im] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .3rem;
    min-height: 1rem;
    margin-top: .25rem;
    color: var(--bug-muted);
    font-size: .62rem;
    line-height: 1.35;
}

.trend[b-rt37rtd2im] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 650;
}

.trend.good[b-rt37rtd2im] {
    color: var(--df-success);
}

.trend.bad[b-rt37rtd2im] {
    color: var(--df-danger);
}

.trend.neutral[b-rt37rtd2im] {
    color: #475569;
}

/* Names each band of the page so the grouping is legible rather than implied by spacing. */
.section-heading[b-rt37rtd2im] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .6rem;
    color: var(--bug-muted);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-heading span[b-rt37rtd2im] {
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.chart-card .card-header[b-rt37rtd2im] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 55px;
    padding: .78rem 1rem;
    background: var(--bug-surface);
}

.chart-title[b-rt37rtd2im] {
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
}

.chart-subtitle[b-rt37rtd2im] {
    margin-top: 2px;
    color: var(--bug-muted);
    font-size: .68rem;
    font-weight: 400;
}

.chart-total[b-rt37rtd2im] {
    color: var(--bug-muted);
    font-size: .69rem;
    white-space: nowrap;
}

.chart-tools[b-rt37rtd2im] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-end;
    gap: .45rem;
    margin-left: auto;
}

.chart-tools > label[b-rt37rtd2im] {
    margin: 0;
}

.chart-tools > label > span[b-rt37rtd2im] {
    display: block;
    margin-bottom: 2px;
    color: var(--bug-muted);
    font-size: .62rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.chart-tools .form-select[b-rt37rtd2im] {
    width: auto;
    min-width: 86px;
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-left: .5rem;
    font-size: .7rem;
}

.chart-toggles[b-rt37rtd2im] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    min-height: 29px;
    padding: .2rem .45rem;
    border: 1px solid var(--bug-border);
    border-radius: .4rem;
    color: var(--bug-muted);
    font-size: .66rem;
}

.chart-toggles label[b-rt37rtd2im] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin: 0;
    white-space: nowrap;
}

.chart-toggles input[b-rt37rtd2im] {
    margin: 0;
}

.chart-card .card-body[b-rt37rtd2im] {
    padding: .85rem 1rem 1rem;
}

.chart-wrap[b-rt37rtd2im] {
    position: relative;
    height: 265px;
}

.chart-wrap.compact[b-rt37rtd2im] {
    height: 245px;
}

/* Numeric cells line up column-wise while the surrounding prose stays proportional. */
.num[b-rt37rtd2im] {
    font-variant-numeric: tabular-nums;
}

.empty-chart[b-rt37rtd2im] {
    display: grid;
    height: 245px;
    place-items: center;
    color: var(--bug-muted);
    font-size: .8rem;
    text-align: center;
}

.scope-footer[b-rt37rtd2im] {
    margin-top: 14px;
    color: var(--bug-muted);
    font-size: .7rem;
    text-align: right;
}

html.nav-theme-dark .scope-pill[b-rt37rtd2im] {
    border-color: #4338ca;
    background: #1e1b4b;
    color: #c7d2fe;
}

@media (max-width: 767.98px) {
    .range-note[b-rt37rtd2im] {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .filter-field[b-rt37rtd2im],
    .filter-field select[b-rt37rtd2im] {
        width: 100%;
    }

    .chart-wrap[b-rt37rtd2im] {
        height: 230px;
    }

    .chart-tools[b-rt37rtd2im] {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .kpi-clickable:hover[b-rt37rtd2im], .kpi-clickable:focus-visible[b-rt37rtd2im] {
    box-shadow: var(--df-card-shadow-hover, 0 4px 12px rgba(15, 23, 42, .12));
}
html.nav-theme-dark .trend.neutral[b-rt37rtd2im] {
    color: var(--df-text-muted);
}
/* /Components/Pages/Analytics/TimeSpent.razor.rz.scp.css */
/* Legend / breakdown swatch. Semantic colour is always paired with the series label next to it,
   so the dot is a locator rather than the only carrier of meaning. */
.ts-dot[b-fao3mke05n] {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex: 0 0 auto;
}
/* /Components/Pages/Azure/AzureCostImports.razor.rz.scp.css */
/* Page-local chrome only — cards, tables, badges, alerts and empty states come from app.css. */

.page-subtitle[b-8nzsck6neh] {
    color: var(--df-text-muted);
    font-size: 0.78rem;
}

.history-count[b-8nzsck6neh] {
    font-size: 0.72rem;
    font-weight: 600;
}

/* The blob path is a real path, so it earns the monospace exception. */
.blob-cell span[b-8nzsck6neh] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    word-break: break-all;
}

.currency-code[b-8nzsck6neh] {
    font-size: 0.72rem;
    margin-left: 0.25rem;
}

.numeric[b-8nzsck6neh] {
    font-variant-numeric: tabular-nums;
}

.schedule-intro[b-8nzsck6neh] {
    font-size: 0.78rem;
    max-width: 68ch;
}

.schedule-row[b-8nzsck6neh] {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 1.5rem;
}

.schedule-field[b-8nzsck6neh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
}

.schedule-field .form-label[b-8nzsck6neh] {
    margin-bottom: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--df-text-muted);
}

.schedule-field .form-text[b-8nzsck6neh] {
    font-size: 0.72rem;
}

.schedule-next[b-8nzsck6neh] {
    padding-top: 0.3rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.schedule-saved[b-8nzsck6neh] {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
}
/* /Components/Pages/Azure/AzureCosts.razor.rz.scp.css */
/* Page-local chrome only. Cards, stat cards, tables, badges, empty states and the type scale all
   come from app.css — nothing here re-styles a shared component. */

.page-subtitle[b-2oje81lm0i] {
    color: var(--df-text-muted);
    font-size: 0.78rem;
}

.scope-pill[b-2oje81lm0i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.38rem 0.75rem;
    border: 1px solid var(--df-primary-border);
    border-radius: 50rem;
    background: var(--df-primary-light);
    color: #3730a3;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Section navigation ──
   The page is long by design. These are jump links, not tabs — everything stays on one page. */
.section-nav[b-2oje81lm0i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.section-nav a[b-2oje81lm0i] {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--df-border);
    border-radius: 50rem;
    background: var(--df-surface);
    color: var(--df-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--df-transition);
}

.section-nav a:hover[b-2oje81lm0i],
.section-nav a:focus-visible[b-2oje81lm0i] {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
    color: #3730a3;
}

.section-title[b-2oje81lm0i] {
    margin: 2rem 0 0.85rem;
    font-size: 1.125rem;
    font-weight: 600;
    scroll-margin-top: 1rem;
}

/* ── Filters ── */
.filter-card[b-2oje81lm0i] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    box-shadow: var(--df-card-shadow);
}

.filter-field[b-2oje81lm0i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 170px;
}

.filter-field label[b-2oje81lm0i] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--df-text-muted);
}

.filter-spacer[b-2oje81lm0i] { flex: 1 1 auto; }

.range-note[b-2oje81lm0i] {
    max-width: 34ch;
    font-size: 0.72rem;
    color: var(--df-text-muted);
}

.tag-select[b-2oje81lm0i] { width: auto; min-width: 130px; }

/* ── Card chrome ── */
.card-window[b-2oje81lm0i] {
    font-size: 0.72rem;
    font-weight: 600;
}

.card-note[b-2oje81lm0i] {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: var(--df-text-muted);
}

.mini-stat[b-2oje81lm0i] { padding: 0.15rem 0; }

.mini-stat .stat-value[b-2oje81lm0i] {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.mini-stat .stat-label[b-2oje81lm0i] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-text-muted);
}

/* Delta line under a stat value. The arrow icon carries the direction, so colour is never the
   only signal. */
.stat-trend[b-2oje81lm0i] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.stat-trend > span:first-child[b-2oje81lm0i] { font-weight: 600; }

/* ── Movers ──
   A diverging bar per row: the centre line is no change, right is a rise, left is a fall. */
.mover-list[b-2oje81lm0i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mover[b-2oje81lm0i] {
    display: grid;
    grid-template-columns: minmax(90px, 1.1fr) 2fr minmax(90px, auto);
    align-items: center;
    gap: 0.6rem;
}

.mover-name[b-2oje81lm0i] {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mover-track[b-2oje81lm0i] {
    position: relative;
    height: 14px;
    border-radius: 3px;
    background: var(--df-bg);
}

/* The centre line reads as the zero point the bars diverge from. */
.mover-track[b-2oje81lm0i]::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--df-border);
}

.mover-bar[b-2oje81lm0i] {
    position: absolute;
    top: 1px;
    height: 12px;
    border-radius: 3px;
}

.mover-up[b-2oje81lm0i] { background: var(--df-danger); }
.mover-down[b-2oje81lm0i] { background: var(--df-success); }

.mover-value[b-2oje81lm0i] {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Heatmap ──
   Seven day-of-week rows across thirteen weeks. Opacity carries magnitude against a single hue,
   which is the correct encoding for a sequential scale. */
.heatmap[b-2oje81lm0i] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.heatmap-row[b-2oje81lm0i] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.heatmap-day[b-2oje81lm0i] {
    width: 26px;
    flex: 0 0 26px;
    font-size: 0.65rem;
    color: var(--df-text-muted);
}

.heatmap-cell[b-2oje81lm0i] {
    flex: 1 1 0;
    aspect-ratio: 1;
    max-width: 18px;
    border-radius: 3px;
}

/* ── Tables ── */
.numeric[b-2oje81lm0i] { font-variant-numeric: tabular-nums; }

/* An invoice id is a real identifier, so it earns the monospace exception. */
.invoice-id[b-2oje81lm0i] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

@media (max-width: 575.98px) {
    .filter-field[b-2oje81lm0i] { min-width: 100%; }
    .range-note[b-2oje81lm0i] { max-width: 100%; }
    .mover[b-2oje81lm0i] { grid-template-columns: 1fr auto; }
    .mover-track[b-2oje81lm0i] { display: none; }
}

/* The parts a forecast was built from, so the number can be checked rather than trusted. */
.forecast-parts[b-2oje81lm0i] {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    line-height: 1.4;
}

/* Explains what a section's numbers cover when that differs from the page total. */
.section-note[b-2oje81lm0i] {
    margin: -0.4rem 0 0.9rem;
    max-width: 88ch;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

/* How far through its term a commitment is. The count beside it carries the same fact in
   words, so the bar is never the only way to read it. */
.commit-progress[b-2oje81lm0i] {
    height: 6px;
    width: 100%;
    max-width: 140px;
    border-radius: 3px;
    background: var(--df-border);
    overflow: hidden;
}

.commit-progress span[b-2oje81lm0i] {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--df-primary);
}

.commit-progress-label[b-2oje81lm0i] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Azure/AzureMonthlyAnalysis.razor.rz.scp.css */
/* Monthly Azure Analysis.

   Everything here builds on the --df-* tokens and the shared card/table/badge styles in app.css.
   No new hues, no hard-coded shadows or radii: the only things defined below are layouts app.css
   has no component for — the findings strip, the recommendation list, the chat panel, and the
   three markup-drawn charts (weekday deviation, coverage split, movers) that are trivial in CSS
   and fiddly to drive through the chart library. */

.page-header[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.page-subtitle[b-v2svtugovr] {
    color: var(--df-text-muted);
    font-size: 0.875rem;
}

.loading-placeholder[b-v2svtugovr] {
    padding: 4rem 0;
    text-align: center;
}

.section-title[b-v2svtugovr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 2rem 0 0.25rem;
    scroll-margin-top: 1rem;
}

.section-note[b-v2svtugovr] {
    color: var(--df-text-muted);
    font-size: 0.82rem;
    max-width: 92ch;
    margin: 0 0 1rem;
}

/* ── Section nav ─────────────────────────────────────────────────────────── */
.section-nav[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.section-nav a[b-v2svtugovr] {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 50rem;
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: var(--df-text-muted);
    text-decoration: none;
    transition: all var(--df-transition);
}

.section-nav a:hover[b-v2svtugovr] {
    border-color: var(--df-primary);
    color: var(--df-primary);
    background: var(--df-primary-light);
}

/* ── Month bar ───────────────────────────────────────────────────────────── */
.month-bar[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1.5rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
}

.month-nav[b-v2svtugovr] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.month-select[b-v2svtugovr] {
    width: auto;
    min-width: 13rem;
}

.month-facts[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.month-facts b[b-v2svtugovr] {
    color: var(--df-text);
    font-variant-numeric: tabular-nums;
}

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chip[b-v2svtugovr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.15rem 0.5rem;
    border-radius: 50rem;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

.chip-primary[b-v2svtugovr] { background: var(--df-primary-light); color: #3730a3; }
.chip-good[b-v2svtugovr]    { background: var(--df-success-light); color: var(--df-success); }
.chip-warn[b-v2svtugovr]    { background: var(--df-warning-light); color: var(--df-warning); }
.chip-bad[b-v2svtugovr]     { background: var(--df-danger-light);  color: var(--df-danger); }
.chip-info[b-v2svtugovr]    { background: var(--df-info-light);    color: #0e7490; }
.chip-mute[b-v2svtugovr]    { background: var(--df-bg); color: var(--df-text-muted); border: 1px solid var(--df-border); }

/* ── Findings strip ──────────────────────────────────────────────────────── */
.findings[b-v2svtugovr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.finding[b-v2svtugovr] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-left: 3px solid var(--df-text-muted);
    border-radius: 0.5rem;
    padding: 0.75rem 0.85rem;
    box-shadow: var(--df-card-shadow);
}

.finding-bad[b-v2svtugovr]  { border-left-color: var(--df-danger); }
.finding-warn[b-v2svtugovr] { border-left-color: var(--df-warning); }
.finding-good[b-v2svtugovr] { border-left-color: var(--df-success); }
.finding-info[b-v2svtugovr] { border-left-color: var(--df-info); }

.finding h5[b-v2svtugovr] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0;
}

.finding-bad h5 i[b-v2svtugovr]  { color: var(--df-danger); }
.finding-warn h5 i[b-v2svtugovr] { color: var(--df-warning); }
.finding-good h5 i[b-v2svtugovr] { color: var(--df-success); }
.finding-info h5 i[b-v2svtugovr] { color: var(--df-info); }

.finding-figure[b-v2svtugovr] {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 0.3rem;
}

.finding-bad .finding-figure[b-v2svtugovr]  { color: var(--df-danger); }
.finding-good .finding-figure[b-v2svtugovr] { color: var(--df-success); }

.finding p[b-v2svtugovr] {
    font-size: 0.76rem;
    color: var(--df-text-muted);
    margin: 0.3rem 0 0;
}

/* ── Explanation block — on every card, by design ────────────────────────── */
.explain[b-v2svtugovr] {
    border-top: 1px solid var(--df-border);
    background: var(--df-bg);
    padding: 0.6rem 0.9rem 0.65rem;
    border-radius: 0 0 var(--df-radius) var(--df-radius);
    font-size: 0.745rem;
    color: var(--df-text-muted);
    line-height: 1.55;
    margin-top: auto;
}

.explain dl[b-v2svtugovr] {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.1rem 0.55rem;
}

.explain dt[b-v2svtugovr] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
    opacity: 0.75;
    padding-top: 0.12rem;
    white-space: nowrap;
}

.explain dd[b-v2svtugovr] { margin: 0; }

.explain code[b-v2svtugovr] {
    font-size: 0.68rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 4px;
    padding: 0 0.25rem;
}

@media (max-width: 640px) {
    .explain dl[b-v2svtugovr] { grid-template-columns: 1fr; }
    .explain dt[b-v2svtugovr] { padding-top: 0.35rem; }
}

/* ── Stat tiles ──────────────────────────────────────────────────────────── */
.stat-row[b-v2svtugovr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.55rem;
}

.stat-row-tight[b-v2svtugovr] { margin-bottom: 1rem; }

.stat-tile[b-v2svtugovr] {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    background: var(--df-bg);
}

.stat-hero[b-v2svtugovr] {
    background: var(--df-primary-light);
    border-color: var(--df-primary-border);
}

.stat-value[b-v2svtugovr] {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.stat-value-sm[b-v2svtugovr] { font-size: 1.02rem; }

.stat-label[b-v2svtugovr] {
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
    margin-top: 0.1rem;
}

.stat-delta[b-v2svtugovr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.28rem;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Rising spend is the bad direction, so these are inverted from the usual up-is-good. */
.stat-delta.up[b-v2svtugovr]   { color: var(--df-danger); }
.stat-delta.down[b-v2svtugovr] { color: var(--df-success); }
.stat-delta.flat[b-v2svtugovr] { color: var(--df-text-muted); }

/* ── AI panel ────────────────────────────────────────────────────────────── */
.ai-panel[b-v2svtugovr] {
    background: var(--df-surface);
    border: 1px solid var(--df-primary-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.ai-head[b-v2svtugovr] {
    background: var(--df-primary-light);
    border-bottom: 1px solid var(--df-primary-border);
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
}

.ai-head h5[b-v2svtugovr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.ai-meta[b-v2svtugovr] {
    font-size: 0.72rem;
    color: var(--df-text-muted);
}

.ai-summary[b-v2svtugovr] {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--df-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.55rem;
}

.ai-headline[b-v2svtugovr] {
    padding: 0.75rem 0.9rem 0;
    font-size: 0.86rem;
    font-weight: 500;
    margin: 0;
}

.rec-list[b-v2svtugovr] {
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rec[b-v2svtugovr] {
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    overflow: hidden;
}

.rec-rank[b-v2svtugovr] {
    background: var(--df-bg);
    border-right: 1px solid var(--df-border);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
}

.rec-main[b-v2svtugovr] {
    padding: 0.65rem 0.8rem 0.7rem;
    min-width: 0;
}

.rec-top[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.rec-top h6[b-v2svtugovr] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.rec-save[b-v2svtugovr] {
    margin-left: auto;
    text-align: right;
    font-weight: 700;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--df-success);
}

.rec-save .per[b-v2svtugovr] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--df-text-muted);
}

.rec-chips[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.rec-evidence[b-v2svtugovr] {
    margin-top: 0.55rem;
    padding: 0.5rem 0.65rem;
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 0.4rem;
    font-size: 0.755rem;
    color: var(--df-text-muted);
}

.rec-evidence ul[b-v2svtugovr] {
    margin: 0.25rem 0 0;
    padding-left: 1.05rem;
}

.rec-evidence li[b-v2svtugovr] { margin-top: 0.12rem; }

.rec-lines[b-v2svtugovr] {
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.12rem 0.5rem;
    font-size: 0.765rem;
}

.rec-lines dt[b-v2svtugovr] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
    opacity: 0.75;
    padding-top: 0.1rem;
    white-space: nowrap;
}

.rec-lines dd[b-v2svtugovr] {
    margin: 0;
    color: var(--df-text-muted);
}

@media (max-width: 640px) {
    .rec-lines[b-v2svtugovr] { grid-template-columns: 1fr; }
    .rec[b-v2svtugovr] { grid-template-columns: 1fr; }
    .rec-rank[b-v2svtugovr] { display: none; }
}

/* ── Chat ────────────────────────────────────────────────────────────────── */
.chat-body[b-v2svtugovr] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.chat-log[b-v2svtugovr] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 16rem;
    max-height: 30rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.chat-msg[b-v2svtugovr] {
    display: flex;
    gap: 0.55rem;
    max-width: 100%;
}

.chat-msg-me[b-v2svtugovr] { flex-direction: row-reverse; }

.chat-avatar[b-v2svtugovr] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.chat-msg-me .chat-avatar[b-v2svtugovr] {
    background: var(--df-bg);
    color: var(--df-text-muted);
    border: 1px solid var(--df-border);
}

.chat-bubble[b-v2svtugovr] {
    padding: 0.55rem 0.7rem;
    border-radius: 0.55rem;
    font-size: 0.8rem;
    min-width: 0;
    border: 1px solid var(--df-border);
    background: var(--df-surface);
}

.chat-msg-me .chat-bubble[b-v2svtugovr] {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: #fff;
}

.chat-bubble[b-v2svtugovr]  p:last-child { margin-bottom: 0; }
.chat-bubble[b-v2svtugovr]  table {
    width: 100%;
    font-size: 0.75rem;
    margin: 0.5rem 0 0.25rem;
    border-collapse: collapse;
}
.chat-bubble[b-v2svtugovr]  th,
.chat-bubble[b-v2svtugovr]  td {
    padding: 0.2rem 0.45rem 0.2rem 0;
    border-bottom: 1px solid var(--df-border);
    text-align: left;
}
.chat-bubble[b-v2svtugovr]  th {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
}
.chat-bubble[b-v2svtugovr]  ul,
.chat-bubble[b-v2svtugovr]  ol {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}
.chat-bubble[b-v2svtugovr]  code {
    font-size: 0.72rem;
    background: var(--df-bg);
    border-radius: 3px;
    padding: 0 0.2rem;
}

.chat-typing[b-v2svtugovr] {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    height: 1.2em;
}

.chat-typing i[b-v2svtugovr] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--df-text-muted);
    animation: chat-bounce-b-v2svtugovr 1.1s infinite;
}

.chat-typing i:nth-child(2)[b-v2svtugovr] { animation-delay: 0.16s; }
.chat-typing i:nth-child(3)[b-v2svtugovr] { animation-delay: 0.32s; }

@keyframes chat-bounce-b-v2svtugovr {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.chat-suggestions[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.chat-suggestion[b-v2svtugovr] {
    font-size: 0.72rem;
    text-align: left;
    padding: 0.22rem 0.55rem;
    border-radius: 50rem;
    border: 1px solid var(--df-primary-border);
    background: var(--df-primary-light);
    color: #3730a3;
    transition: background var(--df-transition);
}

.chat-suggestion:hover:not(:disabled)[b-v2svtugovr] { background: #e0e7ff; }
.chat-suggestion:disabled[b-v2svtugovr] { opacity: 0.55; }

.chat-input[b-v2svtugovr] {
    display: flex;
    gap: 0.4rem;
}

.chat-input .form-control[b-v2svtugovr] { flex: 1 1 auto; min-width: 0; }

.capability-list[b-v2svtugovr] {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
}

.capability-list li[b-v2svtugovr] {
    display: flex;
    gap: 0.45rem;
    padding: 0.32rem 0;
    border-bottom: 1px solid var(--df-border);
}

.capability-list li:last-child[b-v2svtugovr] { border-bottom: none; }
.capability-list i[b-v2svtugovr] { margin-top: 0.15rem; flex: none; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.analysis-table[b-v2svtugovr] {
    font-size: 0.78rem;
}

.analysis-table th[b-v2svtugovr] {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
    white-space: nowrap;
}

.analysis-table td[b-v2svtugovr] { vertical-align: top; }

.analysis-table .num[b-v2svtugovr] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.analysis-table .row-current[b-v2svtugovr] { background: var(--df-primary-light); }
.analysis-table .row-current td[b-v2svtugovr] { font-weight: 600; }
.analysis-table .row-tail td[b-v2svtugovr] { color: var(--df-text-muted); }
.analysis-table .row-total td[b-v2svtugovr] {
    border-top: 2px solid var(--df-border);
    font-weight: 600;
}

.cell-strong[b-v2svtugovr] { font-weight: 600; }

.cell-mono[b-v2svtugovr] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    word-break: break-word;
}

.cell-sub[b-v2svtugovr] {
    font-size: 0.7rem;
    color: var(--df-text-muted);
    margin-top: 0.1rem;
}

.card-question[b-v2svtugovr] {
    font-size: 0.8rem;
    color: var(--df-text-muted);
    margin-bottom: 0.65rem;
}

.card-window[b-v2svtugovr] { font-size: 0.74rem; }

.card-note[b-v2svtugovr] {
    margin-top: 0.5rem;
    font-size: 0.74rem;
    color: var(--df-text-muted);
}

/* ── Weekday deviation ───────────────────────────────────────────────────── */
/* Deviation from the mean rather than zero-based bars: on values within a few percent of one
   another, zero-based bars all render full-length and read as a rendering fault — and the whole
   point of this card is usually that the series is flat. */
.deviation[b-v2svtugovr] { display: flex; flex-direction: column; gap: 0.25rem; }

.deviation-row[b-v2svtugovr] {
    display: grid;
    grid-template-columns: 2.2rem 1fr 4.5rem;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
}

.deviation-label[b-v2svtugovr] { color: var(--df-text-muted); }

.deviation-track[b-v2svtugovr] {
    position: relative;
    height: 14px;
    background: var(--df-bg);
    border-radius: 3px;
}

.deviation-axis[b-v2svtugovr] {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #cbd5e1;
}

.deviation-bar[b-v2svtugovr] {
    position: absolute;
    top: 1px;
    bottom: 1px;
    border-radius: 3px;
    min-width: 2px;
}

.deviation-bar.pos[b-v2svtugovr] { background: var(--df-warning); }
.deviation-bar.neg[b-v2svtugovr] { background: var(--df-info); }

.deviation-value[b-v2svtugovr] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--df-text-muted);
}

/* ── Coverage split ──────────────────────────────────────────────────────── */
.coverage[b-v2svtugovr] { display: flex; flex-direction: column; gap: 0.85rem; }

.coverage-head[b-v2svtugovr] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.76rem;
    margin-bottom: 0.25rem;
}

.coverage-bar[b-v2svtugovr] {
    display: flex;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    gap: 2px;
}

.coverage-covered[b-v2svtugovr],
.coverage-ondemand[b-v2svtugovr] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    min-width: 2px;
}

.coverage-covered[b-v2svtugovr]  { background: var(--df-success); }
.coverage-ondemand[b-v2svtugovr] { background: var(--df-danger); }

.coverage-foot[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--df-text-muted);
}

.covered-dot[b-v2svtugovr]  { color: var(--df-success); font-size: 0.6rem; }
.ondemand-dot[b-v2svtugovr] { color: var(--df-danger); font-size: 0.6rem; }

/* ── Plain-English primer ────────────────────────────────────────────────────
   Prose, not data. Wider line-height and a real measure, because this is the one
   block on the page meant to be read start to finish rather than scanned. */
.primer[b-v2svtugovr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.25rem;
}

.primer-item h5[b-v2svtugovr] {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.primer-item h5 i[b-v2svtugovr] { color: var(--df-primary); }

.primer-item p[b-v2svtugovr],
.primer-item li[b-v2svtugovr] {
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--df-text-muted);
}

.primer-item p[b-v2svtugovr] { margin-bottom: 0.6rem; }

.primer-item ul[b-v2svtugovr] {
    margin: 0 0 0.6rem;
    padding-left: 1.1rem;
}

.primer-item li[b-v2svtugovr] { margin-bottom: 0.35rem; }

.primer-item b[b-v2svtugovr] { color: var(--df-text); font-weight: 600; }

/* The takeaway. Every primer item ends with one, so the reader never has to infer it. */
.primer-so[b-v2svtugovr] {
    border-left: 3px solid var(--df-primary);
    padding: 0.45rem 0 0.45rem 0.7rem;
    background: var(--df-bg);
    border-radius: 0 3px 3px 0;
    margin-bottom: 0 !important;
}

/* ── Invoice split ───────────────────────────────────────────────────────────
   Prepaid against metered, as one bar. Deliberately not success/danger: neither
   half is the good one, they are two kinds of charge, so the palette stays
   categorical and the labels carry the meaning. */
.split-bar[b-v2svtugovr] {
    display: flex;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    gap: 2px;
    margin-top: 1rem;
}

.split-prepaid[b-v2svtugovr],
.split-usage[b-v2svtugovr] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    min-width: 2px;
    overflow: hidden;
}

.split-prepaid span[b-v2svtugovr],
.split-usage span[b-v2svtugovr] {
    padding: 0 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.split-prepaid[b-v2svtugovr] { background: var(--df-primary); }
.split-usage[b-v2svtugovr]   { background: var(--df-info); }

.split-foot[b-v2svtugovr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--df-text-muted);
}

.prepaid-dot[b-v2svtugovr] { color: var(--df-primary); font-size: 0.6rem; }
.usage-dot[b-v2svtugovr]   { color: var(--df-info); font-size: 0.6rem; }

/* ── Movers ──────────────────────────────────────────────────────────────── */
.movers[b-v2svtugovr] { display: flex; flex-direction: column; gap: 0.25rem; }

.mover-row[b-v2svtugovr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem 5rem;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
}

.mover-label[b-v2svtugovr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mover-track[b-v2svtugovr] {
    position: relative;
    height: 14px;
    background: var(--df-bg);
    border-radius: 3px;
}

.mover-axis[b-v2svtugovr] {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #cbd5e1;
}

.mover-bar[b-v2svtugovr] {
    position: absolute;
    top: 1px;
    bottom: 1px;
    border-radius: 3px;
    min-width: 2px;
}

/* Rising spend is the bad direction. The signed value beside the bar carries it too, so colour
   is never the only signal. */
.mover-bar.up[b-v2svtugovr]   { background: var(--df-danger); }
.mover-bar.down[b-v2svtugovr] { background: var(--df-success); }

.mover-value[b-v2svtugovr] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

@media (max-width: 720px) {
    .mover-row[b-v2svtugovr] { grid-template-columns: minmax(0, 1fr) 4.5rem; }
    .mover-track[b-v2svtugovr] { display: none; }
}

/* ── Empty states & provenance ───────────────────────────────────────────── */
.empty-state[b-v2svtugovr] {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--df-text-muted);
}

.empty-state-icon[b-v2svtugovr] {
    font-size: 2rem;
    color: var(--df-border);
    margin-bottom: 0.5rem;
}

.provenance[b-v2svtugovr] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--df-border);
    font-size: 0.76rem;
    color: var(--df-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    *[b-v2svtugovr] { transition: none !important; animation: none !important; }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .chat-suggestion:hover:not(:disabled)[b-v2svtugovr] {
    background: var(--df-primary-light);
}
html.nav-theme-dark .deviation-axis[b-v2svtugovr] {
    background: var(--df-border);
}
html.nav-theme-dark .mover-axis[b-v2svtugovr] {
    background: var(--df-border);
}
/* /Components/Pages/Branches/BranchManagement.razor.rz.scp.css */
/* Stat strip */
.v9-stat-strip[b-m8fl8eipst] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.v9-stat[b-m8fl8eipst] {
    background: var(--df-surface);
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow .12s, transform .12s;
    position: relative;
}

    .v9-stat:hover[b-m8fl8eipst] {
        box-shadow: 0 4px 14px rgba(0,0,0,.06);
        transform: translateY(-1px);
    }

    .v9-stat.active[b-m8fl8eipst] {
        box-shadow: 0 0 0 2px #0d6efd33, 0 4px 14px rgba(13,110,253,.12);
    }

    .v9-stat.active[b-m8fl8eipst]::after {
        content: "filtering";
        position: absolute;
        top: 8px;
        right: 10px;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #0d6efd;
        font-weight: 600;
    }

    .v9-stat .lbl[b-m8fl8eipst] {
        font-size: 0.72rem;
        color: var(--df-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .v9-stat .val[b-m8fl8eipst] {
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1;
        margin-top: 6px;
    }

    .v9-stat .trend[b-m8fl8eipst] {
        font-size: 0.72rem;
        color: var(--df-text-muted);
        margin-top: 4px;
    }

    .v9-stat.danger[b-m8fl8eipst] {
        border-left: 3px solid var(--df-danger);
    }

    .v9-stat.warn[b-m8fl8eipst] {
        border-left: 3px solid #fd7e14;
    }

    .v9-stat.good[b-m8fl8eipst] {
        border-left: 3px solid #198754;
    }

    .v9-stat.info[b-m8fl8eipst] {
        border-left: 3px solid #0d6efd;
    }

/* Panel + pill tabs */
.v9-panel[b-m8fl8eipst] {
    background: var(--df-surface);
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 16px;
}

/* Split layout */
.v9-split[b-m8fl8eipst] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    align-items: start;
}

.v9-folder-pane[b-m8fl8eipst] {
    background: var(--df-surface);
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 16px;
}

.v9-folder-pane-head[b-m8fl8eipst] {
    padding: 10px 14px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--df-text-muted);
    font-weight: 600;
}

.v9-folder-list[b-m8fl8eipst] {
    padding: 6px 0;
    max-height: 70vh;
    overflow-y: auto;
}

.v9-folder-item[b-m8fl8eipst] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.875rem;
    color: #495057;
    cursor: pointer;
    border-left: 3px solid transparent;
}

    .v9-folder-item:hover[b-m8fl8eipst] {
        background: var(--df-bg);
    }

    .v9-folder-item.active[b-m8fl8eipst] {
        background: #e7f1ff;
        border-left-color: #0d6efd;
        color: #0a4595;
        font-weight: 500;
    }

    .v9-folder-item .v9-folder-item-name[b-m8fl8eipst] {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .v9-folder-item .count[b-m8fl8eipst] {
        background: rgba(0,0,0,0.06);
        color: var(--df-text-muted);
        padding: 0 7px;
        border-radius: 10px;
        font-size: 0.72rem;
        min-width: 22px;
        text-align: center;
    }

    .v9-folder-item.active .count[b-m8fl8eipst] {
        background: rgba(13,110,253,0.15);
        color: #0a4595;
    }

    .v9-folder-item .dot[b-m8fl8eipst] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--df-danger);
    }

        .v9-folder-item .dot.warn[b-m8fl8eipst] {
            background: #fd7e14;
        }

.v9-folder-divider[b-m8fl8eipst] {
    height: 1px;
    background: #f1f3f5;
    margin: 6px 14px;
}

/* Avatar */
.av-circle[b-m8fl8eipst] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.65rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Table */
.v9-table[b-m8fl8eipst] {
    width: 100%;
}

    .v9-table thead th[b-m8fl8eipst] {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--df-text-muted);
        border-bottom: 2px solid #e9ecef;
        background: var(--df-surface);
    }

    .v9-table td[b-m8fl8eipst], .v9-table th[b-m8fl8eipst] {
        vertical-align: middle;
        padding: 8px 12px;
    }

/* Right pane title strip */
.v9-pane-title[b-m8fl8eipst] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.v9-pane-title-text[b-m8fl8eipst] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #495057;
}

    .v9-pane-title-text .pane-icon[b-m8fl8eipst] {
        font-size: 1.1rem;
    }

    .v9-pane-title-text .pane-name[b-m8fl8eipst] {
        font-size: 1.05rem;
    }

    .v9-pane-title-text .pane-count[b-m8fl8eipst] {
        background: #e9ecef;
        color: #495057;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 0.78rem;
        font-weight: 500;
    }

.v9-pane-stats[b-m8fl8eipst] {
    display: inline-flex;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--df-text-muted);
    align-items: center;
    flex-wrap: wrap;
}

    .v9-pane-stats .stat-pill[b-m8fl8eipst] {
        background: var(--df-surface);
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 2px 10px;
    }

        .v9-pane-stats .stat-pill.behind[b-m8fl8eipst] {
            color: var(--df-danger);
            border-color: #fadbdb;
            background: #fff5f5;
        }

        .v9-pane-stats .stat-pill.stale[b-m8fl8eipst] {
            color: #fd7e14;
            border-color: #fbe3cb;
            background: #fff8f0;
        }

        .v9-pane-stats .stat-pill.policies[b-m8fl8eipst] {
            color: #0a4595;
            border-color: #cfe2ff;
            background: #f0f8ff;
        }

.v9-pane-search[b-m8fl8eipst] {
    width: 320px;
    max-width: 100%;
}

/* Branch rows */
.v9-branch-row.default-branch[b-m8fl8eipst] {
    background: #fffdf5;
}

.v9-branch-name[b-m8fl8eipst] {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Ahead/behind chips */
.ab-chips[b-m8fl8eipst] {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
}

.ab-chip[b-m8fl8eipst] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    justify-content: center;
}

    .ab-chip i[b-m8fl8eipst] {
        font-size: 0.72rem;
        line-height: 1;
    }

    .ab-chip.behind[b-m8fl8eipst] {
        background: #fde8ea;
        color: #b02a37;
        border-color: #f5c2c7;
    }

        .ab-chip.behind.warn[b-m8fl8eipst] {
            background: #fff3cd;
            color: #7c4a03;
            border-color: #ffe69c;
        }

        .ab-chip.behind.danger[b-m8fl8eipst] {
            background: var(--df-danger);
            color: #fff;
            border-color: #b02a37;
        }

    .ab-chip.ahead[b-m8fl8eipst] {
        background: #d1e7dd;
        color: #0a3622;
        border-color: #a3cfbb;
    }

    .ab-chip.zero[b-m8fl8eipst] {
        background: #f1f3f5;
        color: #868e96;
        border-color: #e9ecef;
    }

/* Soft badges */
.badge-soft-blue[b-m8fl8eipst] {
    background: #d6e4ff;
    color: #0a4595;
}

.badge-soft-amber[b-m8fl8eipst] {
    background: #fff3cd;
    color: #7c5500;
}

/* Compact creator cell */
.creator-cell[b-m8fl8eipst] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.1;
}

    .creator-cell .creator-name[b-m8fl8eipst] {
        font-size: 0.875rem;
        font-weight: 500;
    }

    .creator-cell .creator-email[b-m8fl8eipst] {
        font-size: 0.72rem;
        color: var(--df-text-muted);
    }

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .v9-stat[b-m8fl8eipst] {
    border: 1px solid var(--df-border);
}
html.nav-theme-dark .v9-panel[b-m8fl8eipst] {
    border: 1px solid var(--df-border);
}
html.nav-theme-dark .v9-folder-pane[b-m8fl8eipst] {
    border: 1px solid var(--df-border);
}
html.nav-theme-dark .v9-folder-pane-head[b-m8fl8eipst] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .v9-folder-item[b-m8fl8eipst] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .v9-folder-divider[b-m8fl8eipst] {
    background: var(--df-bg);
}
html.nav-theme-dark .v9-table thead th[b-m8fl8eipst] {
    border-bottom: 2px solid var(--df-border);
}
html.nav-theme-dark .v9-pane-title-text[b-m8fl8eipst] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .v9-pane-title-text .pane-count[b-m8fl8eipst] {
    background: var(--df-border);
    color: var(--df-text-muted);
}
html.nav-theme-dark .v9-pane-stats .stat-pill[b-m8fl8eipst] {
    border: 1px solid var(--df-border);
}
html.nav-theme-dark .v9-pane-stats .stat-pill.behind[b-m8fl8eipst] {
    background: var(--df-danger-light);
}
html.nav-theme-dark .v9-pane-stats .stat-pill.stale[b-m8fl8eipst] {
    background: var(--df-warning-light);
}
html.nav-theme-dark .v9-pane-stats .stat-pill.policies[b-m8fl8eipst] {
    border-color: var(--df-primary-light);
    background: var(--df-primary-light);
}
html.nav-theme-dark .v9-branch-row.default-branch[b-m8fl8eipst] {
    background: var(--df-warning-light);
}
html.nav-theme-dark .ab-chip.behind[b-m8fl8eipst] {
    background: var(--df-danger-light);
}
html.nav-theme-dark .ab-chip.behind.warn[b-m8fl8eipst] {
    background: var(--df-warning-light);
}
html.nav-theme-dark .ab-chip.ahead[b-m8fl8eipst] {
    background: var(--df-success-light);
}
html.nav-theme-dark .ab-chip.zero[b-m8fl8eipst] {
    background: var(--df-bg);
    border-color: var(--df-border);
}
html.nav-theme-dark .badge-soft-blue[b-m8fl8eipst] {
    background: var(--df-primary-light);
}
html.nav-theme-dark .badge-soft-amber[b-m8fl8eipst] {
    background: var(--df-warning-light);
}
/* /Components/Pages/ClientPortal.razor.rz.scp.css */
[b-nayw2oz85g] .client-ticket-link {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

[b-nayw2oz85g] .client-ticket-link:hover {
    color: inherit;
    text-decoration: none;
}

[b-nayw2oz85g] tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* The upcoming delivery. A left rail rather than a filled alert: it is standing
   context on every visit, not something that just happened. */
.next-delivery[b-nayw2oz85g] {
    border-left: 3px solid var(--df-warning);
}

/* Date over a quiet label. The label carries the meaning, so the pair never
   depends on colour to be read. */
.delivery-date[b-nayw2oz85g] {
    display: block;
    font-weight: 600;
    white-space: nowrap;
}

.delivery-note[b-nayw2oz85g] {
    display: block;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}
/* /Components/Pages/Deployments/DeploymentDetail.razor.rz.scp.css */
[b-kzalb7bpng] .script-list {
    display: flex;
    flex-direction: column;
}

[b-kzalb7bpng] .script-card {
    border: 1px solid var(--df-border);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

[b-kzalb7bpng] .script-card:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[b-kzalb7bpng] .script-card-header {
    cursor: pointer;
    user-select: none;
}

[b-kzalb7bpng] .script-card-header:hover {
    background-color: var(--df-bg);
}

[b-kzalb7bpng] .script-chevron {
    color: var(--df-text-muted);
    font-size: 0.78rem;
    width: 12px;
    display: inline-block;
    text-align: center;
    user-select: none;
}

[b-kzalb7bpng] .script-drag-handle {
    cursor: grab;
    color: #adb5bd;
    font-size: 1.4rem;
    line-height: 1;
    padding: 2px 8px;
    user-select: none;
    border-radius: 4px;
    touch-action: none;
}

[b-kzalb7bpng] .script-drag-handle:hover {
    color: #0d6efd;
    background-color: #e7f1ff;
}

[b-kzalb7bpng] .script-drag-handle:active {
    cursor: grabbing;
    background-color: #cfe2ff;
}

[b-kzalb7bpng] .min-width-0 {
    min-width: 0;
}

/* SortableJS visual states */
[b-kzalb7bpng] .sortable-ghost {
    opacity: 0.4;
    background-color: #e7f1ff !important;
    border: 2px dashed #0d6efd !important;
}

[b-kzalb7bpng] .sortable-ghost > * {
    visibility: hidden;
}

[b-kzalb7bpng] .sortable-chosen {
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

[b-kzalb7bpng] .sortable-drag {
    opacity: 0.95;
    cursor: grabbing;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

[b-kzalb7bpng] .pending-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f1f5f9;
}

[b-kzalb7bpng] .pending-file-item:last-child {
    border-bottom: none;
}

/* ── Deployment Email Modal ── */

[b-kzalb7bpng] .deploy-email-shell {
    background: var(--df-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
[b-kzalb7bpng] .deploy-email-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 16px;
    background: var(--df-surface);
    border-bottom: 1px solid #e4e4e7;
    flex-shrink: 0;
}

[b-kzalb7bpng] .deploy-email-header-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-kzalb7bpng] .deploy-email-header-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

[b-kzalb7bpng] .deploy-email-header-icon {
    font-size: 1.15rem;
    line-height: 1;
}

[b-kzalb7bpng] .deploy-email-header-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #18181b;
    margin: 0;
    letter-spacing: -0.005em;
}

[b-kzalb7bpng] .deploy-email-header-subtitle {
    font-size: 0.78rem;
    color: #71717a;
    line-height: 1.4;
}

[b-kzalb7bpng] .deploy-email-version {
    font-size: 0.72rem;
    font-weight: 600;
    color: #3f3f46;
    background: #f4f4f5;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

[b-kzalb7bpng] .deploy-email-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: #a1a1aa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

[b-kzalb7bpng] .deploy-email-close-btn:hover {
    background: #f4f4f5;
    color: #52525b;
}

/* Body */
[b-kzalb7bpng] .deploy-email-body {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    min-height: 0;
}

/* Compose panel */
[b-kzalb7bpng] .deploy-email-compose {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    min-width: 0;
    background: var(--df-surface);
    border-right: 1px solid #e4e4e7;
}

[b-kzalb7bpng] .deploy-email-compose-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

[b-kzalb7bpng] .deploy-email-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 24px 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
}

[b-kzalb7bpng] .deploy-email-banner-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

[b-kzalb7bpng] .deploy-email-banner-success {
    background: var(--df-success-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

[b-kzalb7bpng] .deploy-email-banner-error {
    background: var(--df-danger-light);
    color: #991b1b;
    border: 1px solid var(--df-danger-border);
}

[b-kzalb7bpng] .deploy-email-field {
    display: flex;
    flex-direction: column;
    padding: 18px 24px;
    border-bottom: 1px solid #f4f4f5;
}

[b-kzalb7bpng] .deploy-email-field:last-child {
    border-bottom: none;
}

[b-kzalb7bpng] .deploy-email-field-grow {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

[b-kzalb7bpng] .deploy-email-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}

[b-kzalb7bpng] .deploy-email-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #52525b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

[b-kzalb7bpng] .deploy-email-field-count {
    font-size: 0.72rem;
    font-weight: 500;
    color: #a1a1aa;
}

[b-kzalb7bpng] .deploy-email-field-action {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}

[b-kzalb7bpng] .deploy-email-field-action:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

[b-kzalb7bpng] .deploy-email-field-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

[b-kzalb7bpng] .deploy-email-field-error {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #b91c1c;
    font-weight: 500;
}

[b-kzalb7bpng] .deploy-email-recipients-box {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
    min-height: 32px;
    margin-bottom: 10px;
}

[b-kzalb7bpng] .deploy-email-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    padding: 3px 4px 3px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background 0.15s ease;
}

[b-kzalb7bpng] .deploy-email-pill:hover {
    background: #dbeafe;
}

[b-kzalb7bpng] .deploy-email-pill-text {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-kzalb7bpng] .deploy-email-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    color: #1e40af;
    cursor: pointer;
    border-radius: 999px;
    opacity: 0.55;
    transition: all 0.15s;
}

[b-kzalb7bpng] .deploy-email-pill-remove:hover {
    background: rgba(30, 64, 175, 0.15);
    opacity: 1;
}

[b-kzalb7bpng] .deploy-email-placeholder {
    color: #a1a1aa;
    font-size: 0.78rem;
    padding: 6px 2px;
}

[b-kzalb7bpng] .deploy-email-hint {
    font-size: 0.78rem;
    color: #a1a1aa;
    line-height: 1.4;
}

[b-kzalb7bpng] .deploy-email-add-row {
    display: flex;
    gap: 8px;
}

[b-kzalb7bpng] .deploy-email-add-input {
    flex-grow: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: #18181b;
    background: var(--df-surface);
    border: 1.5px solid #e4e4e7;
    border-radius: 8px;
    outline: none;
    transition: all 0.15s ease;
}

[b-kzalb7bpng] .deploy-email-add-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[b-kzalb7bpng] .deploy-email-add-input::placeholder {
    color: #a1a1aa;
}

[b-kzalb7bpng] .deploy-email-add-btn {
    background: #f4f4f5;
    color: #18181b;
    border: 1.5px solid #e4e4e7;
    border-radius: 8px;
    padding: 0 16px;
    height: 36px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-kzalb7bpng] .deploy-email-add-btn:hover:not(:disabled) {
    background: #e4e4e7;
}

[b-kzalb7bpng] .deploy-email-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-kzalb7bpng] .deploy-email-input-boxed {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: #18181b;
    background: var(--df-surface);
    border: 1.5px solid #e4e4e7;
    border-radius: 8px;
    outline: none;
    transition: all 0.15s ease;
}

[b-kzalb7bpng] .deploy-email-input-boxed:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[b-kzalb7bpng] .deploy-email-richtext {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 240px;
    margin-bottom: 8px;
    position: relative;
}

[b-kzalb7bpng] .deploy-email-richtext > .rich-text-editor {
    flex-grow: 1;
    min-height: 0;
}

[b-kzalb7bpng] .deploy-email-richtext-loading > .rich-text-editor {
    opacity: 0.4;
    pointer-events: none;
}

html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-richtext-overlay {
    background: rgba(15, 23, 42, 0.6);
}

[b-kzalb7bpng] .deploy-email-richtext-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.6);
    color: #52525b;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

/* Preview pane */
[b-kzalb7bpng] .deploy-email-preview-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    min-width: 0;
    overflow: hidden;
    background: #fafafa;
}

[b-kzalb7bpng] .deploy-email-preview-head {
    padding: 18px 32px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-kzalb7bpng] .deploy-email-preview-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #52525b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-kzalb7bpng] .deploy-email-preview-hint {
    font-size: 0.78rem;
    color: #a1a1aa;
}

[b-kzalb7bpng] .deploy-email-preview-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px 32px 32px;
}

[b-kzalb7bpng] .deploy-email-preview-card {
    background: var(--df-surface);
    border-radius: 12px;
    border: 1px solid #e4e4e7;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[b-kzalb7bpng] .deploy-email-preview-header {
    padding: 22px 28px 18px;
    border-bottom: 1px solid #f4f4f5;
}

[b-kzalb7bpng] .deploy-email-preview-subject {
    font-size: 1.05rem;
    font-weight: 700;
    color: #18181b;
    margin-bottom: 4px;
    line-height: 1.4;
}

[b-kzalb7bpng] .deploy-email-preview-meta {
    font-size: 0.78rem;
    color: #a1a1aa;
}

[b-kzalb7bpng] .deploy-email-preview-body {
    padding: 24px 28px 32px;
}

/* Footer */
[b-kzalb7bpng] .deploy-email-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: var(--df-surface);
    border-top: 1px solid #e4e4e7;
    flex-shrink: 0;
}

[b-kzalb7bpng] .deploy-email-footer-left {
    font-size: 0.78rem;
    color: #71717a;
}

[b-kzalb7bpng] .deploy-email-footer-warning {
    color: #b45309;
    font-weight: 500;
}

[b-kzalb7bpng] .deploy-email-footer-ready {
    color: #52525b;
}

[b-kzalb7bpng] .deploy-email-footer-actions {
    display: flex;
    gap: 10px;
}

[b-kzalb7bpng] .deploy-email-cancel-btn {
    background: var(--df-surface);
    color: #52525b;
    border: 1.5px solid #e4e4e7;
    border-radius: 10px;
    padding: 0 20px;
    height: 38px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-kzalb7bpng] .deploy-email-cancel-btn:hover:not(:disabled) {
    background: #f4f4f5;
    color: #18181b;
}

[b-kzalb7bpng] .deploy-email-cancel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-kzalb7bpng] .deploy-email-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #18181b;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 22px;
    height: 38px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

[b-kzalb7bpng] .deploy-email-send-btn:hover:not(:disabled) {
    background: #27272a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

[b-kzalb7bpng] .deploy-email-send-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

[b-kzalb7bpng] .deploy-email-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ---- Unaccounted merged PRs ----
   Every colour here resolves through a --df-* token, so light and dark flip
   together and no html.nav-theme-dark twin is required (see CssThemeCoverage). */
[b-kzalb7bpng] .unaccounted-block {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--df-border);
    background-color: var(--df-warning-light);
}

[b-kzalb7bpng] .unaccounted-block.is-clean {
    background-color: var(--df-success-light);
}

[b-kzalb7bpng] .unaccounted-block.is-error {
    background-color: var(--df-danger-light);
}

[b-kzalb7bpng] .unaccounted-block.is-quiet {
    background-color: var(--df-bg);
}

/* Lets a flex child shrink below its content width so a long PR title wraps
   instead of pushing the row actions off the edge. `.min-width-0` is used
   elsewhere in this page but is not defined globally. */
[b-kzalb7bpng] .unaccounted-block .min-width-0 {
    min-width: 0;
}

[b-kzalb7bpng] .unaccounted-list {
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    overflow: hidden;
    background-color: var(--df-bg);
}

[b-kzalb7bpng] .unaccounted-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--df-border);
}

[b-kzalb7bpng] .unaccounted-row:last-child {
    border-bottom: 0;
}

[b-kzalb7bpng] .unaccounted-row.is-acknowledged {
    opacity: 0.75;
}

[b-kzalb7bpng] .unaccounted-pr-id {
    flex-shrink: 0;
    width: 56px;
    padding-top: 2px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--df-primary);
}

[b-kzalb7bpng] .unaccounted-pr-title {
    font-weight: 500;
    margin-bottom: 0.15rem;
    overflow-wrap: anywhere;
}

[b-kzalb7bpng] .unaccounted-pr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.55rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

[b-kzalb7bpng] .unaccounted-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

[b-kzalb7bpng] .acknowledge-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--df-success);
    border-radius: 0.45rem;
    background-color: var(--df-success-light);
}

/* Was inline-flex when the panel had a single toggle. The coverage panel has two —
   one per direction — and inline-flex ran them together on one line. */
[b-kzalb7bpng] .acknowledged-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.82rem;
    color: var(--df-text-muted);
    cursor: pointer;
    user-select: none;
}

[b-kzalb7bpng] .acknowledged-toggle:hover {
    color: var(--df-text);
}

[b-kzalb7bpng] .badge-reason-warn {
    background-color: var(--df-warning-light);
    color: var(--df-warning);
    border: 1px solid var(--df-warning);
}

[b-kzalb7bpng] .badge-reason-danger {
    background-color: var(--df-danger-light);
    color: var(--df-danger);
    border: 1px solid var(--df-danger);
}

[b-kzalb7bpng] .badge-reason-muted {
    background-color: var(--df-bg);
    color: var(--df-text-muted);
    border: 1px solid var(--df-border);
}

[b-kzalb7bpng] .badge-reason-good {
    background-color: var(--df-success-light);
    color: var(--df-success);
    border: 1px solid var(--df-success);
}

/* ---- Branch coverage panel ----
   Holds both drift directions: linked tickets the branch doesn't have, and merged
   PRs the deployment doesn't claim. Neutral background rather than a tint, because
   the two sections carry their own severity and a tinted wrapper around both would
   colour the calm half with the alarming half's meaning. */
[b-kzalb7bpng] .coverage-panel {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--df-border);
    background-color: var(--df-bg);
}

[b-kzalb7bpng] .coverage-panel.is-clean {
    background-color: var(--df-success-light);
}

[b-kzalb7bpng] .coverage-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

[b-kzalb7bpng] .coverage-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
}

[b-kzalb7bpng] .coverage-seg {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-kzalb7bpng] .coverage-seg.is-danger {
    background-color: var(--df-danger-light);
    color: var(--df-danger);
    border: 1px solid var(--df-danger);
}

[b-kzalb7bpng] .coverage-seg.is-warn {
    background-color: var(--df-warning-light);
    color: var(--df-warning);
    border: 1px solid var(--df-warning);
}

[b-kzalb7bpng] .coverage-seg.is-good {
    background-color: var(--df-success-light);
    color: var(--df-success);
    border: 1px solid var(--df-success);
}

/* A segment that carries a fact rather than a verdict — no semantic colour to spend. */
[b-kzalb7bpng] .coverage-seg.is-quiet {
    background-color: var(--df-surface);
    color: var(--df-text-muted);
    border: 1px solid var(--df-border);
}

/* A one-line panel has nothing under the head to separate it from. */
[b-kzalb7bpng] .coverage-head.no-body {
    margin-bottom: 0;
}

[b-kzalb7bpng] .coverage-section {
    margin-bottom: 0.85rem;
}

[b-kzalb7bpng] .coverage-section:last-child {
    margin-bottom: 0;
}

[b-kzalb7bpng] .coverage-section-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
}

/* The direction hint reads as prose, not as another label. */
[b-kzalb7bpng] .coverage-section-label .coverage-section-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

[b-kzalb7bpng] .coverage-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

[b-kzalb7bpng] .coverage-dot.is-out {
    background-color: var(--df-danger);
}

[b-kzalb7bpng] .coverage-dot.is-in {
    background-color: var(--df-warning);
}

[b-kzalb7bpng] .coverage-panel .min-width-0 {
    min-width: 0;
}

/* ---- Per-ticket coverage flag ----
   The same finding as the panel, on the card it is about. */
[b-kzalb7bpng] .ticket-coverage-strip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
}

[b-kzalb7bpng] .ticket-coverage-strip.is-danger {
    background-color: var(--df-danger-light);
    color: var(--df-danger);
}

[b-kzalb7bpng] .ticket-coverage-strip.is-warn {
    background-color: var(--df-warning-light);
    color: var(--df-warning);
}

[b-kzalb7bpng] .ticket-coverage-strip.is-good {
    background-color: var(--df-success-light);
    color: var(--df-success);
}

/* Acted on, not yet finished — a back-merge PR that is open but hasn't completed. Distinct from
   is-warn on purpose: warning someone about a thing they have already done is how a warning
   stops being read. */
[b-kzalb7bpng] .ticket-coverage-strip.is-info {
    background-color: var(--df-info-light);
    color: var(--df-info);
}

[b-kzalb7bpng] .ticket-coverage-strip a {
    color: inherit;
    text-decoration: underline;
}

/* The action on the right of a strip. Without these the growing message squeezes the button and
   Bootstrap wraps its label mid-phrase — "Create back-merge / PR" over two lines. */
[b-kzalb7bpng] .ticket-coverage-strip .strip-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---- Deployment readiness ----
   Which linked tickets still have work outside the deploy category. Shares the
   .coverage-panel shell so readiness and branch coverage read as one status stack. */
[b-kzalb7bpng] .readiness-list {
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    overflow: hidden;
    background-color: var(--df-surface);
}

[b-kzalb7bpng] .readiness-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--df-border);
    font-size: 0.78rem;
}

[b-kzalb7bpng] .readiness-row:last-child {
    border-bottom: 0;
}

[b-kzalb7bpng] .readiness-row a {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

[b-kzalb7bpng] .readiness-tasks {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* A single outstanding task, named rather than counted. Neutral by default so the
   strip's own tint carries the verdict; red only when the task is parked. */
[b-kzalb7bpng] .task-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 50rem;
    font-size: 0.72rem;
    font-weight: 500;
    background-color: var(--df-surface);
    border: 1px solid var(--df-border);
    color: var(--df-text);
    white-space: nowrap;
}

[b-kzalb7bpng] .task-chip.is-blocked {
    border-color: var(--df-danger);
    color: var(--df-danger);
}


/* ---- Clickable assignee pills ----
   The per-assignee summary pills double as a filter on the ticket list below.
   The selected pill keeps its colour and gains a ring; the rest dim, so the
   active choice reads at a glance without relying on colour alone (the ✕ and
   aria-pressed carry it too). Every colour resolves through a --df-* token, so
   light and dark flip together and no html.nav-theme-dark twin is required
   (see CssThemeCoverage). */
[b-kzalb7bpng] .assignee-pill {
    border: 0;
    cursor: pointer;
    transition: var(--df-transition);
    outline-offset: 2px;
}

[b-kzalb7bpng] .assignee-pill:hover {
    filter: brightness(0.93);
    transform: translateY(-1px);
}

[b-kzalb7bpng] .assignee-pill:focus-visible {
    outline: 2px solid var(--df-primary);
}

/* Two-stop shadow = a gap in the page ground, then the indigo ring. */
[b-kzalb7bpng] .assignee-pill[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--df-bg), 0 0 0 4px var(--df-primary);
}

[b-kzalb7bpng] .assignee-pill-clear {
    margin-left: 0.15rem;
    font-size: 0.65rem;
}

[b-kzalb7bpng] .assignee-pill-row.has-selection .assignee-pill[aria-pressed="false"] {
    opacity: 0.4;
}

[b-kzalb7bpng] .assignee-pill-row.has-selection .assignee-pill[aria-pressed="false"]:hover {
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    [b-kzalb7bpng] .assignee-pill {
        transition: none;
    }

    [b-kzalb7bpng] .assignee-pill:hover {
        transform: none;
    }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark[b-kzalb7bpng]  .script-drag-handle:hover {
    background-color: var(--df-primary-light);
}
html.nav-theme-dark[b-kzalb7bpng]  .script-drag-handle:active {
    background-color: var(--df-primary-light);
}
html.nav-theme-dark[b-kzalb7bpng]  .sortable-ghost {
    background-color: var(--df-primary-light) !important;
}
html.nav-theme-dark[b-kzalb7bpng]  .pending-file-item {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-header {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-header-title {
    color: var(--df-text);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-header-subtitle {
    color: var(--df-text-muted);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-version {
    color: var(--df-text-muted);
    background: var(--df-bg);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-close-btn:hover {
    background: var(--df-bg);
    color: var(--df-text-muted);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-compose {
    border-right: 1px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-field {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-field-label {
    color: var(--df-text-muted);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-pill {
    background: var(--df-primary-light);
    border: 1px solid var(--df-primary-light);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-pill:hover {
    background: var(--df-primary-light);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-add-input {
    color: var(--df-text);
    border: 1.5px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-add-btn {
    background: var(--df-bg);
    color: var(--df-text);
    border: 1.5px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-add-btn:hover:not(:disabled) {
    background: var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-input-boxed {
    color: var(--df-text);
    border: 1.5px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-richtext-overlay {
    color: var(--df-text-muted);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-preview-pane {
    background: var(--df-surface);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-preview-label {
    color: var(--df-text-muted);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-preview-card {
    border: 1px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-preview-header {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-preview-subject {
    color: var(--df-text);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-footer {
    border-top: 1px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-footer-left {
    color: var(--df-text-muted);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-footer-ready {
    color: var(--df-text-muted);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-cancel-btn {
    color: var(--df-text-muted);
    border: 1.5px solid var(--df-border);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-cancel-btn:hover:not(:disabled) {
    background: var(--df-bg);
    color: var(--df-text);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-send-btn {
    background: var(--df-text);
}
html.nav-theme-dark[b-kzalb7bpng]  .deploy-email-send-btn:hover:not(:disabled) {
    background: var(--df-text);
}

/* ============================================================================
   Trunk-based releases
   A release is a span of the trunk between two tags rather than a branch, so it
   needs a way to show the range, whether it is still moving, and the tag once
   cut. Purple is the design system's tag accent (--df-purple); the dark theme
   remaps it to a light tint, which is why the solid variants below set dark ink
   for dark mode instead of white.
   ============================================================================ */

/* The window, e.g. Version_2.4.21.0 … master */
[b-kzalb7bpng] .release-window {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    max-width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    padding: 0.15rem 0.6rem;
}

[b-kzalb7bpng] .release-window-tag {
    color: var(--df-purple);
    font-weight: 600;
    white-space: nowrap;
}

[b-kzalb7bpng] .release-window-arrow {
    color: var(--df-text-muted);
}

[b-kzalb7bpng] .release-window-head {
    color: var(--df-text);
    white-space: nowrap;
}

/* Open vs cut. Paired with a dot or an icon so the state never rests on colour. */
[b-kzalb7bpng] .release-state {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 50rem;
    white-space: nowrap;
}

[b-kzalb7bpng] .release-state.is-open {
    background-color: var(--df-info-light);
    color: var(--df-info);
    border: 1px solid var(--df-info);
}

[b-kzalb7bpng] .release-state.is-cut {
    background-color: var(--df-purple-light);
    color: var(--df-purple);
    border: 1px solid var(--df-purple-border);
}

[b-kzalb7bpng] .release-state-blip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* The tag in the page header. Solid purple, so it needs dark ink in dark mode. */
[b-kzalb7bpng] .release-tag-badge {
    background-color: var(--df-purple);
    color: #fff;
}

html.nav-theme-dark[b-kzalb7bpng]  .release-tag-badge {
    color: #1a1630;
}

/* Cut / re-cut buttons. Same reasoning on the solid fill. */
[b-kzalb7bpng] .btn-release-tag {
    background-color: var(--df-purple);
    border-color: var(--df-purple);
    color: #fff;
}

[b-kzalb7bpng] .btn-release-tag:hover:not(:disabled) {
    background-color: var(--df-purple);
    border-color: var(--df-purple);
    filter: brightness(0.94);
    color: #fff;
}

html.nav-theme-dark[b-kzalb7bpng]  .btn-release-tag,
html.nav-theme-dark[b-kzalb7bpng]  .btn-release-tag:hover:not(:disabled) {
    color: #1a1630;
}

[b-kzalb7bpng] .btn-outline-release-tag {
    background-color: transparent;
    border-color: var(--df-purple);
    color: var(--df-purple);
}

[b-kzalb7bpng] .btn-outline-release-tag:hover:not(:disabled) {
    background-color: var(--df-purple-light);
    border-color: var(--df-purple);
    color: var(--df-purple);
}

/* Soft purple badge for "off <tag>" on a hotfix. */
[b-kzalb7bpng] .badge-reason-tag {
    background-color: var(--df-purple-light);
    color: var(--df-purple);
    border: 1px solid var(--df-purple-border);
}

/* The tag as a recorded fact on the Details card. */
[b-kzalb7bpng] .release-tag-block {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    background-color: var(--df-purple-light);
    border: 1px solid var(--df-purple-border);
    border-radius: 0.45rem;
    font-size: 0.8rem;
}

[b-kzalb7bpng] .release-tag-block-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

[b-kzalb7bpng] .release-tag-block-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--df-purple);
    overflow-wrap: anywhere;
}

[b-kzalb7bpng] .release-tag-block-meta {
    color: var(--df-text-muted);
    font-size: 0.75rem;
}

/* "Merged after the cut" — its own colour because it is neither a warning about
   something pending nor the same failure as a wrong-branch merge. */
[b-kzalb7bpng] .coverage-dot.is-after {
    background-color: var(--df-purple);
}

[b-kzalb7bpng] .ticket-coverage-strip.is-after-cut {
    background-color: var(--df-purple-light);
    color: var(--df-purple);
}

[b-kzalb7bpng] .card.border-after-cut {
    border-color: var(--df-purple) !important;
}

/* The line under the coverage panel that says whether the list is still moving. */
[b-kzalb7bpng] .coverage-foot {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--df-border);
    font-size: 0.8rem;
    color: var(--df-text-muted);
}

/* ---- Cut dialog ---- */

[b-kzalb7bpng] .cut-commit {
    background-color: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 0.45rem;
    padding: 0.6rem 0.7rem;
    font-size: 0.82rem;
}

[b-kzalb7bpng] .cut-commit-subject {
    color: var(--df-text-muted);
    font-size: 0.78rem;
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

[b-kzalb7bpng] .cut-tally {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    background-color: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 0.45rem;
    padding: 0.6rem 0.8rem;
}

[b-kzalb7bpng] .cut-tally-item {
    display: flex;
    flex-direction: column;
}

[b-kzalb7bpng] .cut-tally-number {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--df-text);
    font-variant-numeric: tabular-nums;
}

[b-kzalb7bpng] .cut-tally-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
}
/* /Components/Pages/Deployments/DeploymentPage.razor.rz.scp.css */
[b-osu7puna49] .deployment-row-link {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

[b-osu7puna49] .deployment-row-link:hover {
    color: inherit;
    text-decoration: none;
}

/* A release tag. Purple is the design system's tag/feature accent; the soft tint keeps a
   column of them from shouting louder than the status badges next door. */
[b-osu7puna49] .deployment-tag-badge {
    background: var(--df-purple-light);
    color: var(--df-purple);
    border: 1px solid var(--df-purple-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

[b-osu7puna49] .deployment-scope-label {
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Keeps the hotfix marker on the same line as the id it belongs to. */
[b-osu7puna49] .deployment-id-cell {
    white-space: nowrap;
}

/* ---- Release type picker ----
   The first decision in the create modal, and the one that changes the shape of everything
   below it. Cards rather than a <select> because each option needs a sentence: the difference
   between a trunk window and a hotfix is not guessable from three words. */
[b-osu7puna49] .release-type-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

@media (max-width: 767.98px) {
    [b-osu7puna49] .release-type-picker {
        grid-template-columns: 1fr;
    }
}

[b-osu7puna49] .release-type {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    color: var(--df-text);
    cursor: pointer;
    transition: var(--df-transition);
}

[b-osu7puna49] .release-type:hover {
    border-color: var(--df-primary);
}

[b-osu7puna49] .release-type.is-selected {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
    box-shadow: inset 0 0 0 1px var(--df-primary);
}

[b-osu7puna49] .release-type-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* The selected state carries a filled dot as well as the tint, so the choice survives a
   grayscale print and doesn't rest on colour alone. */
[b-osu7puna49] .release-type-dot {
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid var(--df-border);
    background: var(--df-surface);
}

[b-osu7puna49] .release-type.is-selected .release-type-dot {
    border-color: var(--df-primary);
    box-shadow: inset 0 0 0 3px var(--df-primary);
}

[b-osu7puna49] .release-type-sub {
    font-size: 0.75rem;
    color: var(--df-text-muted);
    line-height: 1.4;
}

/* The source row's three label areas. The Branch/Tag toggle is taller than a bare label, so
   without a shared height its column's field sits a few pixels below its neighbours. */
[b-osu7puna49] .branch-source-row .d-flex {
    min-height: 1.75rem;
}
/* /Components/Pages/Development/StudioControl.razor.rz.scp.css */
/* Fill the viewport below the app's top bar (3.5rem) and the content's top padding (1.5rem)
   so the remote screen gets as much room as possible. */
.studio-control-page[b-ln6tzj2alb] {
    display: flex;
    height: calc(100vh - 5.5rem);
    min-height: 420px;
    margin-bottom: -1rem; /* trim the article's default bottom gap */
}

.studio-control-brand[b-ln6tzj2alb] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.studio-control-brand-icon[b-ln6tzj2alb] {
    font-size: 1.4rem;
    line-height: 1;
}

.studio-control-title[b-ln6tzj2alb] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.studio-control-subtitle[b-ln6tzj2alb] {
    margin: .15rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .72rem;
    line-height: 1.35;
}

.studio-control-field[b-ln6tzj2alb] {
    display: flex;
    flex-direction: column;
}

.studio-control-label[b-ln6tzj2alb] {
    margin-bottom: .2rem;
    color: var(--bs-secondary-color);
    font-size: 0.65rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.studio-control-note[b-ln6tzj2alb] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    color: var(--bs-secondary-color);
    font-size: .72rem;
    line-height: 1.4;
}

.studio-control-note .bi[b-ln6tzj2alb] {
    margin-top: .1rem;
}

@media (max-width: 767.98px) {
    .studio-control-page[b-ln6tzj2alb] {
        height: auto;
        min-height: calc(100vh - 5.5rem);
    }
}
/* /Components/Pages/FeaturePlans/FeaturePlanCompaniesModal.razor.rz.scp.css */
.fpco-add[b-61bf2onstj] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--df-border);
}

.fpco-add .btn[b-61bf2onstj] {
    flex-shrink: 0;
    white-space: nowrap;
}

.fpco-empty[b-61bf2onstj] {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--df-text-muted);
}

.fpco-list[b-61bf2onstj] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fpco-list > li[b-61bf2onstj] {
    border-bottom: 1px solid var(--df-border);
}

.fpco-list > li:last-child[b-61bf2onstj] {
    border-bottom: 0;
}

.fpco-row[b-61bf2onstj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: 0;
    background: none;
    text-align: left;
    color: var(--df-text);
    transition: background var(--df-transition);
}

.fpco-row:hover[b-61bf2onstj] {
    background: var(--df-bg);
}

.fpco-main[b-61bf2onstj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.fpco-name[b-61bf2onstj] {
    font-size: 0.9rem;
    font-weight: 600;
}

.fpco-sub[b-61bf2onstj] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.fpco-go[b-61bf2onstj] {
    color: var(--df-text-muted);
}

.fpco-row:hover .fpco-go[b-61bf2onstj],
.fpco-row:hover .fpco-name[b-61bf2onstj] {
    color: var(--df-primary);
}

.fpco-archived .fpco-name[b-61bf2onstj] {
    color: var(--df-text-muted);
}

.fpco-edit[b-61bf2onstj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1rem 1rem;
    background: var(--df-bg);
}

/* Same height as the item panel's editor: the toolbar wraps to two rows and the word-count
   footer sits inside this box, so anything shorter spills over the rows below. */
.fpco-editor[b-61bf2onstj] {
    height: 320px;
}

.fpco-edit-actions[b-61bf2onstj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Components/Pages/FeaturePlans/FeaturePlanCreateTicketsModal.razor.rz.scp.css */
.fpc-body[b-go1z020o89] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fpc-seg[b-go1z020o89] {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.fpc-seg button[b-go1z020o89] {
    padding: 0.35rem 0.85rem;
    border: 0;
    background: var(--df-surface);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--df-text-muted);
}

.fpc-seg button + button[b-go1z020o89] {
    border-left: 1px solid var(--df-border);
}

.fpc-seg button[aria-selected="true"][b-go1z020o89] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.fpc-grid[b-go1z020o89] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.fpc-prefill[b-go1z020o89] {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--df-purple);
}

.fpc-editor[b-go1z020o89] {
    height: 260px;
}

.fpc-lines[b-go1z020o89] {
    margin: 0;
    padding: 0.4rem 0.6rem 0.4rem 2rem;
    max-height: 170px;
    overflow: auto;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.fpc-lines li[b-go1z020o89] {
    padding: 0.15rem 0;
}

.fpc-note[b-go1z020o89] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--df-info-border);
    border-radius: 0.5rem;
    background: var(--df-info-light);
    font-size: 0.78rem;
}

.fpc-note > i[b-go1z020o89] {
    color: var(--df-info);
}

@media (max-width: 760px) {
    .fpc-grid[b-go1z020o89] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/FeaturePlans/FeaturePlanCustomerPicker.razor.rz.scp.css */
.fpcp[b-ygh5x0sia9] {
    position: relative;
    min-width: 0;
}

.fpcp-field[b-ygh5x0sia9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    text-align: left;
    color: var(--df-text);
}

.fpcp-field i[b-ygh5x0sia9] {
    color: var(--df-text-muted);
    font-size: 0.78rem;
}

.fpcp-summary[b-ygh5x0sia9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fpcp-none[b-ygh5x0sia9] {
    color: var(--df-text-muted);
}

.fpcp-add[b-ygh5x0sia9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border: 1px dashed var(--df-primary-border);
    border-radius: 0.375rem;
    background: var(--df-surface);
    color: var(--df-primary);
    font-size: 0.78rem;
    font-weight: 600;
    transition: background var(--df-transition);
}

.fpcp-add:hover[b-ygh5x0sia9],
.fpcp-add[aria-expanded="true"][b-ygh5x0sia9] {
    background: var(--df-primary-light);
}

/* Over the drawer (1040) and its scrim, under Bootstrap modals' own popups. */
.fpcp-scrim[b-ygh5x0sia9] {
    position: fixed;
    inset: 0;
    z-index: 1060;
}

.fpcp-pop[b-ygh5x0sia9] {
    position: fixed;
    z-index: 1061;
    width: 300px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow-hover);
    overflow: hidden;
}

.fpcp-search[b-ygh5x0sia9] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--df-border);
    color: var(--df-text-muted);
    font-size: 0.78rem;
}

.fpcp-search input[b-ygh5x0sia9] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--df-text);
    font-size: 0.875rem;
}

.fpcp-list[b-ygh5x0sia9] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0;
}

.fpcp-head[b-ygh5x0sia9] {
    padding: 0.45rem 0.75rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--df-text-muted);
}

.fpcp-opt[b-ygh5x0sia9] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.875rem;
    color: var(--df-text);
    cursor: pointer;
}

.fpcp-opt:hover[b-ygh5x0sia9] {
    background: var(--df-bg);
}

.fpcp-opt input[b-ygh5x0sia9] {
    margin: 0;
    accent-color: var(--df-primary);
}

.fpcp-opt span[b-ygh5x0sia9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fpcp-empty[b-ygh5x0sia9] {
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.fpcp-new[b-ygh5x0sia9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0.5rem 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px dashed var(--df-primary-border);
    border-radius: 0.375rem;
    background: var(--df-surface);
    color: var(--df-primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
}

.fpcp-new:hover[b-ygh5x0sia9] {
    background: var(--df-primary-light);
}

.fpcp-new span[b-ygh5x0sia9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fpcp-foot[b-ygh5x0sia9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--df-border);
    background: var(--df-bg);
    font-size: 0.72rem;
    color: var(--df-text-muted);
}
/* /Components/Pages/FeaturePlans/FeaturePlanItemPanel.razor.rz.scp.css */
.fpp[b-ygkryxf745] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.fpp-head[b-ygkryxf745] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.7rem;
}

.fpp-top[b-ygkryxf745] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.fpp-titlewrap[b-ygkryxf745] {
    min-width: 0;
}

.fpp-nav[b-ygkryxf745] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
}

.fpp-eyebrow[b-ygkryxf745] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
}

.fpp-title[b-ygkryxf745] {
    margin: 0.1rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.fpp-sub[b-ygkryxf745] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.fpp-actions[b-ygkryxf745] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.fpp-confirm[b-ygkryxf745] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--df-danger);
}

.fpp-allclosed[b-ygkryxf745] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--df-success-border);
    border-radius: 0.5rem;
    background: var(--df-success-light);
    font-size: 0.78rem;
    color: var(--df-text);
}

.fpp-allclosed > i[b-ygkryxf745] {
    color: var(--df-success);
}

.fpp-tabs[b-ygkryxf745] {
    display: flex;
    gap: 0.1rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--df-border);
}

.fpp-tabs button[b-ygkryxf745] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--df-text-muted);
    transition: color var(--df-transition), border-color var(--df-transition);
}

.fpp-tabs button:hover[b-ygkryxf745] {
    color: var(--df-text);
}

.fpp-tabs button[aria-selected="true"][b-ygkryxf745] {
    color: var(--df-primary);
    border-bottom-color: var(--df-primary);
}

.fpp-count[b-ygkryxf745] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0 0.4rem;
    border: 1px solid var(--df-border);
    border-radius: 50rem;
    background: var(--df-bg);
    font-size: 0.65rem;
    color: var(--df-text-muted);
}

.fpp-body[b-ygkryxf745] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    overflow: auto;
    min-height: 0;
}

.fpp-grid[b-ygkryxf745] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.fpp-help[b-ygkryxf745] {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.fpp-error[b-ygkryxf745] {
    font-size: 0.78rem;
    color: var(--df-danger);
}

.fpp-editor[b-ygkryxf745] {
    height: 320px;
}

.fpp-savebar[b-ygkryxf745] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.fpp-saved[b-ygkryxf745] {
    font-size: 0.78rem;
    color: var(--df-success);
}

.fpp-section[b-ygkryxf745] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--df-border);
}

.fpp-section:first-child[b-ygkryxf745] {
    padding-top: 0;
    border-top: 0;
}

.fpp-section-head[b-ygkryxf745] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.fpp-files[b-ygkryxf745] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fpp-files li[b-ygkryxf745] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    font-size: 0.78rem;
}

.fpp-files li > i[b-ygkryxf745] {
    color: var(--df-text-muted);
}

.fpp-file-name[b-ygkryxf745] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.fpp-file-meta[b-ygkryxf745] {
    color: var(--df-text-muted);
    white-space: nowrap;
}

.fpp-progress[b-ygkryxf745] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
}

.fpp-bar[b-ygkryxf745] {
    flex: 1;
    width: auto;
    height: 7px;
}

.fpp-addtix[b-ygkryxf745] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fpp-addtix .form-control[b-ygkryxf745] {
    flex: 1 1 200px;
    width: auto;
}

.fpp-sugg[b-ygkryxf745] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fpp-sugg li[b-ygkryxf745] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    border: 1px dashed var(--df-purple-border);
    border-radius: 0.5rem;
    font-size: 0.78rem;
}

.fpp-why[b-ygkryxf745] {
    grid-column: 2 / 3;
    font-size: 0.72rem;
    color: var(--df-purple);
}

@media (max-width: 640px) {
    .fpp-grid[b-ygkryxf745] {
        grid-template-columns: 1fr;
    }

    .fpp-files li[b-ygkryxf745] {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .fpp-file-meta[b-ygkryxf745] {
        display: none;
    }
}

.fpp-customers[b-ygkryxf745] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    padding: 0.3rem;
    border: 1px solid var(--df-border);
    border-radius: 0.375rem;
    background: var(--df-surface);
}

.fpp-token[b-ygkryxf745] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0.1rem 0.15rem 0.1rem 0.5rem;
    border: 1px solid var(--df-border);
    border-radius: 0.375rem;
    background: var(--df-bg);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--df-text);
}

.fpp-token > span[b-ygkryxf745] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fpp-token button[b-ygkryxf745] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--df-text-muted);
    font-size: 0.65rem;
}

.fpp-token button:hover[b-ygkryxf745] {
    background: var(--df-danger-light);
    color: var(--df-danger);
}
/* /Components/Pages/FeaturePlans/FeaturePlanLinkTicketsModal.razor.rz.scp.css */
.fpl-body[b-rtv4dt3zw7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fpl-chips[b-rtv4dt3zw7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fpl-chip[b-rtv4dt3zw7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--df-border);
    border-radius: 50rem;
    background: var(--df-surface);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--df-text-muted);
    transition: background var(--df-transition), color var(--df-transition);
}

.fpl-chip[aria-pressed="true"][b-rtv4dt3zw7] {
    background: var(--df-primary-light);
    border-color: var(--df-primary-border);
    color: var(--df-primary);
}

.fpl-results[b-rtv4dt3zw7] {
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    max-height: 380px;
    overflow: auto;
}

.fpl-grouphead[b-rtv4dt3zw7] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
}

.fpl-empty[b-rtv4dt3zw7] {
    padding: 0.5rem 0.65rem 0.75rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.fpl-row[b-rtv4dt3zw7] {
    display: grid;
    grid-template-columns: 18px auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid var(--df-border);
    cursor: pointer;
    transition: background var(--df-transition);
}

.fpl-row:hover[b-rtv4dt3zw7] {
    background: var(--df-bg);
}

.fpl-row:focus-visible[b-rtv4dt3zw7] {
    outline: 2px solid var(--df-primary);
    outline-offset: -2px;
}

.fpl-row.fpl-selected[b-rtv4dt3zw7] {
    background: var(--df-primary-light);
}

.fpl-row .form-check-input[b-rtv4dt3zw7] {
    margin: 0;
    pointer-events: none;
}

.fpl-main[b-rtv4dt3zw7] {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.fpl-sub[b-rtv4dt3zw7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--df-text-muted);
}

.fpl-why[b-rtv4dt3zw7] {
    color: var(--df-purple);
}

.fpl-warn[b-rtv4dt3zw7] {
    color: var(--df-warning);
}

.fpl-paste[b-rtv4dt3zw7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fpl-paste .form-control[b-rtv4dt3zw7] {
    flex: 1 1 200px;
    width: auto;
}
/* /Components/Pages/FeaturePlans/FeaturePlanList.razor.rz.scp.css */
/* Shared pieces (pills, ticket lists, bars, rich text) live in app.css under "Feature Plans". */

.fp-header-main[b-p58b3ydx0k] {
    min-width: 0;
    flex: 1;
}

.fp-stats[b-p58b3ydx0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-top: 0.25rem;
}

.fp-stats b[b-p58b3ydx0k] {
    color: var(--df-text);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* ----- Item drawer ----- */

/* The list keeps the page and its normal scroll; an open item slides in over its right side.
   Below Bootstrap's modals (1055), so Link / Create tickets dialogs open on top of it. */
.fp-scrim[b-p58b3ydx0k] {
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: rgba(15, 23, 42, 0.18);
    animation: fp-fade-b-p58b3ydx0k 0.2s ease;
}

.fp-drawer[b-p58b3ydx0k] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    width: min(680px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--df-surface);
    border-left: 1px solid var(--df-border);
    box-shadow: var(--df-card-shadow-hover);
    animation: fp-slide-b-p58b3ydx0k 0.2s ease;
}

.fp-drawer:focus[b-p58b3ydx0k] {
    outline: none;
}

.fp-drawer-body[b-p58b3ydx0k] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fp-drawer-keys[b-p58b3ydx0k] {
    display: flex;
    gap: 1rem;
    padding: 0.45rem 1rem;
    border-top: 1px solid var(--df-border);
    background: var(--df-bg);
    font-size: 0.72rem;
    color: var(--df-text-muted);
}

.fp-drawer-keys kbd[b-p58b3ydx0k] {
    display: inline-block;
    min-width: 1.15rem;
    padding: 0 0.25rem;
    border: 1px solid var(--df-border);
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    background: var(--df-surface);
    color: var(--df-text-muted);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
}

@keyframes fp-slide-b-p58b3ydx0k {
    from { transform: translateX(40px); opacity: 0; }
}

@keyframes fp-fade-b-p58b3ydx0k {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-drawer[b-p58b3ydx0k],
    .fp-scrim[b-p58b3ydx0k] {
        animation: none;
    }
}

.fp-list[b-p58b3ydx0k] {
    overflow: hidden;
}

.fp-addbar[b-p58b3ydx0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--df-border);
}

.fp-addbar .form-control[b-p58b3ydx0k] {
    flex: 1 1 240px;
}

.fp-prio-select[b-p58b3ydx0k],
.fp-prod-select[b-p58b3ydx0k] {
    width: auto;
}

.fp-prod-select[b-p58b3ydx0k] {
    max-width: 12rem;
}

.fp-co-pick[b-p58b3ydx0k] {
    width: 14rem;
    max-width: 100%;
}

.fp-filters[b-p58b3ydx0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--df-border);
}

.fp-chip[b-p58b3ydx0k] {
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    border-radius: 50rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--df-text-muted);
    transition: background var(--df-transition), color var(--df-transition);
}

.fp-chip[aria-pressed="true"][b-p58b3ydx0k] {
    background: var(--df-primary-light);
    border-color: var(--df-primary-border);
    color: var(--df-primary);
}

.fp-chip-n[b-p58b3ydx0k] {
    margin-left: 0.3rem;
    font-weight: 500;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.fp-sep[b-p58b3ydx0k] {
    width: 1px;
    height: 1.1rem;
    margin: 0 0.2rem;
    background: var(--df-border);
}

/* The one filtered customer's description, above its items. */
.fp-codesc[b-p58b3ydx0k] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--df-border);
    background: var(--df-bg);
    font-size: 0.875rem;
}

.fp-filterrow[b-p58b3ydx0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.fp-filterlabel[b-p58b3ydx0k] {
    margin-right: 0.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--df-text-muted);
}

.fp-hint[b-p58b3ydx0k] {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--df-text-muted);
}

/* ----- Rows ----- */

.fp-rows[b-p58b3ydx0k] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fp-row[b-p58b3ydx0k] {
    border-bottom: 1px solid var(--df-border);
    background: var(--df-surface);
}

.fp-row:last-child[b-p58b3ydx0k] {
    border-bottom: 0;
}

.fp-rowmain[b-p58b3ydx0k] {
    display: grid;
    grid-template-columns: 18px 16px 24px minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.7rem 0.75rem;
    cursor: pointer;
    transition: background var(--df-transition);
}

.fp-rowmain:hover[b-p58b3ydx0k] {
    background: var(--df-bg);
}

.fp-row.fp-selected .fp-rowmain[b-p58b3ydx0k] {
    background: var(--df-primary-light);
    box-shadow: inset 3px 0 0 var(--df-primary);
}

.fp-row.fp-dragging[b-p58b3ydx0k] {
    opacity: 0.4;
}

.fp-row.fp-over[b-p58b3ydx0k] {
    box-shadow: inset 0 2px 0 var(--df-primary);
}

.fp-chev[b-p58b3ydx0k] {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--df-text-muted);
    transition: transform var(--df-transition), color var(--df-transition);
}

.fp-chev:hover[b-p58b3ydx0k] {
    color: var(--df-primary);
}

.fp-chev-open[b-p58b3ydx0k] {
    transform: rotate(90deg);
}

.fp-grip[b-p58b3ydx0k] {
    display: flex;
    color: var(--df-text-muted);
    cursor: grab;
}

.fp-rank[b-p58b3ydx0k] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--df-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fp-main[b-p58b3ydx0k] {
    min-width: 0;
}

.fp-title[b-p58b3ydx0k] {
    display: block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text);
}

.fp-rowmain:hover .fp-title[b-p58b3ydx0k] {
    color: var(--df-primary);
}

.fp-done .fp-title[b-p58b3ydx0k] {
    text-decoration: line-through;
    color: var(--df-text-muted);
}

.fp-meta[b-p58b3ydx0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.fp-note[b-p58b3ydx0k] {
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-right[b-p58b3ydx0k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fp-tix[b-p58b3ydx0k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    min-width: 96px;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
}

.fp-donehead[b-p58b3ydx0k] {
    display: flex;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: var(--df-bg);
    border-bottom: 1px solid var(--df-border);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
}

.fp-empty[b-p58b3ydx0k] {
    padding: 1.5rem;
    text-align: center;
    color: var(--df-text-muted);
}

/* ----- Expanded row (list at full width) ----- */

.fp-expand[b-p58b3ydx0k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 0.35rem 0.75rem 1rem 4.9rem;
    background: var(--df-primary-light);
}

.fp-expand-head[b-p58b3ydx0k] {
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
}

.fp-expand-actions[b-p58b3ydx0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* ----- Paste modal ----- */

.fp-paste[b-p58b3ydx0k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.fp-paste-preview[b-p58b3ydx0k] {
    max-height: 290px;
    overflow: auto;
    margin: 0;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    font-size: 0.78rem;
}

.fp-paste-preview li[b-p58b3ydx0k] {
    padding: 0.15rem 0;
}

.fp-paste-preview small[b-p58b3ydx0k] {
    display: block;
    color: var(--df-text-muted);
    font-style: italic;
}


@media (max-width: 1000px) {
    .fp-expand[b-p58b3ydx0k] {
        grid-template-columns: 1fr;
        padding-left: 0.75rem;
    }
}

@media (max-width: 640px) {
    .fp-drawer-keys[b-p58b3ydx0k] {
        display: none;
    }

    .fp-rowmain[b-p58b3ydx0k] {
        grid-template-columns: 16px 20px minmax(0, 1fr);
        row-gap: 0.4rem;
    }

    .fp-grip[b-p58b3ydx0k] {
        display: none;
    }

    .fp-right[b-p58b3ydx0k] {
        grid-column: 2 / -1;
        justify-content: space-between;
    }

    .fp-paste[b-p58b3ydx0k] {
        grid-template-columns: 1fr;
    }
}

.fp-paste-co[b-p58b3ydx0k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .fp-paste-co[b-p58b3ydx0k] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Files/FilesPage.razor.rz.scp.css */
/* ===== Max size hint ===== */
.max-size-hint[b-u4vwb0zhv7] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, var(--df-text-muted));
    white-space: nowrap;
}

/* ===== Two-panel layout ===== */
.files-layout[b-u4vwb0zhv7] {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    height: calc(100vh - 160px);
    min-height: 400px;
}

/* ===== Left: Folder tree ===== */
.folder-tree-panel[b-u4vwb0zhv7] {
    width: 240px;
    min-width: 200px;
    flex-shrink: 0;
    border: 1px solid var(--bs-border-color, var(--df-border));
    border-radius: 0.5rem;
    background: var(--bs-body-bg, var(--df-surface));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.folder-tree-header[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.75rem;
    background: var(--bs-light, var(--df-bg));
    border-bottom: 1px solid var(--bs-border-color, var(--df-border));
    color: var(--bs-secondary-color, var(--df-text-muted));
}

.folder-tree-body[b-u4vwb0zhv7] {
    flex: 1;
    overflow-y: auto;
    padding: 0.35rem 0;
    font-size: 0.875rem;
}

/* ===== Tree nodes (shared with FolderTreeNode) ===== */
[b-u4vwb0zhv7] .tree-node,
.tree-node[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    padding: 0.32rem 0.5rem;
    cursor: pointer;
    border-radius: 0.3rem;
    margin: 1px 0.3rem;
    white-space: nowrap;
    user-select: none;
    color: var(--bs-body-color, #212529);
    transition: background-color 0.12s ease;
}

[b-u4vwb0zhv7] .tree-node:hover,
.tree-node:hover[b-u4vwb0zhv7] {
    background-color: rgba(0, 0, 0, 0.04);
}

[b-u4vwb0zhv7] .tree-node.active,
.tree-node.active[b-u4vwb0zhv7] {
    background-color: rgba(13, 110, 253, 0.09);
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

[b-u4vwb0zhv7] .tree-chevron,
.tree-chevron[b-u4vwb0zhv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.72rem;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--bs-secondary, var(--df-text-muted));
    border-radius: 3px;
    margin-right: 2px;
    transition: background-color 0.1s ease;
}

[b-u4vwb0zhv7] .tree-chevron:hover,
.tree-chevron:hover[b-u4vwb0zhv7] {
    background-color: rgba(0, 0, 0, 0.08);
}

[b-u4vwb0zhv7] .tree-chevron-spacer,
.tree-chevron-spacer[b-u4vwb0zhv7] {
    display: inline-block;
    width: 18px;
    flex-shrink: 0;
    margin-right: 2px;
}

[b-u4vwb0zhv7] .tree-label,
.tree-label[b-u4vwb0zhv7] {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ===== Right: Content panel ===== */
.files-content-panel[b-u4vwb0zhv7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Breadcrumb bar ===== */
.files-breadcrumb-bar[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bs-light, var(--df-bg));
    border: 1px solid var(--bs-border-color, var(--df-border));
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.files-breadcrumb-bar .breadcrumb[b-u4vwb0zhv7] {
    font-size: 0.875rem;
}

.files-breadcrumb-bar .breadcrumb a[b-u4vwb0zhv7] {
    color: var(--bs-primary, #0d6efd);
    text-decoration: none;
}

.files-breadcrumb-bar .breadcrumb a:hover[b-u4vwb0zhv7] {
    text-decoration: underline;
}

.files-count-badge[b-u4vwb0zhv7] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, var(--df-text-muted));
    white-space: nowrap;
    padding: 0.15rem 0.5rem;
    background: var(--bs-body-bg, var(--df-surface));
    border: 1px solid var(--bs-border-color, var(--df-border));
    border-radius: 1rem;
}

.files-hint[b-u4vwb0zhv7] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, var(--df-text-muted));
    white-space: nowrap;
    opacity: 0.8;
}

/* ===== New folder bar ===== */
.new-folder-bar[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--df-warning-light);
    border: 1px solid var(--df-warning-border);
    border-radius: 0.5rem;
}

/* ===== Files table card ===== */
.files-table-card[b-u4vwb0zhv7] {
    border: 1px solid var(--bs-border-color, var(--df-border));
    border-radius: 0.5rem;
    background: var(--bs-body-bg, var(--df-surface));
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.files-table[b-u4vwb0zhv7] {
    font-size: 0.875rem;
}

.files-table thead[b-u4vwb0zhv7] {
    background: var(--bs-light, var(--df-bg));
    position: sticky;
    top: 0;
    z-index: 1;
}

.files-table thead th[b-u4vwb0zhv7] {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, var(--df-text-muted));
    border-bottom-width: 1px;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
}

/* ===== Sortable headers ===== */
.sortable-header[b-u4vwb0zhv7] {
    cursor: pointer;
    user-select: none;
    transition: color 0.12s ease;
}

.sortable-header:hover[b-u4vwb0zhv7] {
    color: var(--bs-body-color, #212529);
}

.sort-arrow[b-u4vwb0zhv7] {
    font-size: 0.65rem;
    margin-left: 3px;
    vertical-align: middle;
    color: var(--bs-primary, #0d6efd);
}

.files-table tbody td[b-u4vwb0zhv7] {
    padding: 0.55rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.06));
}

.files-table tbody tr:last-child td[b-u4vwb0zhv7] {
    border-bottom: none;
}

/* Column widths */
.col-icon[b-u4vwb0zhv7] {
    width: 44px;
    text-align: center;
}

.col-name[b-u4vwb0zhv7] {
    min-width: 200px;
}

.col-size[b-u4vwb0zhv7] {
    width: 100px;
    white-space: nowrap;
}

.col-user[b-u4vwb0zhv7] {
    width: 140px;
    white-space: nowrap;
}

.col-date[b-u4vwb0zhv7] {
    width: 120px;
    white-space: nowrap;
}

.col-actions[b-u4vwb0zhv7] {
    width: 190px;
    text-align: right;
}

/* ===== Clickable rows ===== */
.row-clickable[b-u4vwb0zhv7] {
    cursor: pointer;
}

.row-clickable:hover td[b-u4vwb0zhv7] {
    background-color: rgba(13, 110, 253, 0.03);
}

/* ===== File icon badges ===== */
.file-icon[b-u4vwb0zhv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
}

.file-icon-folder[b-u4vwb0zhv7] {
    color: var(--df-warning);
    background: none;
    width: auto;
    height: auto;
}

.file-icon-pdf[b-u4vwb0zhv7] {
    background: #fee2e2;
    color: var(--df-danger);
}

.file-icon-img[b-u4vwb0zhv7] {
    background: #f3e8ff;
    color: #9333ea;
}

.file-icon-vid[b-u4vwb0zhv7] {
    background: #fce7f3;
    color: #db2777;
}

html.nav-theme-dark .file-icon-vid[b-u4vwb0zhv7] {
    background: rgba(219, 39, 119, 0.22);
    color: #f9a8d4;
}

.file-icon-aud[b-u4vwb0zhv7] {
    background: #ccfbf1;
    color: #0d9488;
}

.file-icon-xls[b-u4vwb0zhv7] {
    background: #dcfce7;
    color: #16a34a;
}

.file-icon-doc[b-u4vwb0zhv7] {
    background: #dbeafe;
    color: #2563eb;
}

.file-icon-zip[b-u4vwb0zhv7] {
    background: #ffedd5;
    color: #ea580c;
}

.file-icon-txt[b-u4vwb0zhv7] {
    background: #f1f5f9;
    color: var(--df-text-muted);
}

.file-icon-gen[b-u4vwb0zhv7] {
    background: #f1f5f9;
    color: #475569;
}

/* ===== File name styles ===== */
.file-name-text[b-u4vwb0zhv7] {
    font-size: 0.875rem;
}

.folder-name[b-u4vwb0zhv7] {
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

.file-name-link[b-u4vwb0zhv7] {
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.file-name-link:hover[b-u4vwb0zhv7] {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
}

.file-row:hover td[b-u4vwb0zhv7] {
    background-color: rgba(13, 110, 253, 0.03);
}

/* ===== File and folder tags ===== */
.file-tag-list[b-u4vwb0zhv7] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.file-tag-list:empty[b-u4vwb0zhv7] {
    display: none;
}

.file-tag-chip[b-u4vwb0zhv7] {
    display: inline-flex;
    align-items: center;
    max-width: 140px;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-picker-list[b-u4vwb0zhv7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 320px;
    overflow-y: auto;
}

.tag-picker-item[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.45rem;
    border-radius: 0.35rem;
    cursor: pointer;
}

.tag-picker-item:hover[b-u4vwb0zhv7] {
    background: var(--bs-tertiary-bg, var(--df-bg));
}

.context-menu-tag-icon[b-u4vwb0zhv7] {
    width: 14px;
    color: var(--bs-secondary-color, var(--df-text-muted));
    text-align: center;
    font-size: 0.65rem;
}

/* ===== Action buttons ===== */
.action-btns[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex-wrap: nowrap;
}

.action-btn[b-u4vwb0zhv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--bs-secondary, var(--df-text-muted));
    border-radius: 0.3rem;
    cursor: pointer;
    transition: all 0.12s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.action-btn:hover[b-u4vwb0zhv7] {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--bs-body-color, #212529);
}

.action-btn-danger:hover[b-u4vwb0zhv7] {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--df-danger);
}

.action-btn-locked[b-u4vwb0zhv7] {
    color: var(--df-warning);
}

.action-btn-locked:hover[b-u4vwb0zhv7] {
    background-color: rgba(217, 119, 6, 0.1);
    color: #b45309;
}

/* ===== Lock badge ===== */
.lock-badge[b-u4vwb0zhv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: var(--df-warning);
    opacity: 0.75;
    vertical-align: middle;
}

/* ===== Empty state ===== */
.empty-state[b-u4vwb0zhv7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-state-icon[b-u4vwb0zhv7] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state-text[b-u4vwb0zhv7] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    margin-bottom: 0.25rem;
}

.empty-state-hint[b-u4vwb0zhv7] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, var(--df-text-muted));
}

/* ===== Edited marker ===== */
.edited-badge[b-u4vwb0zhv7] {
    font-size: 0.72rem;
    font-style: italic;
    opacity: 0.7;
    margin-left: 4px;
    white-space: nowrap;
}

/* ===== File editor modal ===== */
.file-editor-dialog[b-u4vwb0zhv7] {
    max-width: none;
    width: 96vw;
    margin: 1.5vh auto;
}

.file-editor-content[b-u4vwb0zhv7] {
    height: 97vh;
    display: flex;
    flex-direction: column;
}

.file-editor-body[b-u4vwb0zhv7] {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.file-editor-textarea[b-u4vwb0zhv7] {
    flex: 1 1 auto;
    width: 100%;
    resize: none;
    border: 1px solid var(--bs-border-color, #d0d7de);
    border-radius: 0.4rem;
    padding: 0.75rem 0.85rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre-wrap;
    overflow: auto;
    color: var(--bs-body-color, #1f2328);
    background: var(--bs-body-bg, var(--df-surface));
}

.file-editor-textarea:focus[b-u4vwb0zhv7] {
    outline: none;
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.file-editor-hint[b-u4vwb0zhv7] {
    font-size: 0.78rem;
    white-space: nowrap;
}

/* ===== Right-click context menu ===== */
.context-menu-overlay[b-u4vwb0zhv7] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: transparent;
}

.context-menu[b-u4vwb0zhv7] {
    position: fixed;
    z-index: 1081;
    min-width: 190px;
    padding: 0.3rem;
    background: var(--bs-body-bg, var(--df-surface));
    border: 1px solid var(--bs-border-color, var(--df-border));
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.context-menu-item[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    background: transparent;
    color: var(--bs-body-color, #212529);
    font-size: 0.78rem;
    text-align: left;
    border-radius: 0.35rem;
    cursor: pointer;
    white-space: nowrap;
}

.context-menu-item:hover[b-u4vwb0zhv7] {
    background-color: rgba(13, 110, 253, 0.09);
    color: var(--bs-primary, #0d6efd);
}

.context-menu-item svg[b-u4vwb0zhv7] {
    flex-shrink: 0;
    opacity: 0.75;
}

.context-menu-item-danger:hover[b-u4vwb0zhv7] {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--df-danger);
}

.context-menu-sep[b-u4vwb0zhv7] {
    height: 1px;
    margin: 0.3rem 0.4rem;
    background: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
}

/* ===== Toast notifications ===== */
.success-toast[b-u4vwb0zhv7] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1060;
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-slide-in-b-u4vwb0zhv7 0.25s ease-out;
    background: var(--df-success);
    color: #fff;
    border: none;
}

/* ===== Upload progress toast ===== */
.upload-progress-toast[b-u4vwb0zhv7] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1060;
    width: 340px;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--bs-body-bg, var(--df-surface));
    border: 1px solid var(--bs-border-color, var(--df-border));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    animation: toast-slide-in-b-u4vwb0zhv7 0.25s ease-out;
    font-size: 0.875rem;
}

.upload-progress-header[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--bs-body-color, #212529);
}

.upload-progress-filename[b-u4vwb0zhv7] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bs-secondary-color, var(--df-text-muted));
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
}

.upload-progress-track[b-u4vwb0zhv7] {
    height: 6px;
    background: var(--bs-light, #e9ecef);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.upload-progress-fill[b-u4vwb0zhv7] {
    height: 100%;
    background: var(--bs-primary, #0d6efd);
    border-radius: 3px;
    transition: width 0.15s ease;
}

.upload-progress-stats[b-u4vwb0zhv7] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, var(--df-text-muted));
    text-align: right;
}

@keyframes toast-slide-in-b-u4vwb0zhv7 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Move folder picker ===== */
.move-folder-picker[b-u4vwb0zhv7] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, var(--df-border));
    border-radius: 0.4rem;
    padding: 0.25rem 0;
}

.move-folder-item[b-u4vwb0zhv7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    margin: 1px 0.25rem;
    user-select: none;
    color: var(--bs-body-color, #212529);
    transition: background-color 0.1s ease;
}

.move-folder-item:hover[b-u4vwb0zhv7] {
    background-color: rgba(0, 0, 0, 0.04);
}

.move-folder-item.active[b-u4vwb0zhv7] {
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

.move-folder-item.disabled[b-u4vwb0zhv7] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .sortable-header:hover[b-u4vwb0zhv7] {
    color: var(--bs-body-color, var(--df-text));
}
html.nav-theme-dark .folder-name[b-u4vwb0zhv7] {
    color: var(--bs-body-color, var(--df-text));
}
html.nav-theme-dark .file-name-link[b-u4vwb0zhv7] {
    color: var(--bs-body-color, var(--df-text));
}
html.nav-theme-dark .empty-state-text[b-u4vwb0zhv7] {
    color: var(--bs-body-color, var(--df-text));
}
html.nav-theme-dark .context-menu-item[b-u4vwb0zhv7] {
    color: var(--bs-body-color, var(--df-text));
}
html.nav-theme-dark .upload-progress-header[b-u4vwb0zhv7] {
    color: var(--bs-body-color, var(--df-text));
}
html.nav-theme-dark .upload-progress-track[b-u4vwb0zhv7] {
    background: var(--bs-light, var(--df-border));
}
html.nav-theme-dark .move-folder-item[b-u4vwb0zhv7] {
    color: var(--bs-body-color, var(--df-text));
}
/* /Components/Pages/Home.razor.rz.scp.css */
.active-indicator[b-16utouovnm] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #28a745;
    animation: pulse 1.5s ease-in-out infinite;
}

@@keyframes pulse {
    0%[b-16utouovnm], 100%[b-16utouovnm] { opacity: 1; transform: scale(1); }
    50%[b-16utouovnm] { opacity: 0.5; transform: scale(1.3); }
}

.empty-state[b-16utouovnm] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--df-text-muted);
}

.empty-state-icon[b-16utouovnm] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Slim banner replacing the old birthday card */
.birthday-banner[b-16utouovnm] {
    background: #fff7e6;
    border-left: 4px solid #f59f00;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 0.95rem;
}

/* Stat strip: at-a-glance metrics across the top of the page */
.stat-strip[b-16utouovnm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.strip-stat[b-16utouovnm] {
    background: var(--df-surface);
    border-radius: 10px;
    border: 1px solid #e9ecef;
    padding: 1rem 0.75rem;
    text-align: center;
}

.strip-stat-val[b-16utouovnm] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.strip-stat-lbl[b-16utouovnm] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-top: 0.4rem;
}

.strip-stat.critical .strip-stat-val[b-16utouovnm] { color: var(--df-danger); }
.strip-stat.today    .strip-stat-val[b-16utouovnm] { color: #fd7e14; }
.strip-stat.week     .strip-stat-val[b-16utouovnm] { color: #0d6efd; }
.strip-stat.team     .strip-stat-val[b-16utouovnm] { color: #198754; }

@@media (max-width: 768px) {
    .stat-strip[b-16utouovnm] { grid-template-columns: repeat(2, 1fr); }
}

/* Scoped pill toolbar used inside card headers (e.g. My Time range switcher) */
.toolbar-pill[b-16utouovnm] {
    display: inline-flex;
    gap: 2px;
    background: #f1f3f5;
    border-radius: 999px;
    padding: 3px;
}

.toolbar-pill button[b-16utouovnm] {
    border: none;
    background: transparent;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    color: #495057;
    cursor: pointer;
}

.toolbar-pill button.active[b-16utouovnm] {
    background: var(--df-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: 500;
}

/* Team-working list inside the bento can grow with team size; cap the
   visible height so the bento stays balanced — scroll for the rest. */
.team-working-list[b-16utouovnm] {
    max-height: 320px;
    overflow-y: auto;
}

.summary-stats[b-16utouovnm] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--df-text-muted);
}

[b-16utouovnm] .user-group-header {
    background-color: #f0f4f8;
    border-left: 3px solid #0d6efd;
}

[b-16utouovnm] .user-group-header td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.9rem;
}

[b-16utouovnm] .subtotal-row {
    background-color: #fafbfc;
    border-top: 1px dashed var(--df-border);
}

[b-16utouovnm] .subtotal-row td {
    font-size: 0.875rem;
    color: #495057;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .birthday-banner[b-16utouovnm] {
    background: var(--df-warning-light);
}
html.nav-theme-dark .strip-stat[b-16utouovnm] {
    border: 1px solid var(--df-border);
}
html.nav-theme-dark .toolbar-pill[b-16utouovnm] {
    background: var(--df-bg);
}
html.nav-theme-dark .toolbar-pill button[b-16utouovnm] {
    color: var(--df-text-muted);
}
/* /Components/Pages/HomePage.razor.rz.scp.css */
/* The role-adaptive home: a single column of blocks, composed per user in HomeService.

   Everything here is built from --df-* tokens, so html.nav-theme-dark repaints it without a second
   set of rules. There is not a literal colour in this file, and there should never be one — a hex
   here ships white-on-white for every user with dark mode on.

   Phone-first: the column is the layout at every width, and the only thing the desktop block below
   changes is how wide the column is allowed to get. A home page that reflows into three columns on
   a laptop and one on a phone is two designs to keep working; this is one. */

.home[b-gqn5kkn3s9] {
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.home-head[b-gqn5kkn3s9] {
    margin-bottom: 14px;
}

.home-greet h3[b-gqn5kkn3s9] {
    margin: 0 0 2px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.home-greet p[b-gqn5kkn3s9] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--df-text-muted);
}

/* ── The block ──────────────────────────────────────────────────────────────
   One card per block. The tag names the feature the block speaks for, so it is always obvious
   where a number came from and which page will show more of it. */
.home-block[b-gqn5kkn3s9] {
    margin-bottom: 12px;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
}

.home-block-head[b-gqn5kkn3s9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--df-border);
}

.home-block-title[b-gqn5kkn3s9] {
    font-size: 0.9rem;
    font-weight: 600;
}

.home-block-tag[b-gqn5kkn3s9] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 50rem;
    border: 1px solid var(--df-border);
    background: var(--df-bg);
    color: var(--df-text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-block-body[b-gqn5kkn3s9] {
    padding: 12px 14px;
}

/* ── Shift ──────────────────────────────────────────────────────────────────
   The clock is the one block that renders when it has nothing to report, so it is also the one
   that has to look deliberate when idle rather than empty. */
.home-shift[b-gqn5kkn3s9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.home-shift-state[b-gqn5kkn3s9] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-shift-text[b-gqn5kkn3s9] {
    min-width: 0;
}

.home-shift-text b[b-gqn5kkn3s9] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

.home-shift-text span[b-gqn5kkn3s9] {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

/* 44px is the floor for a thumb, and this is the most-tapped control on the page. */
.home-shift-btn[b-gqn5kkn3s9] {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: 18px;
}

.home-shift-error[b-gqn5kkn3s9] {
    flex: 1 1 100%;
    padding: 8px 10px;
    border-radius: 0.5rem;
    background: var(--df-danger-light);
    color: var(--df-danger);
    font-size: 0.78rem;
}

/* ── Counters ───────────────────────────────────────────────────────────────
   Tabular figures so the numbers do not jitter as they change on a live page. */
.home-kpi[b-gqn5kkn3s9] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.home-kpi > div[b-gqn5kkn3s9] {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px 8px;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    background: var(--df-bg);
    text-align: center;
}

.home-kpi b[b-gqn5kkn3s9] {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.home-kpi span[b-gqn5kkn3s9] {
    display: block;
    margin-top: 5px;
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-text-muted);
}

/* The one counter that is allowed to shout, and only when it is non-zero. */
.home-kpi > div.hot[b-gqn5kkn3s9] {
    background: var(--df-danger-light);
    border-color: var(--df-danger-border);
}

.home-kpi > div.hot b[b-gqn5kkn3s9],
.home-kpi > div.hot span[b-gqn5kkn3s9] {
    color: var(--df-danger);
}

/* ── Rows ───────────────────────────────────────────────────────────────────
   Takes its rhythm from the --df-row-* bloc in app.css, the same one the ticket list, the timecard
   and My Notes use on a phone — that shared bloc is what stops five surfaces looking like five
   apps. */
.home-rows[b-gqn5kkn3s9] {
    margin: 0 -14px;
}

.home-row[b-gqn5kkn3s9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: var(--df-row-pad-y, 10px) 14px;
    min-height: var(--df-row-min-h, 54px);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--df-transition);
}

.home-row + .home-row[b-gqn5kkn3s9] {
    background-image: linear-gradient(var(--df-border), var(--df-border));
    background-size: calc(100% - var(--df-row-rule-inset, 14px) - 14px) 1px;
    background-position: calc(var(--df-row-rule-inset, 14px) + 14px) 0;
    background-repeat: no-repeat;
}

.home-row:hover[b-gqn5kkn3s9] {
    background-color: var(--df-primary-light);
}

.home-row-bd[b-gqn5kkn3s9] {
    flex: 1 1 auto;
    min-width: 0;
}

.home-row-ttl[b-gqn5kkn3s9] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--df-row-title, 0.9rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--df-text);
}

.home-row-meta[b-gqn5kkn3s9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--df-row-gap, 6px);
    row-gap: 3px;
    margin-top: 3px;
    font-size: var(--df-row-meta, 0.76rem);
    color: var(--df-text-muted);
    line-height: 1.35;
}

.home-row-meta .id[b-gqn5kkn3s9] {
    font-weight: 600;
}

.home-row-meta .sep[b-gqn5kkn3s9] {
    color: var(--df-border);
}

/* ── Glyphs, pills, priority ────────────────────────────────────────────────
   Semantic colour never travels alone here: every tone below is carried by a glyph or a dot and a
   word as well as a hue, so the meaning survives for anyone who cannot separate the colours. */
.home-gl[b-gqn5kkn3s9] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

.home-gl.g-danger[b-gqn5kkn3s9] { background: var(--df-danger-light);  border-color: var(--df-danger-border); }
.home-gl.g-warn[b-gqn5kkn3s9]   { background: var(--df-warning-light); border-color: var(--df-warning-border); }
.home-gl.g-primary[b-gqn5kkn3s9]{ background: var(--df-primary-light); border-color: var(--df-primary-border); }
.home-gl.g-ok[b-gqn5kkn3s9]     { background: var(--df-success-light); border-color: var(--df-success-border); }
.home-gl.g-quiet[b-gqn5kkn3s9]  { background: var(--df-bg);            border-color: var(--df-border); }

.home-pill[b-gqn5kkn3s9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 50rem;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.home-pill i[b-gqn5kkn3s9],
.home-prio i[b-gqn5kkn3s9] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.home-pill.p-danger[b-gqn5kkn3s9] { background: var(--df-danger-light);  border-color: var(--df-danger-border);  color: var(--df-danger); }
.home-pill.p-warn[b-gqn5kkn3s9]   { background: var(--df-warning-light); border-color: var(--df-warning-border); color: var(--df-warning); }

.home-prio[b-gqn5kkn3s9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.home-prio.t-danger[b-gqn5kkn3s9] { color: var(--df-danger); }
.home-prio.t-warn[b-gqn5kkn3s9]   { color: var(--df-warning); }
.home-prio.t-info[b-gqn5kkn3s9]   { color: var(--df-text-muted); }
.home-prio.t-quiet[b-gqn5kkn3s9]  { color: var(--df-text-muted); }

.home-inline-note[b-gqn5kkn3s9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

/* ── A block's way out to its own page ──────────────────────────────────── */
.home-more[b-gqn5kkn3s9] {
    display: inline-block;
    margin-top: 10px;
    color: var(--df-primary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
}

.home-more:hover[b-gqn5kkn3s9] {
    text-decoration: underline;
}

/* Single-line count blocks (Loop, Alerts) — the whole block is the link. */
.home-count[b-gqn5kkn3s9] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.home-count-bd b[b-gqn5kkn3s9] {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
}

.home-count-bd span[b-gqn5kkn3s9] {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    color: var(--df-primary);
    font-weight: 500;
}

/* ── Empty and loading ──────────────────────────────────────────────────────
   "You're clear" is a real screen, not the absence of one. A home page that renders blank when the
   work is done reads as broken; this reads as finished, which is the whole point of blocks that
   skip themselves. */
.home-empty[b-gqn5kkn3s9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 44px 26px;
    text-align: center;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    box-shadow: var(--df-card-shadow);
}

.home-empty-mark[b-gqn5kkn3s9] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--df-success-border);
    border-radius: 50%;
    background: var(--df-success-light);
    color: var(--df-success);
    font-size: 1.7rem;
}

.home-empty b[b-gqn5kkn3s9] {
    font-size: 1.15rem;
    font-weight: 600;
}

.home-empty p[b-gqn5kkn3s9] {
    margin: 0;
    max-width: 42ch;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--df-text-muted);
}

.home-loading[b-gqn5kkn3s9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-loading .loading-placeholder[b-gqn5kkn3s9] {
    height: 128px;
    border-radius: var(--df-radius);
}

/* ── Phone ──────────────────────────────────────────────────────────────────
   Below 641px the cards go edge to edge: a 14px gutter each side of a 390px screen is 7% of the
   width spent on a border that says nothing. The rows keep their own padding, so nothing touches
   the glass. */
@media (max-width: 640.98px) {
    .home-block[b-gqn5kkn3s9] {
        margin-inline: -12px;
        border-inline: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .home-greet h3[b-gqn5kkn3s9] {
        font-size: 1.35rem;
    }

    /* Stacked, so neither the state nor the button gets squeezed at 390px. */
    .home-shift-btn[b-gqn5kkn3s9] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Loop/LoopPage.razor.rz.scp.css */
/* Full page. Four columns: filters | list | thread | tagged items.
   The panel is the primary surface; this exists for deep links, for keyboard-heavy use, and
   because a 424px panel is the wrong place to read a forty-message thread. */

.lpg[b-es37yde5bb] {
    display: flex;
    height: calc(100vh - 92px);
    min-height: 480px;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
}

/* ── rail ── */

.lpg-rail[b-es37yde5bb] {
    width: 194px;
    flex: none;
    border-right: 1px solid var(--df-border);
    padding: 12px 10px;
    background: var(--df-bg);
    overflow-y: auto;
}

.lpg-g[b-es37yde5bb] {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--df-text-muted);
    padding: 14px 8px 5px;
}

.lpg-r[b-es37yde5bb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--df-text);
    transition: background var(--df-transition);
}

.lpg-r:hover[b-es37yde5bb] {
    background: #eef2f7;
}

.lpg-r-on[b-es37yde5bb] {
    background: var(--df-primary);
    color: #fff;
}

.lpg-n[b-es37yde5bb] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--df-text-muted);
}

.lpg-r-on .lpg-n[b-es37yde5bb] {
    color: #e0e7ff;
}

/* ── list ── */

.lpg-list[b-es37yde5bb] {
    width: 330px;
    flex: none;
    border-right: 1px solid var(--df-border);
    display: flex;
    flex-direction: column;
}

.lpg-search[b-es37yde5bb] {
    flex: none;
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--df-border);
}

.lpg-search i[b-es37yde5bb] {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--df-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.lpg-search input[b-es37yde5bb] {
    width: 100%;
    /* No global border-box reset in app.css — without this the input overflows the column
       and slides under the thread pane. */
    box-sizing: border-box;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    background: var(--df-bg);
    font-size: 0.85rem;
}

.lpg-search input:focus[b-es37yde5bb] {
    outline: none;
    border-color: var(--df-primary);
    background: var(--df-surface);
}

.lpg-rows[b-es37yde5bb] {
    flex: 1;
    overflow-y: auto;
}

.lpg-row[b-es37yde5bb] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    position: relative;
    transition: background var(--df-transition);
}

.lpg-row:hover[b-es37yde5bb] {
    background: var(--df-bg);
}

.lpg-row-unread[b-es37yde5bb] {
    background: #fbfcff;
}

.lpg-row-unread[b-es37yde5bb]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--df-primary);
}

.lpg-row-sel[b-es37yde5bb] {
    background: var(--df-primary-light);
}

.lpg-rb[b-es37yde5bb] {
    min-width: 0;
    flex: 1;
}

.lpg-rt[b-es37yde5bb] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.lpg-subj[b-es37yde5bb] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.lpg-row-unread .lpg-subj[b-es37yde5bb] {
    font-weight: 700;
}

.lpg-time[b-es37yde5bb] {
    font-size: 0.7rem;
    color: var(--df-text-muted);
    flex: none;
}

.lpg-prev[b-es37yde5bb] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpg-chips[b-es37yde5bb] {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.lpg-ext[b-es37yde5bb] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--df-warning);
}

.lpg-pill[b-es37yde5bb] {
    flex: none;
    align-self: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--df-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.lpg-pill-men[b-es37yde5bb] {
    background: var(--df-danger);
}

/* ── thread column ── */

.lpg-thread[b-es37yde5bb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lpg-placeholder[b-es37yde5bb] {
    margin: auto;
    text-align: center;
    color: var(--df-text-muted);
    padding: 40px 20px;
}

.lpg-placeholder i[b-es37yde5bb] {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    opacity: .4;
}

.lpg-placeholder p[b-es37yde5bb] {
    font-size: 0.85rem;
    margin: 0 0 14px;
}

.lpg-primary[b-es37yde5bb] {
    border: none;
    background: var(--df-primary);
    color: #fff;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--df-transition);
}

.lpg-primary:hover[b-es37yde5bb] {
    background: var(--df-primary-hover);
}

/* ── right rail ── */

.lpg-side[b-es37yde5bb] {
    width: 272px;
    flex: none;
    border-left: 1px solid var(--df-border);
    background: var(--df-bg);
    overflow-y: auto;
    padding: 14px;
}

.lpg-sh[b-es37yde5bb] {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--df-text-muted);
    margin: 0 0 8px;
}

.lpg-sh:not(:first-child)[b-es37yde5bb] {
    margin-top: 20px;
}

.lpg-none[b-es37yde5bb] {
    font-size: 0.76rem;
    color: var(--df-text-muted);
    line-height: 1.5;
    margin: 0;
}

.lpg-lk[b-es37yde5bb] {
    display: block;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 9px;
    padding: 9px 10px;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--df-card-shadow);
    transition: border-color var(--df-transition);
}

.lpg-lk:hover[b-es37yde5bb] {
    border-color: var(--df-primary);
    text-decoration: none;
}

.lpg-lk-t[b-es37yde5bb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--df-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}

.lpg-lk-n[b-es37yde5bb] {
    font-size: 0.81rem;
    font-weight: 600;
    line-height: 1.35;
}

.lpg-lk-s[b-es37yde5bb] {
    font-size: 0.73rem;
    color: var(--df-text-muted);
    margin-top: 4px;
}

.lpg-ppl[b-es37yde5bb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.lpg-nm[b-es37yde5bb] {
    font-size: 0.79rem;
    font-weight: 500;
}

.lpg-rl[b-es37yde5bb] {
    font-size: 0.7rem;
    color: var(--df-text-muted);
}

.lpg-deliv[b-es37yde5bb] {
    font-size: 0.75rem;
    color: var(--df-text-muted);
    line-height: 1.8;
}

.lpg-i-primary[b-es37yde5bb] {
    color: var(--df-primary);
}

.lpg-i-warn[b-es37yde5bb] {
    color: var(--df-warning);
}

.lpg-empty[b-es37yde5bb] {
    padding: 40px 20px;
    text-align: center;
    color: var(--df-text-muted);
    font-size: .82rem;
}

.lpg-empty i[b-es37yde5bb] {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 8px;
    opacity: .5;
}

/* Below ~1200px the right rail is the first thing to go — the thread matters more than the
   metadata beside it. */
@media (max-width: 1200px) {
    .lpg-side[b-es37yde5bb] {
        display: none;
    }
}

@media (max-width: 900px) {
    .lpg-rail[b-es37yde5bb] {
        display: none;
    }
}

/* ── Phone: one column at a time ─────────────────────────────────────────────
   A 330px list beside a thread does not fit in 390px, and squeezing both gives
   two unusable columns instead of one usable one. So the page shows the list,
   or the conversation — never both — and the thread view's back arrow is what
   returns you. Same pattern the Loop panel and every phone mail client use. */
@media (max-width: 640.98px) {
    .lpg[b-es37yde5bb] {
        /* Fills what is left under the app's top bar rather than a fixed desktop height.
           dvh so Safari's collapsing toolbar doesn't leave the composer under the fold. */
        height: calc(100dvh - 92px);
        min-height: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .lpg-list[b-es37yde5bb] {
        width: 100%;
        border-right: 0;
    }

    /* Reading a conversation: the list steps aside. */
    .lpg.lpg-reading .lpg-list[b-es37yde5bb] {
        display: none;
    }

    /* Not reading one: the empty "pick a conversation" pane would be the whole screen. */
    .lpg:not(.lpg-reading) .lpg-thread[b-es37yde5bb] {
        display: none;
    }

    /* 16px, or Safari zooms the page in the moment this takes focus and never zooms back. The
       app-wide rule in app.css cannot reach it — `.lpg-search input` is the more specific
       selector, so the size has to be restated where it was set. */
    .lpg-search input[b-es37yde5bb] {
        font-size: 16px;
    }
}

/* The back arrow only means something when the list is off screen. */
@media (min-width: 641px) {
    .lpg-thread[b-es37yde5bb]  .ct-back {
        display: none;
    }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .lpg-r:hover[b-es37yde5bb] {
    background: var(--df-primary-light);
}
html.nav-theme-dark .lpg-r-on .lpg-n[b-es37yde5bb] {
    color: var(--df-primary-light);
}
html.nav-theme-dark .lpg-row[b-es37yde5bb] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .lpg-row-unread[b-es37yde5bb] {
    background: var(--df-primary-light);
}
/* /Components/Pages/Personalities/PersonalityTest.razor.rz.scp.css */
.pt-hero[b-8gkskl2n5m] {
    padding: .25rem 0 0;
}

.pt-temp-card[b-8gkskl2n5m] {
    border: 1px solid #e9ecef;
    border-left-width: 4px;
    transition: transform .15s, box-shadow .15s;
}

    .pt-temp-card:hover[b-8gkskl2n5m] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    }

.pt-temp-sanguine[b-8gkskl2n5m] {
    border-left-color: #ffc107;
}

.pt-temp-choleric[b-8gkskl2n5m] {
    border-left-color: var(--df-danger);
}

.pt-temp-melancholic[b-8gkskl2n5m] {
    border-left-color: #0d6efd;
}

.pt-temp-phlegmatic[b-8gkskl2n5m] {
    border-left-color: #198754;
}

.pt-temp-dot[b-8gkskl2n5m] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-bottom: .5rem;
    display: inline-block;
}

.pt-option[b-8gkskl2n5m] {
    text-align: left;
    padding: 1rem 1.25rem;
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    transition: all .12s;
    border-radius: .5rem;
    width: 100%;
}

    .pt-option:hover[b-8gkskl2n5m] {
        border-color: #0d6efd;
        background: #f8faff;
    }

.pt-option-selected[b-8gkskl2n5m],
.pt-option-selected:hover[b-8gkskl2n5m] {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #fff;
}

    .pt-option-selected .text-muted[b-8gkskl2n5m] {
        color: rgba(255, 255, 255, .8) !important;
    }

.pt-option-letter[b-8gkskl2n5m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e9ecef;
    font-weight: 600;
    margin-right: .85rem;
    flex-shrink: 0;
}

.pt-option-selected .pt-option-letter[b-8gkskl2n5m] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.pt-review-icon[b-8gkskl2n5m] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 2.25rem;
    line-height: 72px;
    display: inline-block;
    color: #fff;
    font-weight: 700;
}

.pt-review-ok[b-8gkskl2n5m] {
    background: #198754;
}

.pt-review-warn[b-8gkskl2n5m] {
    background: #ffc107;
    color: #212529;
}

.pt-tabs[b-8gkskl2n5m] {
    border-bottom: 2px solid #e9ecef;
}

    .pt-tabs .nav-link[b-8gkskl2n5m] {
        border: none;
        color: var(--df-text-muted);
        font-weight: 500;
        padding: .7rem 1.15rem;
        background: none;
    }

        .pt-tabs .nav-link:hover[b-8gkskl2n5m] {
            color: #0d6efd;
        }

        .pt-tabs .nav-link.active[b-8gkskl2n5m] {
            color: #0d6efd;
            border-bottom: 2px solid #0d6efd;
            margin-bottom: -2px;
            background: none;
        }

.pt-tab-panel .card[b-8gkskl2n5m] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.pt-hero-card[b-8gkskl2n5m] {
    border: none;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .pt-temp-card[b-8gkskl2n5m] {
    border: 1px solid var(--df-border);
}
html.nav-theme-dark .pt-option:hover[b-8gkskl2n5m] {
    background: var(--df-surface);
}
html.nav-theme-dark .pt-option-letter[b-8gkskl2n5m] {
    background: var(--df-border);
}
html.nav-theme-dark .pt-tabs[b-8gkskl2n5m] {
    border-bottom: 2px solid var(--df-border);
}
html.nav-theme-dark .pt-hero-card[b-8gkskl2n5m] {
    background: linear-gradient(135deg, var(--df-bg) 0%, var(--df-surface) 100%);
}
/* /Components/Pages/Products/ProductDocumentation.razor.rz.scp.css */
/* Product documentation editor — three-pane authoring surface.
   Uses the app's --df-* tokens so it matches DevFlow chrome. */

.docs-shell[b-w1lsenot80] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
    min-height: 480px;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    overflow: hidden;
    background: var(--df-surface);
    box-shadow: var(--df-card-shadow);
}

/* ── top bar ── */
.docs-topbar[b-w1lsenot80] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--df-border);
    flex-shrink: 0;
}
.docs-crumb[b-w1lsenot80] { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.875rem; }
.docs-crumb-link[b-w1lsenot80] { color: var(--df-text-muted); text-decoration: none; }
.docs-crumb-link:hover[b-w1lsenot80] { color: var(--df-primary); }
.docs-crumb-sep[b-w1lsenot80] { color: var(--df-border); font-size: 0.72rem; }
.docs-crumb-prod[b-w1lsenot80] { color: var(--df-text-muted); font-weight: 500; }
.docs-crumb-here[b-w1lsenot80] { color: var(--df-text); font-weight: 600; }
.docs-unsaved[b-w1lsenot80] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--df-warning); font-weight: 500; }
.docs-dot[b-w1lsenot80] { width: 7px; height: 7px; border-radius: 50%; background: var(--df-warning); }

/* ── panes ── */
/* rail | editor (drag-resizable, defaults to a 50/50 split) | handle | preview */
.docs-panes[b-w1lsenot80] { display: grid; grid-template-columns: 244px var(--docs-editor-w, 1fr) 6px 1fr; flex: 1; min-height: 0; }

/* editor/preview drag splitter */
.docs-split-handle[b-w1lsenot80] { position: relative; cursor: col-resize; background: transparent; }
.docs-split-handle[b-w1lsenot80]::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 1px; background: var(--df-border); transition: background var(--df-transition), width var(--df-transition);
}
.docs-split-handle:hover[b-w1lsenot80]::before,
.docs-split-handle.dragging[b-w1lsenot80]::before { width: 3px; background: var(--df-primary); }

/* left rail */
.docs-rail[b-w1lsenot80] { display: flex; flex-direction: column; background: var(--df-bg); border-right: 1px solid var(--df-border); min-height: 0; }
.docs-rail-head[b-w1lsenot80] { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0.85rem 0.5rem; }
.docs-eyebrow[b-w1lsenot80] { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--df-text-muted); }
.docs-list[b-w1lsenot80] { flex: 1; overflow-y: auto; padding: 0.25rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
.docs-item[b-w1lsenot80] {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.6rem; border-radius: 0.5rem; cursor: pointer;
    color: var(--df-text-muted); position: relative; user-select: none;
}
.docs-item:hover[b-w1lsenot80] { background: var(--df-surface); }
.docs-item.active[b-w1lsenot80] { background: var(--df-surface); color: var(--df-text); box-shadow: inset 0 0 0 1px var(--df-border); }
.docs-item.active[b-w1lsenot80]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--df-primary); }
.docs-item.muted .docs-item-title[b-w1lsenot80] { color: var(--df-text-muted); font-style: italic; }
.docs-item-title[b-w1lsenot80] { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-grip[b-w1lsenot80] { color: var(--df-text-muted); opacity: 0; cursor: grab; transition: opacity var(--df-transition); }
.docs-item:hover .docs-grip[b-w1lsenot80] { opacity: 0.6; }
.docs-ai-tag[b-w1lsenot80] { color: var(--df-success); font-size: 0.875rem; }
.docs-ai-tag.muted[b-w1lsenot80] { color: var(--df-text-muted); opacity: 0.5; }
.docs-empty[b-w1lsenot80] { padding: 1.25rem 0.75rem; text-align: center; color: var(--df-text-muted); font-size: 0.78rem; }
.docs-rail-foot[b-w1lsenot80] { padding: 0.5rem; border-top: 1px solid var(--df-border); }
.docs-newbtn[b-w1lsenot80] { border-style: dashed; }
.docs-legend[b-w1lsenot80] { padding: 0.6rem 0.85rem; font-size: 0.72rem; color: var(--df-text-muted); border-top: 1px solid var(--df-border); }
.docs-legend .bi[b-w1lsenot80] { color: var(--df-success); }

/* editor + preview columns */
.docs-col[b-w1lsenot80] { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* divider between editor and preview is the drag handle (.docs-split-handle) */
.docs-preview[b-w1lsenot80] { background: #fcfcfd; }
.docs-colhead[b-w1lsenot80] { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--df-border); min-height: 46px; flex-shrink: 0; }
.docs-title-input[b-w1lsenot80] { border: none; outline: none; background: transparent; font-size: 1.125rem; font-weight: 600; color: var(--df-text); width: 100%; padding: 0; }
.docs-title-input[b-w1lsenot80]::placeholder { color: var(--df-text-muted); font-weight: 500; }

/* toolbar */
.docs-toolbar[b-w1lsenot80] { display: flex; align-items: center; gap: 2px; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--df-border); flex-shrink: 0; }
.docs-tool[b-w1lsenot80] { width: 30px; height: 30px; border: none; background: transparent; border-radius: 0.4rem; color: var(--df-text-muted); cursor: pointer; display: grid; place-items: center; font-size: 0.9rem; }
.docs-tool:hover[b-w1lsenot80] { background: var(--df-bg); color: var(--df-text); }
.docs-tool-danger:hover[b-w1lsenot80] { background: var(--df-danger-light); color: var(--df-danger); }
.docs-tdiv[b-w1lsenot80] { width: 1px; height: 18px; background: var(--df-border); margin: 0 5px; }

/* textarea */
.docs-textarea[b-w1lsenot80] {
    flex: 1; border: none; outline: none; resize: none;
    padding: 1rem 1.1rem; min-height: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem; line-height: 1.7; color: var(--df-text);
    background: var(--df-surface);
}
.docs-textarea[b-w1lsenot80]::placeholder { color: var(--df-text-muted); }

/* preview */
.docs-preview-body[b-w1lsenot80] { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.docs-preview-body[b-w1lsenot80]  .rendered-html { max-width: 640px; }

/* per-doc AI switch */
.docs-aiswitch[b-w1lsenot80] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--df-text-muted); margin: 0; cursor: pointer; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--df-border); }
.docs-aiswitch .form-check-input[b-w1lsenot80] { margin: 0; cursor: pointer; }
.docs-aiswitch.on[b-w1lsenot80] { color: var(--df-success); background: var(--df-success-light); border-color: transparent; }
.docs-aiswitch.on .form-check-input:checked[b-w1lsenot80] { background-color: var(--df-success); border-color: var(--df-success); }

/* blank state */
.docs-blank[b-w1lsenot80] { grid-column: 2 / -1; display: grid; place-items: center; padding: 2rem; }
.docs-blank-icon[b-w1lsenot80] { font-size: 2.5rem; color: var(--df-border); display: block; margin-bottom: 0.75rem; }

/* drag feedback (from sortable-interop) */
.docs-item.sortable-ghost[b-w1lsenot80] { opacity: 0.4; }
.docs-item.sortable-chosen[b-w1lsenot80] { box-shadow: inset 0 0 0 1px var(--df-primary); }

@media (max-width: 992px) {
    .docs-panes[b-w1lsenot80] { grid-template-columns: 1fr; grid-auto-rows: min-content; }
    .docs-shell[b-w1lsenot80] { height: auto; }
    .docs-col[b-w1lsenot80], .docs-rail[b-w1lsenot80] { min-height: 320px; }
    .docs-blank[b-w1lsenot80] { grid-column: 1; }
    .docs-split-handle[b-w1lsenot80] { display: none; }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .docs-preview[b-w1lsenot80] {
    background: var(--df-surface);
}
/* /Components/Pages/Projects/ProjectList.razor.rz.scp.css */
/* Styled like an anchor but rendered as a <span> when the user prefers
   the side-panel preview — keeps the click handler but eliminates the
   <a href> so the browser can't race us with a real navigation. */
[b-l9cgw0a05r] .project-row-link-panel {
    cursor: pointer;
    color: var(--bs-link-color, #0d6efd);
}

[b-l9cgw0a05r] .project-row-link-panel:hover {
    text-decoration: underline;
}
/* /Components/Pages/PullRequests/PullRequestReview.razor.rz.scp.css */
.cursor-pointer[b-s9zc5azq0u] {
    cursor: pointer;
}

.diff-container[b-s9zc5azq0u] {
    border-top: 1px solid var(--bs-border-color);
    overflow-x: auto;
}

.diff-wrapper[b-s9zc5azq0u] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

.diff-header[b-s9zc5azq0u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    font-family: inherit;
    font-size: 0.78rem;
}

.diff-header-left[b-s9zc5azq0u],
.diff-header-right[b-s9zc5azq0u] {
    padding: 6px 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
}

.diff-header-right[b-s9zc5azq0u] {
    border-left: 2px solid var(--bs-border-color);
}

.diff-body[b-s9zc5azq0u] {
    max-height: 600px;
    overflow-y: auto;
}

.diff-row[b-s9zc5azq0u] {
    display: grid;
    grid-template-columns: 45px 1fr 45px 1fr;
    min-height: 1.5em;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.diff-line-num[b-s9zc5azq0u] {
    padding: 0 6px;
    text-align: right;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    user-select: none;
    border-right: 1px solid var(--bs-border-color);
    font-size: 0.72rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.diff-line-num-right[b-s9zc5azq0u] {
    border-left: 2px solid var(--bs-border-color);
}

.diff-line-content[b-s9zc5azq0u] {
    padding: 0 8px;
    white-space: pre;
    overflow-x: auto;
    line-height: 1.5;
}

/* Unchanged */
.diff-unchanged .diff-line-content[b-s9zc5azq0u] {
    background: transparent;
}

/* Removed */
.diff-removed .diff-line-content-left[b-s9zc5azq0u] {
    background: rgba(255, 100, 100, 0.15);
    color: #c0392b;
}

.diff-removed .diff-line-num-left[b-s9zc5azq0u] {
    background: rgba(255, 100, 100, 0.1);
}

.diff-removed .diff-line-content-right[b-s9zc5azq0u] {
    background: rgba(0, 0, 0, 0.02);
}

/* Added */
.diff-added .diff-line-content-right[b-s9zc5azq0u] {
    background: rgba(100, 255, 100, 0.15);
    color: #27ae60;
}

.diff-added .diff-line-num-right[b-s9zc5azq0u] {
    background: rgba(100, 255, 100, 0.1);
}

.diff-added .diff-line-content-left[b-s9zc5azq0u] {
    background: rgba(0, 0, 0, 0.02);
}

/* Modified (side-by-side) */
.diff-modified .diff-line-content-left[b-s9zc5azq0u] {
    background: rgba(255, 100, 100, 0.12);
}

.diff-modified .diff-line-content-right[b-s9zc5azq0u] {
    background: rgba(100, 255, 100, 0.12);
}

.diff-modified .diff-line-num-left[b-s9zc5azq0u] {
    background: rgba(255, 100, 100, 0.08);
}

.diff-modified .diff-line-num-right[b-s9zc5azq0u] {
    background: rgba(100, 255, 100, 0.08);
}

/* Scrollbar minimap */
.diff-scroll-container[b-s9zc5azq0u] {
    position: relative;
    display: flex;
}

.diff-scroll-container .diff-body[b-s9zc5azq0u] {
    flex: 1;
    min-width: 0;
}

.diff-minimap[b-s9zc5azq0u] {
    position: relative;
    width: 10px;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    border-left: 1px solid var(--bs-border-color);
}

.minimap-marker[b-s9zc5azq0u] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 1px;
}

.minimap-marker-added[b-s9zc5azq0u] {
    background: rgba(40, 167, 69, 0.8);
}

.minimap-marker-removed[b-s9zc5azq0u] {
    background: rgba(220, 53, 69, 0.8);
}

/* Commits split layout */
.commits-split-layout[b-s9zc5azq0u] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
    height: calc(100vh - 320px);
    min-height: 500px;
}

.commits-list-panel[b-s9zc5azq0u] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    min-height: 0;
}

.commits-list-header[b-s9zc5azq0u] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.commits-list-body[b-s9zc5azq0u] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.commit-item[b-s9zc5azq0u] {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background-color 0.1s;
}

.commit-item:hover[b-s9zc5azq0u] {
    background: var(--bs-tertiary-bg);
}

.commit-item-selected[b-s9zc5azq0u] {
    background: var(--bs-primary) !important;
    color: white;
}

.commit-message[b-s9zc5azq0u] {
    font-size: 0.78rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.commits-detail-panel[b-s9zc5azq0u] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bs-body-bg);
}

.commits-detail-header[b-s9zc5azq0u] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.commits-detail-body[b-s9zc5azq0u] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.commit-file-item[b-s9zc5azq0u] {
    padding: 6px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background-color 0.1s;
}

.commit-file-item:hover[b-s9zc5azq0u] {
    background: var(--bs-tertiary-bg);
}

/* ── Merge Conflict Resolution ── */

.conflicts-split-layout[b-s9zc5azq0u] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
    height: calc(100vh - 320px);
    min-height: 500px;
}

.conflicts-list-panel[b-s9zc5azq0u] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    min-height: 0;
}

.conflicts-list-header[b-s9zc5azq0u] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.conflicts-list-body[b-s9zc5azq0u] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.conflict-file-item[b-s9zc5azq0u] {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background-color 0.1s;
}

.conflict-file-item:hover[b-s9zc5azq0u] {
    background: var(--bs-tertiary-bg);
}

.conflict-file-item-selected[b-s9zc5azq0u] {
    background: var(--bs-primary) !important;
    color: white;
}

.conflict-file-item-selected .text-muted[b-s9zc5azq0u],
.conflict-file-item-selected .conflict-file-dir[b-s9zc5azq0u] {
    color: rgba(255,255,255,0.7) !important;
}

.conflict-file-resolved[b-s9zc5azq0u] {
    opacity: 0.55;
}

.conflict-file-resolved:hover[b-s9zc5azq0u] {
    opacity: 0.85;
}

.conflict-file-name[b-s9zc5azq0u] {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conflict-file-dir[b-s9zc5azq0u] {
    font-size: 0.65rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conflicts-detail-panel[b-s9zc5azq0u] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bs-body-bg);
}

.conflicts-detail-header[b-s9zc5azq0u] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.conflicts-detail-body[b-s9zc5azq0u] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.conflict-diff-toolbar[b-s9zc5azq0u] {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.78rem;
}

.conflict-editor-toolbar[b-s9zc5azq0u] {
    background: rgba(25, 135, 84, 0.08);
    border-bottom: 1px solid rgba(25, 135, 84, 0.3);
    font-size: 0.78rem;
}

.conflict-editor-container[b-s9zc5azq0u] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.conflict-editor-textarea[b-s9zc5azq0u] {
    width: 100%;
    min-height: 400px;
    border: none;
    outline: none;
    resize: none;
    padding: 12px 16px;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    tab-size: 4;
}

.conflict-editor-textarea:focus[b-s9zc5azq0u] {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(25, 135, 84, 0.25);
}

.ai-merge-suggestion[b-s9zc5azq0u] {
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 0.375rem;
    padding: 12px 16px;
    background: rgba(255, 193, 7, 0.05);
}

.ai-suggestion-content[b-s9zc5azq0u] {
    line-height: 1.6;
    overflow-x: auto;
}

.ai-suggestion-content pre[b-s9zc5azq0u] {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
    font-size: 0.78rem;
}

.ai-suggestion-content code[b-s9zc5azq0u] {
    font-size: 0.78rem;
}
/* /Components/Pages/Reports/PayrollReport.razor.rz.scp.css */
/* Payroll report table */
.payroll-section[b-q94fed1y26] {
    margin-bottom: 2rem;
    border: 1px solid var(--df-border);
    border-radius: 4px;
    overflow: hidden;
}

.payroll-table[b-q94fed1y26] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.payroll-table td[b-q94fed1y26],
.payroll-table th[b-q94fed1y26] {
    padding: 0.25rem 0.75rem;
    vertical-align: middle;
}

.payroll-user-header[b-q94fed1y26] {
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem !important;
    border-bottom: none;
    background-color: var(--df-surface);
}

.payroll-col-header th[b-q94fed1y26] {
    font-weight: 700;
    font-size: 0.78rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.35rem !important;
}

.payroll-table tbody tr[b-q94fed1y26] {
    border-bottom: 1px solid #f0f0f0;
}

.payroll-date[b-q94fed1y26] {
    font-style: italic;
    color: #555;
}

.payroll-totals-row td[b-q94fed1y26] {
    border-top: 2px solid #333;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

.payroll-print-header[b-q94fed1y26] {
    display: none;
}

/* ---- Dark theme overrides ---- */
html.nav-theme-dark .payroll-section[b-q94fed1y26] {
    border-color: var(--df-text);
    background-color: #0f172a;
}

html.nav-theme-dark .payroll-user-header[b-q94fed1y26] {
    background-color: #111c33;
    color: #f1f5f9;
}

html.nav-theme-dark .payroll-col-header th[b-q94fed1y26] {
    color: #cbd5e1;
    border-bottom-color: #334155;
}

html.nav-theme-dark .payroll-table tbody tr[b-q94fed1y26] {
    border-bottom-color: var(--df-text);
}

html.nav-theme-dark .payroll-table tbody tr:hover[b-q94fed1y26] {
    background-color: rgba(255,255,255,0.04);
}

html.nav-theme-dark .payroll-table td[b-q94fed1y26] {
    color: var(--df-border);
}

html.nav-theme-dark .payroll-date[b-q94fed1y26] {
    color: #94a3b8;
}

html.nav-theme-dark .payroll-totals-row td[b-q94fed1y26] {
    border-top-color: #cbd5e1;
    color: #f1f5f9;
}

@media print {
    .payroll-print-header[b-q94fed1y26] {
        display: block;
        text-align: center;
        margin-bottom: 1rem;
    }

    .payroll-print-header h3[b-q94fed1y26] {
        margin-bottom: 0.25rem;
    }

    .payroll-print-header p[b-q94fed1y26] {
        margin: 0;
        font-size: 0.9rem;
        color: #666;
    }

    .no-print[b-q94fed1y26] {
        display: none !important;
    }

    /* Hide Blazor layout chrome */
    [b-q94fed1y26] .sidebar,
    [b-q94fed1y26] .top-row,
    [b-q94fed1y26] .navbar-toggler,
    [b-q94fed1y26] #blazor-error-ui {
        display: none !important;
    }

    [b-q94fed1y26] .page {
        display: block !important;
    }

    [b-q94fed1y26] main {
        background-color: var(--df-surface) !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    [b-q94fed1y26] article {
        padding: 0 !important;
    }

    .payroll-section[b-q94fed1y26] {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
        margin-bottom: 1rem !important;
    }

    .payroll-totals-row td[b-q94fed1y26] {
        border-top: 2px solid #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Pages/Shortcuts/Shortcuts.razor.rz.scp.css */
/* The Shortcuts page: a rail of groups on the left, the selected group's tiles on the right. */

.sc-hint[b-ahrhoc3ynp] {
    margin: 0.75rem 0.25rem 0;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.sc-filter[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 22rem;
    margin-bottom: 0.75rem;
}

.sc-nomatch[b-ahrhoc3ynp] {
    font-size: 0.875rem;
    color: var(--df-text-muted);
    padding: 0.75rem 0.5rem;
}

/* The rail and the pane scroll independently: the split is pinned to what's left of the
   viewport, and each side overflows inside itself rather than moving the whole page.
   --sc-chrome is everything above and below it — the 3.5rem top bar, the content's 1.5rem
   padding, the page header, and the hint underneath. */
.sc-split[b-ahrhoc3ynp] {
    --sc-chrome: 15rem;
    display: flex;
    align-items: stretch;
    gap: 0.875rem;
    height: calc(100vh - var(--sc-chrome));
    min-height: 20rem;
}

/* The filter row sits between the header and the split when it's open. */
.sc-split-filtered[b-ahrhoc3ynp] {
    height: calc(100vh - var(--sc-chrome) - 2.75rem);
}

/* ── Left rail ── */

.sc-rail[b-ahrhoc3ynp] {
    flex: 0 0 15rem;
    /* Without this a long group name would widen the rail past its basis, since a flex item's
       automatic minimum is its min-content width. */
    min-width: 0;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
    /* Label fixed at the top, list scrolling, "New group" fixed at the bottom. */
    display: flex;
    flex-direction: column;
}

.sc-rail-scroll[b-ahrhoc3ynp] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.sc-rail-lbl[b-ahrhoc3ynp] {
    flex: none;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--df-text-muted);
    padding: 0.625rem 0.75rem 0.25rem;
}

/* The row wraps the button so the whole strip is a drop target, including the move arrows. */
.sc-rail-row[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    border-left: 2px solid transparent;
}

.sc-rail-row:hover[b-ahrhoc3ynp] {
    background: var(--df-bg);
}

.sc-rail-drop[b-ahrhoc3ynp] {
    background: var(--df-primary-light);
    outline: 1px dashed var(--df-primary);
    outline-offset: -2px;
}

.sc-rail-item[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    /* A <button> sizes to its content even as a flex container, so without this the standalone
       entries (All shortcuts) would hug their text and their counts wouldn't line up. */
    width: 100%;
    min-width: 0;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    color: var(--df-text);
    font-family: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

/* Only the standalone entries (All / Ungrouped) hover on their own — inside a row the row does it. */
.sc-rail > .sc-rail-item:hover[b-ahrhoc3ynp] {
    background: var(--df-bg);
}

.sc-rail-item.sc-on[b-ahrhoc3ynp] {
    background: var(--df-primary-light);
    border-left-color: var(--df-primary);
    color: var(--df-primary);
    font-weight: 500;
}

.sc-rail-name[b-ahrhoc3ynp] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-rail-n[b-ahrhoc3ynp] {
    font-size: 0.65rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.sc-rail-item.sc-on .sc-rail-n[b-ahrhoc3ynp] {
    color: var(--df-primary);
}

.sc-rail-pin[b-ahrhoc3ynp] {
    font-size: 0.65rem;
    line-height: 1;
    color: var(--df-warning);
    flex: none;
}

/* Reorder arrows sit on the row and only appear on hover, so the rail stays quiet at rest.
   They take the count's place rather than squeezing in beside it — stacked in a 16px column
   the two of them are too small to hit. */
.sc-rail-move[b-ahrhoc3ynp] {
    display: none;
    align-items: center;
    gap: 0.1rem;
    padding-right: 0.375rem;
}

.sc-rail-row:hover .sc-rail-move[b-ahrhoc3ynp] {
    display: flex;
}

.sc-rail-row:hover .sc-rail-n[b-ahrhoc3ynp] {
    display: none;
}

.sc-rail-move button[b-ahrhoc3ynp] {
    border: 0;
    background: transparent;
    color: var(--df-text-muted);
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.sc-rail-move button:hover:not(:disabled)[b-ahrhoc3ynp] {
    color: var(--df-primary);
    background: var(--df-surface);
}

.sc-rail-move button:disabled[b-ahrhoc3ynp] {
    color: var(--df-border);
    cursor: default;
}

.sc-rail-sep[b-ahrhoc3ynp] {
    height: 1px;
    background: var(--df-border);
    margin: 0.375rem 0;
}

.sc-rail-foot[b-ahrhoc3ynp] {
    flex: none;
    border-top: 1px solid var(--df-border);
    padding: 0.375rem;
}

.sc-rail-new[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 0;
    background: transparent;
    border-radius: 0.375rem;
    color: var(--df-text-muted);
    font-size: 0.78rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.sc-rail-new:hover[b-ahrhoc3ynp] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

/* ── Right pane ── */

.sc-pane[b-ahrhoc3ynp] {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    /* Header fixed, tiles scrolling underneath it. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sc-pane-head[b-ahrhoc3ynp] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--df-border);
}

.sc-pane-ttl[b-ahrhoc3ynp] {
    font-size: 1.125rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-pane-n[b-ahrhoc3ynp] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--df-text-muted);
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 50rem;
    padding: 0 0.375rem;
    font-variant-numeric: tabular-nums;
    flex: none;
}

.sc-pane-tools[b-ahrhoc3ynp] {
    margin-left: auto;
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex: none;
}

.sc-pane-body[b-ahrhoc3ynp] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem;
}

/* ── "All shortcuts": every group, one after another ── */

.sc-all-group[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem 0.25rem;
}

.sc-all-name[b-ahrhoc3ynp] {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text);
    cursor: pointer;
}

.sc-all-name:hover[b-ahrhoc3ynp] {
    color: var(--df-primary);
    text-decoration: underline;
}

.sc-all-rule[b-ahrhoc3ynp] {
    flex: 1 1 auto;
    height: 1px;
    background: var(--df-border);
}

/* ── Sub-group run ── */

.sc-subhead[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem 0.25rem;
}

.sc-subhead-name[b-ahrhoc3ynp] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--df-text-muted);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-subhead-edit[b-ahrhoc3ynp] {
    border: 0;
    background: transparent;
    font-size: 0.65rem;
    line-height: 1;
    padding: 0.1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--df-transition);
}

.sc-section:hover .sc-subhead-edit[b-ahrhoc3ynp] {
    opacity: 1;
}

/* ── Tiles ── */

.sc-tiles[b-ahrhoc3ynp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    min-height: 1rem;
}

.sc-tiles-empty[b-ahrhoc3ynp] {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: #cbd5e1;
    padding: 0.5rem;
}

.sc-tile-wrap[b-ahrhoc3ynp] {
    position: relative;
    min-width: 0;
}

.sc-dragging[b-ahrhoc3ynp] {
    opacity: 0.4;
}

.sc-tile[b-ahrhoc3ynp] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.625rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--df-transition), border-color var(--df-transition);
}

.sc-tile:hover[b-ahrhoc3ynp] {
    border-color: var(--df-primary-border);
    box-shadow: var(--df-card-shadow);
    color: inherit;
    text-decoration: none;
}

.sc-tile-badge[b-ahrhoc3ynp] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 0.375rem;
    background: var(--df-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-ext .sc-tile-badge[b-ahrhoc3ynp] {
    background: var(--df-info-light);
}

.sc-tile-body[b-ahrhoc3ynp] {
    min-width: 0;
    flex: 1 1 auto;
}

.sc-tile-title[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.sc-tile-title span[b-ahrhoc3ynp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-out[b-ahrhoc3ynp] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--df-info);
    flex: none;
}

.sc-tile-url[b-ahrhoc3ynp] {
    display: block;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A pinned tile says so at rest; the hover tools cover this mark when they appear. */
.sc-tile-pin[b-ahrhoc3ynp] {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    font-size: 0.65rem;
    line-height: 1;
    color: var(--df-warning);
    pointer-events: none;
}

.sc-tile-tools[b-ahrhoc3ynp] {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    display: flex;
    gap: 0.1rem;
    padding: 0.1rem;
    border-radius: 0.375rem;
    background: var(--df-surface);
    box-shadow: var(--df-card-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--df-transition);
}

.sc-tile-wrap:hover .sc-tile-tools[b-ahrhoc3ynp] {
    opacity: 1;
    pointer-events: auto;
}

.sc-tool[b-ahrhoc3ynp] {
    border: 0;
    background: transparent;
    font-size: 0.65rem;
    line-height: 1;
    padding: 0.2rem;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity var(--df-transition);
}

.sc-tool:hover[b-ahrhoc3ynp] {
    opacity: 1;
    background: var(--df-bg);
}

.sc-tool-on[b-ahrhoc3ynp] {
    opacity: 1;
    color: var(--df-warning);
}

/* Where a dragged tile would land — takes a grid cell, so the tiles after it make room. */
.sc-tile-slot[b-ahrhoc3ynp] {
    border: 1px dashed var(--df-primary);
    background: var(--df-primary-light);
    border-radius: 0.5rem;
    min-height: 3rem;
}

.sc-tile-add[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--df-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    padding: 0.55rem;
    cursor: pointer;
    transition: var(--df-transition);
    min-width: 0;
}

.sc-tile-add:hover[b-ahrhoc3ynp] {
    border-color: var(--df-primary);
    color: var(--df-primary);
    background: var(--df-primary-light);
}

/* ── Empty state ── */

.sc-empty[b-ahrhoc3ynp] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    padding: 3rem 2rem;
    text-align: center;
}

.sc-empty-glyph[b-ahrhoc3ynp] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 1rem;
    background-color: var(--df-primary-light);
    background-size: 26px 26px;
    background-repeat: no-repeat;
    background-position: center;
}

.sc-empty h6[b-ahrhoc3ynp] {
    font-size: 1.125rem;
    font-weight: 600;
}

.sc-empty p[b-ahrhoc3ynp] {
    max-width: 44ch;
    margin-left: auto;
    margin-right: auto;
}

/* ── Modal bits ── */

.sc-segmented[b-ahrhoc3ynp] {
    display: flex;
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    padding: 0.2rem;
    gap: 0.2rem;
}

.sc-segmented button[b-ahrhoc3ynp] {
    flex: 1;
    border: 0;
    background: transparent;
    border-radius: 0.375rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--df-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: var(--df-transition);
}

.sc-segmented button.active[b-ahrhoc3ynp] {
    background: var(--df-surface);
    color: var(--df-primary);
    box-shadow: var(--df-card-shadow);
}

/* Shown instead of the picker when the sidebar menu already decides the icon. */
.sc-icon-locked[b-ahrhoc3ynp] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.sc-icon-locked .sc-ico[b-ahrhoc3ynp] {
    width: 16px;
    height: 16px;
}

.sc-icon-grid[b-ahrhoc3ynp] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.35rem;
}

.sc-icon-opt[b-ahrhoc3ynp] {
    aspect-ratio: 1;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    background: var(--df-surface);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: var(--df-transition);
}

.sc-icon-opt:hover[b-ahrhoc3ynp] {
    border-color: var(--df-primary);
}

.sc-icon-opt-on[b-ahrhoc3ynp] {
    background: var(--df-primary-light);
    border-color: var(--df-primary);
    box-shadow: 0 0 0 1px var(--df-primary);
}

/* ── Icons ──
   The nav icon SVGs are white (they were drawn for the dark sidebar), so every use on this
   light page has to recolour them with a filter. */

.sc-ico[b-ahrhoc3ynp] {
    width: 14px;
    height: 14px;
    flex: none;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(500%) hue-rotate(185deg) brightness(95%) contrast(90%);
}

.sc-ico-lg[b-ahrhoc3ynp] {
    width: 17px;
    height: 17px;
}

.sc-rail-item.sc-on .sc-ico[b-ahrhoc3ynp],
.sc-pane-head .sc-ico[b-ahrhoc3ynp],
.sc-all-group .sc-ico[b-ahrhoc3ynp],
.sc-tile-badge .sc-ico[b-ahrhoc3ynp],
.sc-icon-opt-on .sc-ico[b-ahrhoc3ynp] {
    filter: brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(4867%) hue-rotate(238deg) brightness(92%) contrast(90%);
}

/* External shortcuts take the info hue in their badge, matching the ↗ marker. */
.sc-ext .sc-tile-badge .sc-ico[b-ahrhoc3ynp] {
    filter: brightness(0) saturate(100%) invert(38%) sepia(89%) saturate(1266%) hue-rotate(158deg) brightness(93%) contrast(94%);
}

/* Stacked on a narrow window there's no room for two scroll regions — the page scrolls instead. */
@media (max-width: 900px) {
    .sc-split[b-ahrhoc3ynp],
    .sc-split-filtered[b-ahrhoc3ynp] {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .sc-rail[b-ahrhoc3ynp] {
        flex: 1 1 auto;
        width: 100%;
    }

    .sc-rail-scroll[b-ahrhoc3ynp],
    .sc-pane-body[b-ahrhoc3ynp] {
        overflow-y: visible;
    }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .sc-tiles-empty[b-ahrhoc3ynp] {
    color: var(--df-border);
}
html.nav-theme-dark .sc-tile-add[b-ahrhoc3ynp] {
    border: 1px dashed var(--df-border);
}
/* /Components/Pages/Sprints/SprintBoard.razor.rz.scp.css */
[b-z6wete4b2v] .sprint-header-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    flex: 1;
    min-width: 0;
}

[b-z6wete4b2v] .sprint-header-toggle:hover .collapse-chevron {
    color: var(--bs-primary, #0d6efd);
}

[b-z6wete4b2v] .collapse-chevron {
    display: inline-block;
    font-size: 0.65rem;
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
    color: var(--bs-secondary-color, var(--df-text-muted));
    flex-shrink: 0;
}

[b-z6wete4b2v] .collapse-chevron.expanded {
    transform: rotate(90deg);
}

[b-z6wete4b2v] .ticket-row-link {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

[b-z6wete4b2v] .ticket-row-link:hover {
    color: inherit;
    text-decoration: none;
}

[b-z6wete4b2v] .next-task-name {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.875rem;
}

[b-z6wete4b2v] .move-sprint-cell {
    position: relative;
    white-space: nowrap;
}

[b-z6wete4b2v] .move-btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.78rem;
    line-height: 1.2;
}

[b-z6wete4b2v] .move-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
}

[b-z6wete4b2v] .move-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bs-body-bg, var(--df-surface));
    border: 1px solid var(--bs-border-color, var(--df-border));
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.25rem 0;
}

[b-z6wete4b2v] .move-dropdown-header {
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-secondary-color, var(--df-text-muted));
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-z6wete4b2v] .move-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.35rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

[b-z6wete4b2v] .move-dropdown-item:hover {
    background-color: var(--bs-tertiary-bg, var(--df-bg));
}

[b-z6wete4b2v] .move-dropdown-divider {
    height: 0;
    margin: 0.25rem 0;
    border-top: 1px solid var(--bs-border-color, var(--df-border));
}

[b-z6wete4b2v] .sprint-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.875rem;
    line-height: 1;
}

[b-z6wete4b2v] .star-filled {
    color: #ffc107;
}

[b-z6wete4b2v] .star-empty {
    color: var(--df-border);
}

[b-z6wete4b2v] .sprint-star-btn {
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.15s ease, color 0.15s ease;
}

[b-z6wete4b2v] .sprint-star-btn:hover {
    transform: scale(1.2);
    color: #ffca2c;
    text-decoration: none;
}

[b-z6wete4b2v] .sprint-star-btn:focus {
    box-shadow: none;
    text-decoration: none;
}
/* /Components/Pages/Surveys/SurveyList.razor.rz.scp.css */
/* ===== Surveys list ============================================== */

.surveys-page[b-hpln4ikvqe] {
    max-width: 1180px;
    margin: 0 auto;
}

.surveys-header[b-hpln4ikvqe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.surveys-header h2[b-hpln4ikvqe] {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.surveys-header p[b-hpln4ikvqe] {
    margin: 0;
    font-size: .9rem;
    color: var(--df-text-muted);
}

.surveys-toolbar[b-hpln4ikvqe] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.surveys-search[b-hpln4ikvqe] {
    position: relative;
}
.surveys-search input[b-hpln4ikvqe] {
    padding-left: 2.1rem;
    width: 280px;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.625rem;
    height: 2.4rem;
}
.surveys-search input:focus[b-hpln4ikvqe] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    outline: none;
}
.surveys-search-icon[b-hpln4ikvqe] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.surveys-new-btn[b-hpln4ikvqe] {
    height: 2.4rem;
    padding: 0 1rem;
    border-radius: 0.625rem;
    font-weight: 600;
    background: var(--df-primary);
    color: #fff;
    border: 0;
    transition: background .15s ease;
}
.surveys-new-btn:hover[b-hpln4ikvqe] {
    background: var(--df-primary-hover);
}

/* ----- Card row layout ----- */
.surveys-list[b-hpln4ikvqe] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.survey-card[b-hpln4ikvqe] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.875rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.survey-card:hover[b-hpln4ikvqe] {
    border-color: var(--df-primary-border);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.survey-card-main[b-hpln4ikvqe] {
    min-width: 0;
}

.survey-card-title-row[b-hpln4ikvqe] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.survey-card-title[b-hpln4ikvqe] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.3;
}
.survey-card-title:hover[b-hpln4ikvqe] {
    color: var(--df-primary);
}

.survey-card-desc[b-hpln4ikvqe] {
    color: var(--df-text-muted);
    font-size: 0.875rem;
    margin: 0 0 .65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.survey-card-desc.is-empty[b-hpln4ikvqe] {
    color: #94a3b8;
    font-style: italic;
}

/* ----- Status pill ----- */
.survey-pill[b-hpln4ikvqe] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .2rem .55rem;
    border-radius: 999px;
    line-height: 1.4;
}
.survey-pill.draft[b-hpln4ikvqe]    { background: #f1f5f9; color: #475569; }
.survey-pill.active[b-hpln4ikvqe]   { background: #dcfce7; color: #15803d; }
.survey-pill.closed[b-hpln4ikvqe]   { background: #dbeafe; color: #1d4ed8; }

.survey-lock[b-hpln4ikvqe] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: 0.72rem;
    color: #b45309;
    background: #fef3c7;
    padding: .15rem .5rem;
    border-radius: 999px;
}

/* ----- Stats row ----- */
.survey-stats[b-hpln4ikvqe] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #475569;
}
.survey-stat[b-hpln4ikvqe] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.survey-stat .bi[b-hpln4ikvqe] {
    color: #94a3b8;
}
.survey-stat strong[b-hpln4ikvqe] {
    color: #0f172a;
    font-weight: 600;
}

.survey-progress[b-hpln4ikvqe] {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.survey-progress-bar[b-hpln4ikvqe] {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.survey-progress-fill[b-hpln4ikvqe] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
    border-radius: inherit;
    transition: width .3s ease;
}
.survey-progress-fill.complete[b-hpln4ikvqe] {
    background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
}
.survey-progress-text[b-hpln4ikvqe] {
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    min-width: 3.5rem;
    text-align: right;
}

.survey-meta[b-hpln4ikvqe] {
    margin-top: .5rem;
    font-size: 0.78rem;
    color: #94a3b8;
}

/* ----- Actions ----- */
.survey-card-actions[b-hpln4ikvqe] {
    display: flex;
    align-items: center;
    gap: .35rem;
    align-self: center;
}
.survey-action-btn[b-hpln4ikvqe] {
    height: 2.1rem;
    padding: 0 .85rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: #475569;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: all .12s ease;
}
.survey-action-btn:hover[b-hpln4ikvqe] {
    border-color: #6366f1;
    color: var(--df-primary);
    background: var(--df-primary-light);
}
.survey-action-btn.primary[b-hpln4ikvqe] {
    background: var(--df-primary);
    color: #fff;
    border-color: var(--df-primary);
}
.survey-action-btn.primary:hover[b-hpln4ikvqe] {
    background: var(--df-primary-hover);
    border-color: var(--df-primary-hover);
    color: #fff;
}
.survey-action-btn.danger[b-hpln4ikvqe] {
    color: #b91c1c;
}
.survey-action-btn.danger:hover[b-hpln4ikvqe] {
    border-color: var(--df-danger);
    background: var(--df-danger-light);
    color: #991b1b;
}
.survey-action-btn:disabled[b-hpln4ikvqe],
.survey-action-btn.disabled[b-hpln4ikvqe] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----- Empty state ----- */
.surveys-empty[b-hpln4ikvqe] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--df-surface);
    border: 1px dashed #cbd5e1;
    border-radius: 0.875rem;
}
.surveys-empty-icon[b-hpln4ikvqe] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    color: #cbd5e1;
}
.surveys-empty h4[b-hpln4ikvqe] {
    margin: 0 0 .25rem;
    color: #0f172a;
}
.surveys-empty p[b-hpln4ikvqe] {
    color: var(--df-text-muted);
    margin: 0 0 1.25rem;
}

/* ----- Loading skeleton ----- */
.surveys-skeleton[b-hpln4ikvqe] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.surveys-skeleton-row[b-hpln4ikvqe] {
    height: 96px;
    background: #f1f5f9;
    border-radius: 0.875rem;
    position: relative;
    overflow: hidden;
}
.surveys-skeleton-row[b-hpln4ikvqe]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .55) 50%, transparent 100%);
    animation: surveys-skeleton-shimmer-b-hpln4ikvqe 1.4s infinite;
}
@keyframes surveys-skeleton-shimmer-b-hpln4ikvqe {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ===== Dark theme overrides =====================================
   Every color literal in the light styles above has a counterpart here
   so the page flips cleanly with html.nav-theme-dark. The CSS theme
   coverage tests in DevFlow.Tests pin this contract — adding a new
   selector above without a dark twin will fail the build. */

html.nav-theme-dark .surveys-header p[b-hpln4ikvqe] {
    color: #94a3b8;
}

html.nav-theme-dark .surveys-search input[b-hpln4ikvqe] {
    background: #0f172a;
    border-color: var(--df-text);
    color: var(--df-border);
}
html.nav-theme-dark .surveys-search input:focus[b-hpln4ikvqe] {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25);
}
html.nav-theme-dark .surveys-search-icon[b-hpln4ikvqe] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .surveys-new-btn[b-hpln4ikvqe] {
    background: #6366f1;
}
html.nav-theme-dark .surveys-new-btn:hover[b-hpln4ikvqe] {
    background: #818cf8;
}

html.nav-theme-dark .survey-card[b-hpln4ikvqe] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .survey-card:hover[b-hpln4ikvqe] {
    border-color: var(--df-primary-hover);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
html.nav-theme-dark .survey-card-title[b-hpln4ikvqe] {
    color: #f1f5f9;
}
html.nav-theme-dark .survey-card-title:hover[b-hpln4ikvqe] {
    color: #c7d2fe;
}
html.nav-theme-dark .survey-card-desc[b-hpln4ikvqe] {
    color: #94a3b8;
}
html.nav-theme-dark .survey-card-desc.is-empty[b-hpln4ikvqe] {
    color: var(--df-text-muted);
}

html.nav-theme-dark .survey-pill.draft[b-hpln4ikvqe]  { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
html.nav-theme-dark .survey-pill.active[b-hpln4ikvqe] { background: rgba(34, 197, 94, .20);  color: #6ee7b7; }
html.nav-theme-dark .survey-pill.closed[b-hpln4ikvqe] { background: rgba(59, 130, 246, .20); color: #93c5fd; }
html.nav-theme-dark .survey-lock[b-hpln4ikvqe]        { background: rgba(245, 158, 11, .18); color: #fcd34d; }

html.nav-theme-dark .survey-stats[b-hpln4ikvqe] {
    color: #94a3b8;
}
html.nav-theme-dark .survey-stat .bi[b-hpln4ikvqe] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .survey-stat strong[b-hpln4ikvqe] {
    color: #f1f5f9;
}

html.nav-theme-dark .survey-progress-bar[b-hpln4ikvqe] {
    background: var(--df-text);
}
html.nav-theme-dark .survey-progress-fill[b-hpln4ikvqe] {
    background: linear-gradient(90deg, #6366f1 0%, #a78bfa 100%);
}
html.nav-theme-dark .survey-progress-fill.complete[b-hpln4ikvqe] {
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}
html.nav-theme-dark .survey-progress-text[b-hpln4ikvqe] {
    color: #cbd5e1;
}
html.nav-theme-dark .survey-meta[b-hpln4ikvqe] {
    color: var(--df-text-muted);
}

html.nav-theme-dark .survey-action-btn[b-hpln4ikvqe] {
    background: rgba(255, 255, 255, 0.04);
    border-color: #334155;
    color: #cbd5e1;
}
html.nav-theme-dark .survey-action-btn:hover[b-hpln4ikvqe] {
    border-color: #6366f1;
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.18);
}
html.nav-theme-dark .survey-action-btn.primary[b-hpln4ikvqe] {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}
html.nav-theme-dark .survey-action-btn.primary:hover[b-hpln4ikvqe] {
    background: #818cf8;
    border-color: #818cf8;
    color: #fff;
}
html.nav-theme-dark .survey-action-btn.danger[b-hpln4ikvqe] {
    color: #fca5a5;
}
html.nav-theme-dark .survey-action-btn.danger:hover[b-hpln4ikvqe] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    color: #fecaca;
}

html.nav-theme-dark .surveys-empty[b-hpln4ikvqe] {
    background: #0f172a;
    border-color: #334155;
}
html.nav-theme-dark .surveys-empty-icon[b-hpln4ikvqe] {
    color: #475569;
}
html.nav-theme-dark .surveys-empty h4[b-hpln4ikvqe] {
    color: #f1f5f9;
}
html.nav-theme-dark .surveys-empty p[b-hpln4ikvqe] {
    color: #94a3b8;
}

html.nav-theme-dark .surveys-skeleton-row[b-hpln4ikvqe] {
    background: var(--df-text);
}
html.nav-theme-dark .surveys-skeleton-row[b-hpln4ikvqe]::after {
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
}
/* /Components/Pages/Surveys/SurveyResults.razor.rz.scp.css */
/* ===== Survey results ============================================ */

.results-page[b-610tsh42fs] {
    max-width: 1180px;
    margin: 0 auto;
}

.results-header[b-610tsh42fs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.results-back[b-610tsh42fs] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--df-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: .5rem;
}
.results-back:hover[b-610tsh42fs] {
    color: var(--df-primary);
}
.results-title-row[b-610tsh42fs] {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.results-title[b-610tsh42fs] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0;
}
.results-desc[b-610tsh42fs] {
    color: var(--df-text-muted);
    margin: 0;
    font-size: 0.9rem;
    max-width: 720px;
}

/* Reuse same status pill styles as the list page so the visual language
   stays coherent. */
.results-pill[b-610tsh42fs] {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .2rem .55rem;
    border-radius: 999px;
}
.results-pill.draft[b-610tsh42fs]  { background: #f1f5f9; color: #475569; }
.results-pill.active[b-610tsh42fs] { background: #dcfce7; color: #15803d; }
.results-pill.closed[b-610tsh42fs] { background: #dbeafe; color: #1d4ed8; }

/* ----- KPI tiles ----- */
.kpi-grid[b-610tsh42fs] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 720px) {
    .kpi-grid[b-610tsh42fs] { grid-template-columns: repeat(2, 1fr); }
}

.kpi-tile[b-610tsh42fs] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.875rem;
    padding: 1rem 1.1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.kpi-tile:hover[b-610tsh42fs] {
    border-color: var(--df-primary-border);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.kpi-label[b-610tsh42fs] {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-bottom: .35rem;
}
.kpi-value[b-610tsh42fs] {
    font-size: 1.85rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.02em;
}
.kpi-value .kpi-suffix[b-610tsh42fs] {
    font-size: .9rem;
    font-weight: 500;
    color: var(--df-text-muted);
    margin-left: .25rem;
}
.kpi-tile.accent .kpi-value[b-610tsh42fs] { color: var(--df-primary); }

/* ----- Per-question result card ----- */
.q-card[b-610tsh42fs] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.875rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: .85rem;
}
.q-card-header[b-610tsh42fs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .85rem;
}
.q-card-title[b-610tsh42fs] {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}
.q-card-type[b-610tsh42fs] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6366f1;
    background: var(--df-primary-light);
    padding: .15rem .5rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.q-card-empty[b-610tsh42fs] {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.875rem;
    padding: .5rem 0;
}

/* Big-number stats (rating / number / yes-no aggregates) */
.q-stats[b-610tsh42fs] {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid #f1f5f9;
}
.q-stat[b-610tsh42fs] {
    display: flex;
    flex-direction: column;
}
.q-stat-label[b-610tsh42fs] {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
}
.q-stat-value[b-610tsh42fs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}
.q-stat-value.accent[b-610tsh42fs] { color: var(--df-primary); }

/* Distribution bars (rating, single/multi-choice) */
.q-dist[b-610tsh42fs] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.q-dist-row[b-610tsh42fs] {
    display: grid;
    grid-template-columns: 110px 1fr 90px;
    align-items: center;
    gap: .75rem;
    font-size: 0.875rem;
}
.q-dist-label[b-610tsh42fs] {
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.q-dist-bar[b-610tsh42fs] {
    height: 8px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.q-dist-fill[b-610tsh42fs] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
    border-radius: inherit;
    transition: width .3s ease;
    min-width: 2px; /* always show a sliver so 0%-but-not-empty is distinguishable */
}
.q-dist-fill.zero[b-610tsh42fs] {
    min-width: 0;
}
.q-dist-fill.yes[b-610tsh42fs]  { background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%); }
.q-dist-fill.no[b-610tsh42fs]   { background: linear-gradient(90deg, var(--df-danger) 0%, #f87171 100%); }
.q-dist-meta[b-610tsh42fs] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    font-variant-numeric: tabular-nums;
}
.q-dist-pct[b-610tsh42fs]  { color: #475569; font-weight: 600; min-width: 2.25rem; text-align: right; }
.q-dist-count[b-610tsh42fs] { color: #94a3b8; min-width: 2rem; text-align: right; }

/* Text response cards */
.q-text-list[b-610tsh42fs] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.q-text-item[b-610tsh42fs] {
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    padding: .65rem .85rem;
    font-size: .9rem;
    color: #334155;
    line-height: 1.5;
}
.q-text-item-author[b-610tsh42fs] {
    display: block;
    font-size: .72rem;
    color: #94a3b8;
    margin-top: .35rem;
    font-style: italic;
}

/* Date list */
.q-date-list[b-610tsh42fs] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.q-date-pill[b-610tsh42fs] {
    background: var(--df-primary-light);
    color: var(--df-primary-hover);
    font-size: .78rem;
    font-weight: 500;
    padding: .25rem .65rem;
    border-radius: 999px;
}

/* ----- Invitations table ----- */
.invitations-card[b-610tsh42fs] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.875rem;
    overflow: hidden;
    margin-top: 1.5rem;
}
.invitations-card-header[b-610tsh42fs] {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--df-bg);
}
.invitations-card-header h5[b-610tsh42fs] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.invitations-table[b-610tsh42fs] {
    width: 100%;
    border-collapse: collapse;
}
.invitations-table th[b-610tsh42fs] {
    background: var(--df-bg);
    color: var(--df-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    padding: .55rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.invitations-table td[b-610tsh42fs] {
    padding: .65rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: #334155;
}
.invitations-table tr:last-child td[b-610tsh42fs] {
    border-bottom: 0;
}
.invitations-table tr:hover td[b-610tsh42fs] {
    background: var(--df-bg);
}
.invitations-table .muted[b-610tsh42fs] {
    color: #94a3b8;
}

/* Status badge inside the invitations table */
.inv-pill[b-610tsh42fs] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
}
.inv-pill .inv-dot[b-610tsh42fs] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.inv-pill.active[b-610tsh42fs]    { background: #fef3c7; color: #b45309; }
.inv-pill.completed[b-610tsh42fs] { background: #dcfce7; color: #15803d; }
.inv-pill.expired[b-610tsh42fs]   { background: #f1f5f9; color: var(--df-text-muted); }
.inv-pill.revoked[b-610tsh42fs]   { background: #fee2e2; color: #b91c1c; }

/* ===== Dark theme overrides ====================================== */

html.nav-theme-dark .results-back[b-610tsh42fs] {
    color: #94a3b8;
}
html.nav-theme-dark .results-back:hover[b-610tsh42fs] {
    color: #c7d2fe;
}
html.nav-theme-dark .results-title[b-610tsh42fs] {
    color: #f1f5f9;
}
html.nav-theme-dark .results-desc[b-610tsh42fs] {
    color: #94a3b8;
}
html.nav-theme-dark .results-pill.draft[b-610tsh42fs]  { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
html.nav-theme-dark .results-pill.active[b-610tsh42fs] { background: rgba(34, 197, 94, .20);  color: #6ee7b7; }
html.nav-theme-dark .results-pill.closed[b-610tsh42fs] { background: rgba(59, 130, 246, .20); color: #93c5fd; }

html.nav-theme-dark .kpi-tile[b-610tsh42fs] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .kpi-tile:hover[b-610tsh42fs] {
    border-color: var(--df-primary-hover);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
html.nav-theme-dark .kpi-label[b-610tsh42fs] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .kpi-value[b-610tsh42fs] {
    color: #f1f5f9;
}
html.nav-theme-dark .kpi-value .kpi-suffix[b-610tsh42fs] {
    color: #94a3b8;
}
html.nav-theme-dark .kpi-tile.accent .kpi-value[b-610tsh42fs] {
    color: #c7d2fe;
}

html.nav-theme-dark .q-card[b-610tsh42fs] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .q-card-title[b-610tsh42fs] {
    color: #f1f5f9;
}
html.nav-theme-dark .q-card-type[b-610tsh42fs] {
    background: rgba(99, 102, 241, .18);
    color: #c7d2fe;
}
html.nav-theme-dark .q-card-empty[b-610tsh42fs] {
    color: var(--df-text-muted);
}

html.nav-theme-dark .q-stats[b-610tsh42fs] {
    border-bottom-color: var(--df-text);
}
html.nav-theme-dark .q-stat-label[b-610tsh42fs] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .q-stat-value[b-610tsh42fs] {
    color: #f1f5f9;
}
html.nav-theme-dark .q-stat-value.accent[b-610tsh42fs] {
    color: #c7d2fe;
}

html.nav-theme-dark .q-dist-label[b-610tsh42fs] {
    color: #cbd5e1;
}
html.nav-theme-dark .q-dist-bar[b-610tsh42fs] {
    background: var(--df-text);
}
html.nav-theme-dark .q-dist-fill[b-610tsh42fs] {
    background: linear-gradient(90deg, #6366f1 0%, #a78bfa 100%);
}
html.nav-theme-dark .q-dist-fill.yes[b-610tsh42fs] {
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}
html.nav-theme-dark .q-dist-fill.no[b-610tsh42fs] {
    background: linear-gradient(90deg, var(--df-danger) 0%, #fca5a5 100%);
}
html.nav-theme-dark .q-dist-pct[b-610tsh42fs]   { color: #cbd5e1; }
html.nav-theme-dark .q-dist-count[b-610tsh42fs] { color: var(--df-text-muted); }

html.nav-theme-dark .q-text-item[b-610tsh42fs] {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--df-text);
    color: #cbd5e1;
}
html.nav-theme-dark .q-text-item-author[b-610tsh42fs] {
    color: var(--df-text-muted);
}

html.nav-theme-dark .q-date-pill[b-610tsh42fs] {
    background: rgba(99, 102, 241, .18);
    color: #c7d2fe;
}

html.nav-theme-dark .invitations-card[b-610tsh42fs] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .invitations-card-header[b-610tsh42fs] {
    background: #0b1220;
    border-bottom-color: var(--df-text);
}
html.nav-theme-dark .invitations-card-header h5[b-610tsh42fs] {
    color: #f1f5f9;
}
html.nav-theme-dark .invitations-table th[b-610tsh42fs] {
    background: #0b1220;
    color: #94a3b8;
    border-bottom-color: var(--df-text);
}
html.nav-theme-dark .invitations-table td[b-610tsh42fs] {
    color: #cbd5e1;
    border-bottom-color: var(--df-text);
}
html.nav-theme-dark .invitations-table tr:hover td[b-610tsh42fs] {
    background: rgba(255, 255, 255, 0.03);
}
html.nav-theme-dark .invitations-table .muted[b-610tsh42fs] {
    color: var(--df-text-muted);
}

html.nav-theme-dark .inv-pill.active[b-610tsh42fs]    { background: rgba(245, 158, 11, .18); color: #fcd34d; }
html.nav-theme-dark .inv-pill.completed[b-610tsh42fs] { background: rgba(34, 197, 94, .20);  color: #6ee7b7; }
html.nav-theme-dark .inv-pill.expired[b-610tsh42fs]   { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
html.nav-theme-dark .inv-pill.revoked[b-610tsh42fs]   { background: rgba(239, 68, 68, .18); color: #fca5a5; }

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .q-stats[b-610tsh42fs] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .invitations-card-header[b-610tsh42fs] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .invitations-table th[b-610tsh42fs] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .invitations-table td[b-610tsh42fs] {
    border-bottom: 1px solid var(--df-border);
}
/* /Components/Pages/Tasks/TaskList.razor.rz.scp.css */
.task-category-sidebar[b-3f624g0ffr] {
    width: 220px;
    min-width: 220px;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    background: var(--bs-body-bg, var(--df-surface));
    border: 1px solid var(--bs-border-color, var(--df-border));
    border-radius: 0.5rem;
    overflow: hidden;
}

.task-category-sidebar .list-group-item[b-3f624g0ffr] {
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
    color: var(--bs-body-color, #212529);
    background-color: transparent;
}

.task-category-sidebar .list-group-item:hover:not(.active)[b-3f624g0ffr] {
    background-color: #e9ecef;
    border-left-color: #0d6efd;
}

.task-category-sidebar .list-group-item.active[b-3f624g0ffr] {
    background-color: #e7f1ff;
    border-left-color: #0d6efd;
    color: #0a58ca;
    font-weight: 600;
}

.task-category-sidebar .list-group-item.active .category-count[b-3f624g0ffr] {
    background-color: #0d6efd;
    color: #fff;
}

html.nav-theme-dark .task-category-sidebar .list-group-item:hover:not(.active)[b-3f624g0ffr] {
    background-color: rgba(255,255,255,0.06);
    border-left-color: #818cf8;
}

html.nav-theme-dark .task-category-sidebar .list-group-item.active[b-3f624g0ffr] {
    background-color: rgba(99,102,241,0.20);
    border-left-color: #818cf8;
    color: #c7d2fe;
}

html.nav-theme-dark .task-category-sidebar .list-group-item.active .category-count[b-3f624g0ffr] {
    background-color: var(--df-primary);
    color: #fff;
}

.category-count[b-3f624g0ffr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 11px;
    background-color: var(--df-text-muted);
    color: #fff;
}

[b-3f624g0ffr] .inline-edit-trigger {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px dashed transparent;
    transition: background-color 0.15s, border-color 0.15s;
}

[b-3f624g0ffr] .inline-edit-trigger:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

[b-3f624g0ffr] .inline-edit-select {
    width: auto;
    min-width: 120px;
    font-size: 0.78rem;
    padding: 2px 6px;
}

[b-3f624g0ffr] .drag-handle-cell {
    cursor: grab;
    text-align: center;
    color: #adb5bd;
    font-size: 1.1rem;
    user-select: none;
    width: 40px;
}

[b-3f624g0ffr] .drag-handle-cell:hover {
    color: #495057;
}

[b-3f624g0ffr] .drag-over-highlight {
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
    background-color: #e7f1ff !important;
}

[b-3f624g0ffr] .task-row-link {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

[b-3f624g0ffr] .task-row-link:hover {
    color: inherit;
    text-decoration: none;
}

/* Assignment chip styles */
[b-3f624g0ffr] .assignment-cell {
    position: relative;
}

[b-3f624g0ffr] .assignment-avatars {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

[b-3f624g0ffr] .assignment-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
    font-size: 0.65rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, margin 0.15s;
    overflow: hidden;
    border: 2px solid var(--df-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    margin-left: -8px;
    position: relative;
}

[b-3f624g0ffr] .assignment-chip:first-child {
    margin-left: 0;
}

[b-3f624g0ffr] .assignment-chip:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

[b-3f624g0ffr] .assignment-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

[b-3f624g0ffr] .assignment-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

[b-3f624g0ffr] .assignment-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px dashed #cbd5e1;
    background: var(--df-surface);
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    padding: 0;
    line-height: 1;
    margin-left: 2px;
    flex-shrink: 0;
}

[b-3f624g0ffr] .assignment-add-btn:hover {
    border-color: #0d6efd;
    color: #0d6efd;
    background: #eff6ff;
}

[b-3f624g0ffr] .assignment-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1052;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    width: 220px;
    padding: 6px;
    margin-top: 4px;
}

[b-3f624g0ffr] .assignment-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1051;
    background: transparent;
    cursor: default;
}

[b-3f624g0ffr] .assignment-dropdown-list {
    max-height: 180px;
    overflow-y: auto;
}

[b-3f624g0ffr] .assignment-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #334155;
    transition: background 0.12s;
    text-align: left;
}

[b-3f624g0ffr] .assignment-dropdown-item:hover {
    background: #f1f5f9;
}

[b-3f624g0ffr] .assignment-dropdown-item .assignment-initials {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.65rem;
}

[b-3f624g0ffr] .assignment-dropdown-item .assignment-avatar-img {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark[b-3f624g0ffr]  .inline-edit-trigger:hover {
    background-color: var(--df-border);
}
html.nav-theme-dark[b-3f624g0ffr]  .drag-over-highlight {
    background-color: var(--df-primary-light) !important;
}
/* /Components/Pages/Tickets/GanttChart.razor.rz.scp.css */
.gantt-wrapper[b-i7mwua6kr6] {
    position: relative;
    overflow: auto;
    border: 1px solid var(--df-border, var(--df-border));
    border-radius: var(--df-radius, 0.625rem);
    background: var(--df-bg, var(--df-bg));
    max-height: 78vh;
    user-select: none;
}

.gantt-container[b-i7mwua6kr6] {
    position: relative;
    min-width: 100%;
    min-height: 600px;
}

/* Timeline header */
.gantt-timeline[b-i7mwua6kr6] {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--df-surface);
    border-bottom: 2px solid var(--df-border, var(--df-border));
}

.gantt-day[b-i7mwua6kr6] {
    flex: 0 0 var(--day-width, 48px);
    width: var(--day-width, 48px);
    text-align: center;
    padding: 0.4rem 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--df-text-muted, var(--df-text-muted));
    border-right: 1px solid var(--df-border, var(--df-border));
    box-sizing: border-box;
}

.gantt-day.weekend[b-i7mwua6kr6] {
    background: #f1f5f9;
    color: #94a3b8;
}

.gantt-day.today[b-i7mwua6kr6] {
    background: #dbeafe;
    color: #2563eb;
    font-weight: 700;
}

.gantt-day-name[b-i7mwua6kr6] {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gantt-day-num[b-i7mwua6kr6] {
    display: block;
    font-size: 0.78rem;
}

/* Rows area */
.gantt-body[b-i7mwua6kr6] {
    position: relative;
}

.gantt-row[b-i7mwua6kr6] {
    position: relative;
    height: 44px;
    border-bottom: 1px solid #f1f5f9;
}

.gantt-row:nth-child(even)[b-i7mwua6kr6] {
    background: rgba(248, 250, 252, 0.5);
}

/* Grid lines */
.gantt-grid-lines[b-i7mwua6kr6] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.gantt-grid-line[b-i7mwua6kr6] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #f1f5f9;
}

.gantt-grid-line.weekend-line[b-i7mwua6kr6] {
    background: #e8ecf1;
}

.gantt-today-line[b-i7mwua6kr6] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #3b82f6;
    z-index: 5;
    opacity: 0.6;
}

/* Task bars */
.gantt-bar[b-i7mwua6kr6] {
    position: absolute;
    height: 30px;
    top: 7px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: white;
    cursor: grab;
    z-index: 6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
    touch-action: none;
    min-width: 40px;
}

.gantt-bar:hover[b-i7mwua6kr6] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.gantt-bar-dragging[b-i7mwua6kr6] {
    cursor: grabbing;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    transform: scale(1.03);
    z-index: 100 !important;
    opacity: 0.92;
}

/* Status colors */
.gantt-bar.status-notstarted[b-i7mwua6kr6] {
    background: linear-gradient(135deg, #94a3b8, var(--df-text-muted));
}

.gantt-bar.status-inprogress[b-i7mwua6kr6] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.gantt-bar.status-blocked[b-i7mwua6kr6] {
    background: linear-gradient(135deg, #ef4444, var(--df-danger));
}

.gantt-bar.status-completed[b-i7mwua6kr6] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Priority indicators */
.gantt-bar.priority-critical[b-i7mwua6kr6] {
    border: 2px solid #fbbf24;
}

.gantt-bar.priority-high[b-i7mwua6kr6] {
    border-left: 4px solid #f97316;
}

/* Ticket group headers */
.gantt-ticket-header[b-i7mwua6kr6] {
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--df-surface);
    border-bottom: 1px solid var(--df-border, var(--df-border));
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--df-text, var(--df-text));
    z-index: 7;
    gap: 8px;
}

.gantt-ticket-header .ticket-id[b-i7mwua6kr6] {
    color: var(--df-text-muted, var(--df-text-muted));
    font-weight: 500;
    font-size: 0.78rem;
}

/* Sidebar labels */
.gantt-sidebar[b-i7mwua6kr6] {
    position: sticky;
    left: 0;
    z-index: 8;
    background: var(--df-surface);
    border-right: 2px solid var(--df-border, var(--df-border));
    min-width: 200px;
    max-width: 200px;
    flex-shrink: 0;
}

.gantt-sidebar-header[b-i7mwua6kr6] {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-weight: 700;
    font-size: 0.875rem;
    border-bottom: 2px solid var(--df-border, var(--df-border));
    background: var(--df-surface);
}

.gantt-sidebar-ticket[b-i7mwua6kr6] {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-weight: 700;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--df-border, var(--df-border));
    background: #fafbfc;
    color: var(--df-text, var(--df-text));
    gap: 6px;
}

.gantt-sidebar-task[b-i7mwua6kr6] {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px 0 24px;
    font-size: 0.78rem;
    color: var(--df-text-muted, var(--df-text-muted));
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-sidebar-task .status-dot[b-i7mwua6kr6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.status-dot.not-started[b-i7mwua6kr6] { background: #94a3b8; }
.status-dot.in-progress[b-i7mwua6kr6] { background: #3b82f6; }
.status-dot.blocked[b-i7mwua6kr6] { background: #ef4444; }
.status-dot.completed[b-i7mwua6kr6] { background: #22c55e; }

/* Layout */
.gantt-layout[b-i7mwua6kr6] {
    display: flex;
}

.gantt-chart-area[b-i7mwua6kr6] {
    flex: 1;
    overflow: visible;
}

/* Bar label */
.gantt-bar-label[b-i7mwua6kr6] {
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.gantt-bar-icon[b-i7mwua6kr6] {
    margin-right: 4px;
    flex-shrink: 0;
}

/* Legend */
.gantt-legend[b-i7mwua6kr6] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.gantt-legend-item[b-i7mwua6kr6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--df-text-muted, var(--df-text-muted));
}

.gantt-legend-color[b-i7mwua6kr6] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

/* No-dates fallback bar (semi-transparent, dashed border) */
.gantt-bar-no-dates[b-i7mwua6kr6] {
    opacity: 0.5;
    border: 2px dashed rgba(255,255,255,0.6) !important;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .gantt-day.weekend[b-i7mwua6kr6] {
    background: var(--df-bg);
}
html.nav-theme-dark .gantt-day.today[b-i7mwua6kr6] {
    background: var(--df-primary-light);
}
html.nav-theme-dark .gantt-row[b-i7mwua6kr6] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .gantt-row:nth-child(even)[b-i7mwua6kr6] {
    background: var(--df-bg);
}
html.nav-theme-dark .gantt-grid-line[b-i7mwua6kr6] {
    background: var(--df-bg);
}
html.nav-theme-dark .gantt-grid-line.weekend-line[b-i7mwua6kr6] {
    background: var(--df-bg);
}
html.nav-theme-dark .gantt-bar.status-notstarted[b-i7mwua6kr6] {
    background: linear-gradient(135deg, #94a3b8, var(--df-text-muted));
}
html.nav-theme-dark .gantt-sidebar-ticket[b-i7mwua6kr6] {
    background: var(--df-surface);
}
html.nav-theme-dark .gantt-sidebar-task[b-i7mwua6kr6] {
    border-bottom: 1px solid var(--df-border);
}
/* /Components/Pages/Tickets/OpenByClient.razor.rz.scp.css */
/* Open Work by Client — a company rail on the left, the selected scope on the right.
   Everything here builds on the --df-* tokens in app.css; no new hues, radii or shadows. */

.page-subtitle[b-phyizy9dav] {
    font-size: 0.875rem;
    color: var(--df-text-muted);
    margin: 0.15rem 0 0;
}

/* ---- Header summary ---- */

.workload-stats[b-phyizy9dav] {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
}

.workload-stat[b-phyizy9dav] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-num[b-phyizy9dav] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-num.accent[b-phyizy9dav] {
    color: var(--df-primary);
}

.stat-num.warn[b-phyizy9dav] {
    color: var(--df-warning);
}

.stat-cap[b-phyizy9dav] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-text-muted);
}

/* ---- Two-pane shell ---- */

.workload-pane[b-phyizy9dav] {
    display: grid;
    grid-template-columns: 280px 1fr;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
    min-height: 540px;
}

@media (max-width: 900px) {
    .workload-pane[b-phyizy9dav] {
        grid-template-columns: 1fr;
    }

    .workload-rail[b-phyizy9dav] {
        border-right: 0;
        border-bottom: 1px solid var(--df-border);
        max-height: 320px;
    }
}

/* ---- Rail ---- */

.workload-rail[b-phyizy9dav] {
    display: flex;
    flex-direction: column;
    background: var(--df-bg);
    border-right: 1px solid var(--df-border);
    min-width: 0;
}

.rail-search[b-phyizy9dav] {
    padding: 0.6rem;
    border-bottom: 1px solid var(--df-border);
}

.rail-scroll[b-phyizy9dav] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.rail-group[b-phyizy9dav] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-text-muted);
    padding: 0.6rem 0.8rem 0.3rem;
}

.rail-empty[b-phyizy9dav] {
    padding: 1.2rem 0.8rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
    text-align: center;
}

.rail-item[b-phyizy9dav] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem 0.45rem 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color var(--df-transition);
}

.rail-item:hover[b-phyizy9dav] {
    background: rgba(79, 70, 229, 0.05);
}

.rail-item.on[b-phyizy9dav] {
    background: var(--df-primary-light);
    border-left-color: var(--df-primary);
    font-weight: 600;
}

.rail-item.unattributed[b-phyizy9dav] {
    color: var(--df-text-muted);
}

.rail-name[b-phyizy9dav] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caret[b-phyizy9dav] {
    flex: 0 0 auto;
    width: 0.9rem;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    transition: transform var(--df-transition);
    display: inline-block;
    text-align: center;
}

.rail-item.open > .caret[b-phyizy9dav] {
    transform: rotate(90deg);
}

/* The type mix, so the rail keeps a little of the comparison the two-pane shape gives up. */
.mini-bar[b-phyizy9dav] {
    display: flex;
    height: 4px;
    width: 44px;
    flex: 0 0 auto;
    border-radius: 50rem;
    overflow: hidden;
    margin-left: auto;
    background: var(--df-border);
}

.mini-bar i[b-phyizy9dav] {
    display: block;
    height: 100%;
}

.rail-sub[b-phyizy9dav] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem 0.3rem 1.9rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color var(--df-transition);
}

.rail-sub:hover[b-phyizy9dav] {
    background: rgba(79, 70, 229, 0.05);
    color: var(--df-text);
}

.rail-sub.on[b-phyizy9dav] {
    background: var(--df-primary-light);
    border-left-color: var(--df-primary);
    color: var(--df-primary);
    font-weight: 600;
}

.avatar[b-phyizy9dav] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.count-pill[b-phyizy9dav] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 50rem;
    padding: 0.12rem 0.5rem;
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-variant-numeric: tabular-nums;
}

.rail-item .count-pill[b-phyizy9dav] {
    margin-left: 0.4rem;
}

.count-pill.muted[b-phyizy9dav] {
    background: var(--df-surface);
    color: var(--df-text-muted);
    border: 1px solid var(--df-border);
}

.rail-foot[b-phyizy9dav] {
    padding: 0.55rem 0.8rem;
    border-top: 1px solid var(--df-border);
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

/* ---- Detail pane ---- */

.workload-detail[b-phyizy9dav] {
    padding: 1rem 1.2rem;
    min-width: 0;
}

.detail-head[b-phyizy9dav] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.crumb[b-phyizy9dav] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-bottom: 0.1rem;
}

.crumb a[b-phyizy9dav] {
    color: var(--df-text-muted);
    cursor: pointer;
    text-decoration: none;
}

.crumb a:hover[b-phyizy9dav] {
    color: var(--df-primary);
    text-decoration: underline;
}

.workload-detail h4[b-phyizy9dav] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.1rem;
}

.detail-meta[b-phyizy9dav] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.detail-meta .sep[b-phyizy9dav] {
    opacity: 0.6;
}

.chip-row[b-phyizy9dav] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 0.9rem;
}

.chip-note[b-phyizy9dav] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

/* The type chips are the table's filter. Selection carries a ✓ and a ring, and the types left
   out fade — so which cut you are looking at never rests on colour alone. */
.chip-filter[b-phyizy9dav] {
    border: 0;
    cursor: pointer;
    transition: opacity var(--df-transition), box-shadow var(--df-transition);
}

.chip-filter:focus-visible[b-phyizy9dav] {
    outline: 2px solid var(--df-primary);
    outline-offset: 2px;
}

.chip-filter.on[b-phyizy9dav] {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--df-primary);
}

.chip-row.filtering .chip-filter:not(.on)[b-phyizy9dav] {
    opacity: 0.4;
}

.chip-row.filtering .chip-filter:not(.on):hover[b-phyizy9dav] {
    opacity: 0.75;
}

.chip-clear[b-phyizy9dav] {
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: var(--df-text-muted);
    border-radius: 50rem;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15rem 0.6rem;
    cursor: pointer;
    transition: color var(--df-transition), border-color var(--df-transition);
}

.chip-clear:hover[b-phyizy9dav] {
    color: var(--df-primary);
    border-color: var(--df-primary);
}

.workload-table[b-phyizy9dav] {
    margin-bottom: 0;
}

.workload-table .num[b-phyizy9dav] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- Sortable headers ---- */

.workload-table thead th.sortable[b-phyizy9dav] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color var(--df-transition);
}

.workload-table thead th.sortable:hover[b-phyizy9dav],
.workload-table thead th.sorted[b-phyizy9dav] {
    color: var(--df-primary);
}

.sort-arrow[b-phyizy9dav] {
    font-size: 0.65rem;
    margin-left: 0.25rem;
    color: var(--df-primary);
}

/* The idle glyph only appears on hover: it advertises that the column sorts without competing
   with the arrow that says which column actually is sorted. */
.sort-arrow.idle[b-phyizy9dav] {
    color: var(--df-text-muted);
    opacity: 0;
    transition: opacity var(--df-transition);
}

.workload-table thead th.sortable:hover .sort-arrow.idle[b-phyizy9dav] {
    opacity: 0.6;
}

.workload-table .no-match[b-phyizy9dav] {
    padding: 1.5rem 0.75rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.workload-table .no-match a[b-phyizy9dav] {
    color: var(--df-primary);
    cursor: pointer;
    text-decoration: none;
}

.workload-table .no-match a:hover[b-phyizy9dav] {
    text-decoration: underline;
}

.workload-table .tk-id[b-phyizy9dav] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
}

.workload-table .tk-title a[b-phyizy9dav] {
    color: var(--df-primary);
    font-weight: 500;
    text-decoration: none;
}

.workload-table .tk-title a:hover[b-phyizy9dav] {
    text-decoration: underline;
}

/* Age and due both earn colour only once they mean something, and both pair it with a word
   or a glyph rather than relying on the hue. */
.workload-table .stale[b-phyizy9dav] {
    color: var(--df-warning);
    font-weight: 600;
}

.workload-table .overdue[b-phyizy9dav] {
    color: var(--df-danger);
    font-weight: 600;
}

.detail-foot[b-phyizy9dav] {
    padding: 0.7rem 0.2rem 0;
    font-size: 0.78rem;
    color: var(--df-text-muted);
}

.detail-foot a[b-phyizy9dav] {
    color: var(--df-primary);
    cursor: pointer;
    text-decoration: none;
}

.detail-foot a:hover[b-phyizy9dav] {
    text-decoration: underline;
}
/* /Components/Pages/Tickets/TicketDetail.razor.rz.scp.css */
[b-4za7wpnc0b] .drag-handle-cell {
    cursor: grab;
    text-align: center;
    color: #adb5bd;
    font-size: 1.125rem;
    user-select: none;
    width: 40px;
}

[b-4za7wpnc0b] .drag-handle-cell:hover {
    color: #495057;
}

[b-4za7wpnc0b] .drag-over-highlight {
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
    background-color: #e7f1ff !important;
}

/* Upload zone — slim drop bar (tokenised so dark mode repaints) */
[b-4za7wpnc0b] .upload-zone {
    position: relative;
    border: 1.5px dashed var(--df-border);
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
    transition: border-color var(--df-transition), background-color var(--df-transition), color var(--df-transition);
    background: var(--df-bg);
    color: var(--df-text-muted);
}

[b-4za7wpnc0b] .upload-zone.compact {
    padding: 0.5rem 0.9rem;
}

[b-4za7wpnc0b] .upload-zone:hover,
[b-4za7wpnc0b] .upload-zone.drag-over {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
    color: var(--df-primary);
}

[b-4za7wpnc0b] .upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

[b-4za7wpnc0b] .upload-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    color: inherit;
    font-size: 0.85rem;
}

[b-4za7wpnc0b] .upload-label .upload-ico {
    font-size: 1rem;
}

[b-4za7wpnc0b] .upload-label .upload-hint {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    white-space: nowrap;
}

[b-4za7wpnc0b] .pending-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--df-border);
}

[b-4za7wpnc0b] .pending-file-item:last-child {
    border-bottom: none;
}

/* Attachment rows (Option A — refined rows) */
[b-4za7wpnc0b] .attach-list {
    display: flex;
    flex-direction: column;
}

[b-4za7wpnc0b] .attach-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border-radius: 0.5rem;
    border-bottom: 1px solid var(--df-border);
    transition: background-color 0.15s ease;
}

[b-4za7wpnc0b] .attach-row:last-child {
    border-bottom: none;
}

[b-4za7wpnc0b] .attach-row:hover {
    background: var(--df-primary-light);
}

[b-4za7wpnc0b] .attach-row .ftype {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 0.45rem;
    border: 1px solid;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}

[b-4za7wpnc0b] .ft-html { color: var(--df-purple);     background: var(--df-purple-light);  border-color: var(--df-purple-border); }
[b-4za7wpnc0b] .ft-pdf  { color: var(--df-danger);     background: var(--df-danger-light);  border-color: var(--df-danger-border); }
[b-4za7wpnc0b] .ft-img  { color: var(--df-info);       background: var(--df-info-light);    border-color: var(--df-info-border); }
[b-4za7wpnc0b] .ft-doc  { color: var(--df-primary);    background: var(--df-primary-light); border-color: var(--df-primary-border); }
[b-4za7wpnc0b] .ft-xls  { color: var(--df-success);    background: var(--df-success-light); border-color: var(--df-success-border); }
[b-4za7wpnc0b] .ft-zip  { color: var(--df-warning);    background: var(--df-warning-light); border-color: var(--df-warning-border); }
[b-4za7wpnc0b] .ft-file { color: var(--df-text-muted); background: var(--df-bg);            border-color: var(--df-border); }

[b-4za7wpnc0b] .attach-main {
    min-width: 0;
    flex: 1;
}

[b-4za7wpnc0b] .attach-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--df-primary);
    text-decoration: none;
}

[b-4za7wpnc0b] .attach-name:hover {
    text-decoration: underline;
}

[b-4za7wpnc0b] .attach-meta {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-top: 0.1rem;
}

[b-4za7wpnc0b] .attach-src {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--df-info);
    background: var(--df-info-light);
    border: 1px solid var(--df-info-border);
    border-radius: 50rem;
    padding: 0 0.45rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

[b-4za7wpnc0b] .attach-actions {
    display: flex;
    gap: 0.4rem;
    flex: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

[b-4za7wpnc0b] .attach-row:hover .attach-actions,
[b-4za7wpnc0b] .attach-row:focus-within .attach-actions {
    opacity: 1;
}

/* Touch devices can't hover — keep the actions visible */
@media (hover: none) {
    [b-4za7wpnc0b] .attach-actions {
        opacity: 1;
    }
}

/* New-file editor — genuine code content, so monospace is intentional here */
[b-4za7wpnc0b] .create-file-editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    tab-size: 2;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

[b-4za7wpnc0b] .create-file-preview {
    width: 100%;
    height: 360px;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    background: var(--df-surface);
}

/* Meta Info Bar - Compact horizontal layout */
.meta-grid[b-4za7wpnc0b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.meta-group[b-4za7wpnc0b] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 10px;
    padding: 0;
    overflow: visible;
}

.meta-group-header[b-4za7wpnc0b] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    padding: 0.5rem 0.85rem 0.25rem;
    border-bottom: 1px solid #f1f5f9;
    background: var(--df-bg);
    border-radius: 10px 10px 0 0;
}

.meta-group-items[b-4za7wpnc0b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.meta-item[b-4za7wpnc0b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
}

.meta-label[b-4za7wpnc0b] {
    font-size: 0.65rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 4px;
}

.meta-value[b-4za7wpnc0b] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--df-text);
    white-space: nowrap;
}

.meta-date[b-4za7wpnc0b] {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 1px;
}

.meta-inline-cell[b-4za7wpnc0b] {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.meta-avatar[b-4za7wpnc0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
    font-size: 0.65rem;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--df-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    margin-left: -6px;
}

.meta-avatar:first-child[b-4za7wpnc0b] {
    margin-left: 0;
}

.meta-approval-avatar[b-4za7wpnc0b] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    margin-left: -6px;
}

.meta-approval-avatar:first-child[b-4za7wpnc0b] {
    margin-left: 0;
}

.meta-approval-badge[b-4za7wpnc0b] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--df-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.42rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    z-index: 1;
}

.meta-approval-badge--approved[b-4za7wpnc0b] {
    background: #198754;
}

.meta-approval-badge--denied[b-4za7wpnc0b] {
    background: var(--df-danger);
}

.meta-avatar:hover[b-4za7wpnc0b] {
    transform: scale(1.1);
    z-index: 2;
}

.meta-avatar img[b-4za7wpnc0b] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meta-avatar-sm[b-4za7wpnc0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
    font-size: 0.5rem;
    margin-right: 4px;
}

.meta-chip[b-4za7wpnc0b] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.meta-chip:hover[b-4za7wpnc0b] {
    background: var(--df-primary-border);
}

.meta-chip.sprint[b-4za7wpnc0b] {
    background: #dbeafe;
    color: #1e40af;
}

.meta-chip.sprint:hover[b-4za7wpnc0b] {
    background: #bfdbfe;
}

.meta-chip.deployment[b-4za7wpnc0b] {
    background: #dcfce7;
    color: #166534;
    text-decoration: none;
}

.meta-chip.deployment:hover[b-4za7wpnc0b] {
    background: #bbf7d0;
    color: #166534;
}

.meta-add-btn[b-4za7wpnc0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed #d1d5db;
    background: transparent;
    color: #9ca3af;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.meta-add-btn:hover[b-4za7wpnc0b] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.meta-progress[b-4za7wpnc0b] {
    display: inline-block;
    width: 50px;
    height: 4px;
    background: var(--df-border);
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: middle;
    overflow: hidden;
}

.meta-progress-bar[b-4za7wpnc0b] {
    display: block;
    height: 100%;
    background: #22c55e;
    border-radius: 2px;
    transition: width 0.3s;
}

.meta-progress-bar.over[b-4za7wpnc0b] {
    background: #ef4444;
}

/* Responsive: stack on smaller screens */
@media (max-width: 1200px) {
    .meta-grid[b-4za7wpnc0b] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .meta-grid[b-4za7wpnc0b] {
        grid-template-columns: 1fr;
    }
}

/* Ticket assignment cell - used in meta info card */
.ticket-assignment-cell[b-4za7wpnc0b] {
    position: relative;
}

/* Sprint chip style */
.sprint-chip[b-4za7wpnc0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: #dbeafe;
    color: #1e40af;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 2px solid var(--df-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html.nav-theme-dark .sprint-chip[b-4za7wpnc0b] {
    background: #172d50;
    color: #93c5fd;
}

.sprint-chip:hover[b-4za7wpnc0b] {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.sprint-chip .sprint-label[b-4za7wpnc0b] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Deployment chip style */
.deployment-chip[b-4za7wpnc0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 2px solid var(--df-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.deployment-chip:hover[b-4za7wpnc0b] {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    color: #166534;
    text-decoration: none;
}

html.nav-theme-dark .deployment-chip[b-4za7wpnc0b],
html.nav-theme-dark .deployment-chip:hover[b-4za7wpnc0b] {
    background: #123529;
    color: #86efac;
}

.deployment-chip .deployment-label[b-4za7wpnc0b] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Assignment chip with name (for Requested By) */
.ticket-assignment-cell .assignment-chip[b-4za7wpnc0b] {
    width: auto;
    height: 28px;
    padding: 0 10px 0 0;
    border-radius: 14px;
    gap: 6px;
}

.ticket-assignment-cell .assignment-chip .assignment-initials[b-4za7wpnc0b] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    font-size: 0.65rem;
}

.ticket-assignment-cell .assignment-chip .assignment-name[b-4za7wpnc0b] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    font-size: 0.75rem;
}

/* Inline editable task name */
[b-4za7wpnc0b] .task-name-editable {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s, color 0.15s;
    padding-bottom: 1px;
}

[b-4za7wpnc0b] .task-name-editable:hover {
    border-bottom-color: #0d6efd;
    color: #0d6efd;
}

/* ===== Toast notifications ===== */
.success-toast[b-4za7wpnc0b] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-slide-in-b-4za7wpnc0b 0.25s ease-out;
    background: var(--df-success);
    color: #fff;
    border: none;
}

@keyframes toast-slide-in-b-4za7wpnc0b {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Dark theme overrides ---- */
html.nav-theme-dark .meta-group[b-4za7wpnc0b] {
    background: #0f172a;
    border-color: var(--df-text);
    color: var(--df-border);
}

html.nav-theme-dark .meta-group-header[b-4za7wpnc0b] {
    background: #111c33;
    border-bottom-color: var(--df-text);
    color: #94a3b8;
}

/* No dark override for .meta-value: its color is var(--df-text), which flips on its own.
   (An earlier rule here pointed it at var(--df-border) — a border color — which rendered the
   values illegible in dark mode and out-specified app.css's correct global dark rule.) */
html.nav-theme-dark .meta-label[b-4za7wpnc0b],
html.nav-theme-dark .meta-date[b-4za7wpnc0b] {
    color: #94a3b8;
}

html.nav-theme-dark .meta-avatar[b-4za7wpnc0b],
html.nav-theme-dark .meta-avatar-sm[b-4za7wpnc0b] {
    background: #312e81;
    color: #c7d2fe;
    border-color: #0f172a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

html.nav-theme-dark .meta-chip[b-4za7wpnc0b] {
    background: rgba(99,102,241,0.20);
    color: #c7d2fe;
}
html.nav-theme-dark .meta-chip:hover[b-4za7wpnc0b] {
    background: rgba(99,102,241,0.30);
}
html.nav-theme-dark .meta-chip.sprint[b-4za7wpnc0b] {
    background: rgba(59,130,246,0.20);
    color: #93c5fd;
}
html.nav-theme-dark .meta-chip.sprint:hover[b-4za7wpnc0b] {
    background: rgba(59,130,246,0.30);
}
html.nav-theme-dark .meta-chip.deployment[b-4za7wpnc0b] {
    background: rgba(16,185,129,0.20);
    color: #6ee7b7;
}
html.nav-theme-dark .meta-chip.deployment:hover[b-4za7wpnc0b] {
    background: rgba(16,185,129,0.30);
    color: #a7f3d0;
}

html.nav-theme-dark .meta-add-btn[b-4za7wpnc0b] {
    border-color: #334155;
    color: #94a3b8;
}
html.nav-theme-dark .meta-add-btn:hover[b-4za7wpnc0b] {
    border-color: #6366f1;
    color: #c7d2fe;
    background: rgba(99,102,241,0.15);
}

html.nav-theme-dark .meta-progress[b-4za7wpnc0b] {
    background: #334155;
}

/* "Generate from emails" AI draft — floating popover anchored to the button */
.description-card-wrap[b-4za7wpnc0b] {
    position: relative;
}

.gen-pop[b-4za7wpnc0b] {
    position: absolute;
    top: 3.35rem;
    right: 1.25rem;
    width: 400px;
    max-width: calc(100% - 2.5rem);
    z-index: 30;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.08);
    animation: gen-pop-in-b-4za7wpnc0b 0.18s ease;
}

@keyframes gen-pop-in-b-4za7wpnc0b {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* little caret pointing up toward the Generate button */
.gen-pop[b-4za7wpnc0b]::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 150px;
    width: 12px;
    height: 12px;
    background: var(--df-primary-light);
    border-left: 1px solid var(--df-border);
    border-top: 1px solid var(--df-border);
    transform: rotate(45deg);
}

.gen-pop-head[b-4za7wpnc0b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.85rem;
    background: var(--df-primary-light);
    border-bottom: 1px solid var(--df-border);
    border-radius: var(--df-radius) var(--df-radius) 0 0;
}

.gen-pop-head strong[b-4za7wpnc0b] {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--df-primary);
}

.gen-pop-body[b-4za7wpnc0b] {
    padding: 0.85rem;
    max-height: 260px;
    overflow-y: auto;
}

.gen-pop-foot[b-4za7wpnc0b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--df-border);
}

@media (max-width: 640px) {
    .gen-pop[b-4za7wpnc0b] {
        right: 0;
        width: 100%;
    }
    .gen-pop[b-4za7wpnc0b]::before { right: 90px; }
}

/* AI release notes modal — standard modal chrome, two-pane body */
.rn-modal[b-4za7wpnc0b] {
    height: 82vh;
}

.rn-body[b-4za7wpnc0b] {
    display: flex;
    padding: 0;
    overflow: hidden;
    min-height: 0;
}

.rn-pane-input[b-4za7wpnc0b] {
    width: 50%;
    overflow-y: auto;
    border-right: 1px solid var(--df-border);
}

.rn-pane-preview[b-4za7wpnc0b] {
    display: flex;
    flex-direction: column;
    width: 50%;
    overflow: hidden;
    background: var(--df-bg);
}

.rn-preview-head[b-4za7wpnc0b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--df-border);
}

.rn-preview-body[b-4za7wpnc0b] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem;
}

.rn-badge-ready[b-4za7wpnc0b] {
    background: var(--df-success-light);
    color: var(--df-success);
}

.rn-badge-busy[b-4za7wpnc0b] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

/* AI release notes — linked-PR source picker */
.rn-source-card[b-4za7wpnc0b] {
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    padding: 0.75rem 0.85rem;
    background: var(--df-surface);
}

.rn-source-card-on[b-4za7wpnc0b] {
    border-color: var(--df-success);
    background: var(--df-success-light);
}

.rn-pr-row[b-4za7wpnc0b] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3rem 0;
}

.rn-source-note[b-4za7wpnc0b] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--df-border);
    font-size: 0.8rem;
    color: var(--df-success);
}

/* ============================================================================
   Rail layout
   ----------------------------------------------------------------------------
   A per-user alternative to the tab bar: navigation moves into a grouped column
   on the left and the canvas shows exactly one surface at a time, full width.
   Everything here is inert unless .td-shell-rail / .td-head-rail is applied, so
   the tab layout renders byte-for-byte as it always has.
   ========================================================================== */

.td-shell-rail[b-4za7wpnc0b] {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 1.25rem;
    /* Deliberately NOT align-items:start — the rail column has to span the full row height or the
       sticky nav inside it has no distance to travel and scrolls away with the page. */
    align-items: stretch;
}

.td-rail-col[b-4za7wpnc0b] {
    min-width: 0;
}

/* Without this a wide table on a surface stretches the grid column instead of
   scrolling inside it, and the whole page gains a horizontal scrollbar. */
.td-canvas[b-4za7wpnc0b] {
    min-width: 0;
}

.td-rail[b-4za7wpnc0b] {
    display: grid;
    gap: 2px;
    align-content: start;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    padding: 0.4rem;
}

.td-rail-group[b-4za7wpnc0b] {
    padding: 0.7rem 0.5rem 0.25rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--df-text-muted);
    opacity: 0.75;
}

.td-rail-group:first-child[b-4za7wpnc0b] {
    padding-top: 0.3rem;
}

.td-rail-item[b-4za7wpnc0b] {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: 0.45rem;
    background: none;
    text-align: left;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--df-text-muted);
    position: relative;
    transition: background-color var(--df-transition), color var(--df-transition);
}

.td-rail-item:hover[b-4za7wpnc0b] {
    background: var(--df-bg);
    color: var(--df-text);
}

.td-rail-item.active[b-4za7wpnc0b] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

/* The marker sits in the rail's own padding, so it reads as an edge indicator
   rather than as part of the button. */
.td-rail-item.active[b-4za7wpnc0b]::before {
    content: "";
    position: absolute;
    left: -0.4rem;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--df-primary);
}

.td-rail-ico[b-4za7wpnc0b] {
    font-size: 1rem;
    text-align: center;
    line-height: 1;
}

.td-rail-label[b-4za7wpnc0b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A column has room for a gutter, which is the whole reason the rail can say
   more than a tab label could. Tabular figures keep the counts in line. */
.td-rail-count[b-4za7wpnc0b] {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.td-rail-rule[b-4za7wpnc0b] {
    border: 0;
    border-top: 1px solid var(--df-border);
    margin: 0.35rem 0.3rem;
    opacity: 1;
}

.td-rail-busy[b-4za7wpnc0b] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0.25rem;
}

/* --- Compact header, rail layout only ------------------------------------- */
/* Same markup as the tab layout; grid placement puts the title and the actions
   on one row and the state chips underneath, instead of stacking three rows. */
.td-head-rail[b-4za7wpnc0b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.3rem;
}

.td-head-rail > .td-head-title[b-4za7wpnc0b] {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin-bottom: 0 !important;
    font-size: 1.35rem;
}

.td-head-rail > .td-head-title > span:first-child[b-4za7wpnc0b] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-head-rail > .td-head-actions[b-4za7wpnc0b] {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0 !important;
    justify-content: flex-end;
}

/* The empty spacer that pushes the buttons right in the tab layout has nothing
   to do here, and would otherwise add a gap before them. */
.td-head-rail > .td-head-actions > span:empty[b-4za7wpnc0b] {
    display: none;
}

.td-head-rail > .td-head-chips[b-4za7wpnc0b] {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0 !important;
}

/* --- Header meta, rail layout only ----------------------------------------- */
/* The metaGrid fragment rendered inside the header, so the ticket's fields survive
   every surface change. Third grid row, under the chips. The toggle sits beside the
   bar when collapsed and floats over the grid's top-right corner when expanded. */
.td-head-rail > .td-head-meta[b-4za7wpnc0b] {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.td-head-meta.meta-open[b-4za7wpnc0b] {
    display: block;
    position: relative;
}

.td-head-meta.meta-open .meta-toggle[b-4za7wpnc0b] {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    z-index: 1;
}

.meta-toggle[b-4za7wpnc0b] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;
    color: var(--df-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--df-transition), color var(--df-transition);
}

.meta-toggle:hover[b-4za7wpnc0b] {
    background: var(--df-surface);
    color: var(--df-text);
}

.meta-toggle-chev[b-4za7wpnc0b] {
    font-size: 0.6rem;
}

/* --- .meta-bar: the meta grid flattened to one labelled row ----------------- */
/* A modifier on .meta-grid, inert everywhere it isn't applied — the tab layout and
   the expanded state render byte-for-byte as before. The four group cards become
   inline runs separated by dividers; the same items, avatars, chips and dropdowns
   render inside, so everything stays editable in place. */
.meta-grid.meta-bar[b-4za7wpnc0b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 8px;
    box-shadow: var(--df-card-shadow);
    padding: 1px 4px;
}

.meta-bar .meta-group[b-4za7wpnc0b] {
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 0;
    background: none;
    min-width: 0;
}

.meta-bar .meta-group + .meta-group[b-4za7wpnc0b] {
    border-left: 1px solid var(--df-border);
    margin-left: 2px;
    padding-left: 2px;
}

.meta-bar .meta-group-header[b-4za7wpnc0b] {
    display: none;
}

.meta-bar .meta-group-items[b-4za7wpnc0b] {
    flex-wrap: nowrap;
}

.meta-bar .meta-item[b-4za7wpnc0b] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
}

.meta-bar .meta-label[b-4za7wpnc0b] {
    margin-bottom: 0;
    font-size: 0.62rem;
}

.meta-bar .meta-value[b-4za7wpnc0b] {
    font-size: 0.8rem;
}

.meta-bar .meta-avatar[b-4za7wpnc0b] {
    width: 22px;
    height: 22px;
}

.meta-bar .meta-chip[b-4za7wpnc0b] {
    height: 22px;
}

.meta-bar .meta-add-btn[b-4za7wpnc0b] {
    width: 19px;
    height: 19px;
    font-size: 0.68rem;
}

/* History in bar form: the date is the half people scan for, so the name and the
   long timestamp yield to the brief date; the title attribute carries both. */
.meta-bar .meta-date[b-4za7wpnc0b] {
    display: none;
}

.meta-bar .meta-hist .meta-value[b-4za7wpnc0b] {
    display: none;
}

.meta-date-brief[b-4za7wpnc0b] {
    display: none;
}

.meta-bar .meta-date-brief[b-4za7wpnc0b] {
    display: inline;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--df-text);
    white-space: nowrap;
}

/* Empty optional fields (Modified/Completed with no value) say nothing in a bar. */
.meta-bar .meta-empty[b-4za7wpnc0b] {
    display: none;
}

/* "Deployment"/"Estimated" shorten to "Deploy"/"Est" where every pixel is a row. */
.meta-label .lbl-brief[b-4za7wpnc0b] {
    display: none;
}

.meta-bar .lbl-full[b-4za7wpnc0b] {
    display: none;
}

.meta-bar .lbl-brief[b-4za7wpnc0b] {
    display: inline;
}

/* --- Pinning the header and the rail --------------------------------------- */
/* Only the surface scrolls. Scoped to the same breakpoint MainLayout uses to turn
   <main> into the scroll container — below it the page scrolls normally and there
   is nothing to stick to. 3.5rem is the app's own top bar, which is already
   sticky at 0, so both of these hang beneath it. */
@media (min-width: 641px) {
    .td-head-rail[b-4za7wpnc0b] {
        position: sticky;
        top: 3.5rem;
        z-index: 6;
        background: var(--df-bg);
        /* article.content is padded; bleed out to its edges so content scrolling
           underneath doesn't show through beside or above the header. The top
           padding would otherwise read as an empty strip under the app bar that
           slides in and out as the page scrolls. */
        margin-left: -2rem;
        margin-right: -1.5rem;
        margin-top: -1.5rem;
        padding: 0.85rem 1.5rem 0.6rem 2rem;
        margin-bottom: 0.9rem !important;
        border-bottom: 1px solid var(--df-border);
    }

    /* Embed mode hides the app's top bar, so there is nothing above to clear —
       and it shrinks .content's padding to 12px, so that is what to cancel. */
    .embed-mode .td-head-rail[b-4za7wpnc0b] {
        top: 0;
        margin-top: -12px;
    }
}

/* Only pin the rail while it still is a column. Below 820px it lies down into a
   horizontal strip, and starting the sticky rules here rather than at 641px keeps
   that from having to out-specify them. */
@media (min-width: 821px) {
    /* --td-head-h is measured and published by TicketDetail.razor.js. The fallback
       only applies for the frame before that lands. */
    .td-shell-rail .td-rail[b-4za7wpnc0b] {
        position: sticky;
        top: calc(3.5rem + var(--td-head-h, 6.25rem) + 0.75rem);
        /* A short window must not put the last surfaces out of reach. */
        max-height: calc(100vh - 3.5rem - var(--td-head-h, 6.25rem) - 1.5rem);
        overflow-y: auto;
    }

    .embed-mode .td-shell-rail .td-rail[b-4za7wpnc0b] {
        top: calc(var(--td-head-h, 6.25rem) + 0.75rem);
        max-height: calc(100vh - var(--td-head-h, 6.25rem) - 1.5rem);
    }
}

/* --- Narrower windows ------------------------------------------------------ */
/* The rail keeps its selection and its counts at every step; it only loses its
   labels, and then its column. */
@media (max-width: 1100px) {
    .td-shell-rail[b-4za7wpnc0b] {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 0.9rem;
    }

    .td-rail-item[b-4za7wpnc0b] {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0.5rem 0.25rem;
    }

    /* Labels move to the title attribute the markup already sets. */
    .td-rail-label[b-4za7wpnc0b] {
        display: none;
    }

    .td-rail-count[b-4za7wpnc0b] {
        font-size: 0.62rem;
        margin-top: 0.15rem;
    }

    /* Group names don't fit, so the groups become the rules between them. */
    .td-rail-group[b-4za7wpnc0b] {
        height: 1px;
        padding: 0;
        margin: 0.3rem 0.3rem;
        overflow: hidden;
        text-indent: -999em;
        background: var(--df-border);
    }

    .td-rail-group:first-child[b-4za7wpnc0b] {
        display: none;
    }
}

/* ── Phone ───────────────────────────────────────────────────────────────────
   Two things break below ~640px and both are invisible failures rather than ugly
   ones: the header's two-column grid gives the action buttons all the width they
   ask for and squeezes the title column to *nothing* — a ticket page with no
   ticket on it — and the meta bar, which is explicitly nowrap so it reads as one
   line on a desktop, runs off the side taking Approver and the field toggle with
   it. Both are the same fix: let them stack. */
@media (max-width: 640.98px) {
    .td-head-rail[b-4za7wpnc0b] {
        grid-template-columns: minmax(0, 1fr);
    }

    .td-head-rail > .td-head-title[b-4za7wpnc0b] {
        grid-row: 1;
        font-size: 1.1rem;
        line-height: 1.3;
    }

    /* Wraps rather than ellipsising: on one line of a phone the title would be three
       words and a fade, and the number is not enough to know which ticket this is. */
    .td-head-rail > .td-head-title > span:first-child[b-4za7wpnc0b] {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .td-head-rail > .td-head-actions[b-4za7wpnc0b] {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .td-head-rail > .td-head-chips[b-4za7wpnc0b] {
        grid-row: 3;
    }

    .td-head-rail > .td-head-meta[b-4za7wpnc0b] {
        grid-row: 4;
    }

    /* Metadata is on demand here. Collapsed, the bar is one line on a desktop; letting it wrap
       instead — the first attempt — produced 451px of fields between the title and the ticket, so
       you opened a ticket and met eleven labels before a word of the description. The bar is
       hidden when collapsed and the existing "All fields" button, which is already labelled and
       already remembers its state, is what brings it back. */
    .td-head-meta:not(.meta-open) .meta-grid.meta-bar[b-4za7wpnc0b] {
        display: none;
    }

    .td-head-meta:not(.meta-open) .meta-toggle[b-4za7wpnc0b] {
        padding: 6px 10px;
        border: 1px solid var(--df-border);
        border-radius: 8px;
        background: var(--df-surface);
    }

    /* Expanded, the four-column grid becomes one column — four cards across 390px is four cards
       nobody can read. */
    .td-head-meta.meta-open .meta-grid[b-4za7wpnc0b] {
        grid-template-columns: 1fr;
    }

    .meta-bar .meta-group-items[b-4za7wpnc0b],
    .meta-bar .meta-group[b-4za7wpnc0b] {
        flex-wrap: wrap;
    }

    /* Card-header actions stay one line. "📝 Generate from emails" wrapped to two at this width
       and became a 187x52 slab next to a 67x52 "Edit" — buttons taller than the heading they sit
       beside. Smaller type and tighter padding fit the label rather than truncating it, because
       "Generate from" is not a thing anyone can act on. */
    .card-header .btn-sm[b-4za7wpnc0b],
    .td-canvas .card-header .btn[b-4za7wpnc0b] {
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 5px 9px;
    }

    /* And the header itself wraps. A heading plus two actions is 7px too wide here, which
       overflow-x:hidden on <main> turns into a button with its right edge shaved off rather than
       a scrollbar — quieter than sideways scrolling and just as broken. */
    .td-canvas .card-header[b-4za7wpnc0b],
    .td-canvas .card-header > .d-flex[b-4za7wpnc0b] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    /* The header's own actions: the *buttons* size to their labels, but the box holding them must
       still be allowed to shrink and wrap. Pinning that box to 0 0 auto — an earlier attempt —
       sized it to max-content, 377px inside a 358px header, and the last button hung 7px off the
       edge where overflow-x:hidden shaved it. */
    .td-head-rail > .td-head-actions > *[b-4za7wpnc0b] {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .td-head-rail > .td-head-actions .btn[b-4za7wpnc0b] {
        flex: 0 0 auto;
    }

    /* The surface rail wraps instead of scrolling sideways. Eight icon tabs at 51px fit two rows
       of a 390px screen with room to spare, and a tab you have to drag the strip to discover is a
       tab most people never find — Attachments and Workspace were living out there. */
    .td-rail[b-4za7wpnc0b] {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: flex-start;
        row-gap: 4px;
    }

    /* ── Tasks: twelve columns become a card ─────────────────────────────────
       1048px of table in a 356px column, dragged sideways to read, with 12x12
       checkboxes and a 28px bin in it. Each task stacks instead: the name, then
       status, who has it and when it is due — and the timer and the bin at a
       size a thumb can hit.

       Addressed by position rather than by class, which is safe *here* and not
       in the ticket list: these twelve columns are fixed, with no column
       chooser to reorder or remove them. */
    .td-canvas .table-responsive[b-4za7wpnc0b] {
        overflow-x: visible;
    }

    .td-canvas .table-responsive table[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody[b-4za7wpnc0b],
    .td-canvas .table-responsive tr[b-4za7wpnc0b],
    .td-canvas .table-responsive td[b-4za7wpnc0b] {
        display: block;
        width: auto;
    }

    .td-canvas .table-responsive thead[b-4za7wpnc0b] {
        display: none;
    }

    /* Same rhythm as the ticket list and the timecard — see the phone block in app.css. Four
       surfaces became lists on a phone and each had invented its own row height and separator;
       taking the numbers from one place is what makes them read as one app. */
    .td-canvas .table-responsive tbody tr[b-4za7wpnc0b] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--df-row-gap) 10px;
        padding: var(--df-row-pad-y) var(--df-row-pad-x);
        min-height: var(--df-row-min-h);
        background-color: var(--df-surface);
        transition: background-color 0.12s ease;
    }

    .td-canvas .table-responsive tbody tr + tr[b-4za7wpnc0b] {
        background-image: linear-gradient(var(--df-border), var(--df-border));
        background-size: calc(100% - var(--df-row-rule-inset)) 1px;
        background-position: var(--df-row-rule-inset) 0;
        background-repeat: no-repeat;
    }

    .td-canvas .table-responsive tbody tr:active[b-4za7wpnc0b] {
        background-color: var(--df-bg);
    }

    .td-canvas .table-responsive tbody td[b-4za7wpnc0b] {
        border: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto;
    }

    /* The task name owns line one. */
    .td-canvas .table-responsive tbody td:nth-child(3)[b-4za7wpnc0b] {
        flex: 1 1 100%;
        font-weight: 600;
        font-size: var(--df-row-title);
        line-height: 1.3;
    }

    /* Category, assignee, status and due share line two. */
    .td-canvas .table-responsive tbody td:nth-child(4)[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody td:nth-child(5)[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody td:nth-child(6)[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody td:nth-child(10)[b-4za7wpnc0b] {
        font-size: var(--df-row-meta);
        color: var(--df-text-muted);
    }

    /* The timer and the bin end the row, thumb-sized and pushed to the right. */
    .td-canvas .table-responsive tbody td:nth-child(11)[b-4za7wpnc0b] {
        margin-left: auto;
    }

    .td-canvas .table-responsive tbody td:nth-child(11) .btn[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody td:nth-child(12) .btn[b-4za7wpnc0b] {
        min-width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Select-all and per-row selection, the drag handle, and the three time columns: bulk edits
       and reordering are desktop work, and est/actual/completed are reference numbers you do not
       manage from a phone. */
    .td-canvas .table-responsive tbody td:nth-child(1)[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody td:nth-child(2)[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody td:nth-child(7)[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody td:nth-child(8)[b-4za7wpnc0b],
    .td-canvas .table-responsive tbody td:nth-child(9)[b-4za7wpnc0b] {
        display: none;
    }
}

@media (max-width: 820px) {
    /* No column left to be: the rail lies down above the canvas and scrolls
       sideways on its own rather than making the page do it. */
    .td-shell-rail[b-4za7wpnc0b] {
        display: block;
    }

    .td-rail[b-4za7wpnc0b] {
        position: static;
        display: flex;
        gap: 2px;
        overflow-x: auto;
        margin-bottom: 0.9rem;
    }

    .td-rail-item[b-4za7wpnc0b] {
        width: auto;
        flex: 0 0 auto;
        min-width: 3.2rem;
    }

    .td-rail-item.active[b-4za7wpnc0b]::before {
        left: 0.3rem;
        right: 0.3rem;
        top: auto;
        bottom: -0.4rem;
        width: auto;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

    .td-rail-group[b-4za7wpnc0b] {
        flex: 0 0 1px;
        align-self: stretch;
        height: auto;
        width: 1px;
        margin: 0.25rem 0.3rem;
    }

    .td-rail-busy[b-4za7wpnc0b] {
        padding: 0 0.5rem;
        align-items: center;
    }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark[b-4za7wpnc0b]  .drag-over-highlight {
    background-color: var(--df-primary-light) !important;
}
html.nav-theme-dark .meta-group-header[b-4za7wpnc0b] {
    border-bottom: 1px solid var(--df-border);
}

/* ==========================================================================
   Deployment surface — split view
   --------------------------------------------------------------------------
   A persistent list of every deployment artifact beside a detail pane showing
   one of them. The five stacked cards this replaced meant the SQL scripts sat
   several screens below the release notes; here nothing scrolls out of reach
   and each item's state is readable without opening it.
   ========================================================================== */

.dep-split[b-4za7wpnc0b] {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Both real children are pinned to row 1. The tab's modals are siblings here,
   but Bootstrap positions them fixed, which takes them out of flow entirely —
   so they never claim a grid cell. Anything that did would land harmlessly in
   row 2 rather than pushing the columns apart. */
.dep-list[b-4za7wpnc0b] {
    grid-area: 1 / 1;
}

.dep-pane[b-4za7wpnc0b] {
    grid-area: 1 / 2;
    min-width: 0;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow: hidden;
}

/* --- The list ------------------------------------------------------------- */

.dep-list[b-4za7wpnc0b] {
    display: grid;
    gap: 2px;
    align-content: start;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    padding: 0.4rem;
}

.dep-list-group[b-4za7wpnc0b] {
    padding: 0.7rem 0.5rem 0.25rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--df-text-muted);
    opacity: 0.75;
}

.dep-list-group:first-child[b-4za7wpnc0b] {
    padding-top: 0.3rem;
}

.dep-item[b-4za7wpnc0b] {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: 0.45rem;
    background: none;
    text-align: left;
    color: var(--df-text-muted);
    transition: background-color var(--df-transition), color var(--df-transition);
}

.dep-item:hover[b-4za7wpnc0b] {
    background: var(--df-bg);
    color: var(--df-text);
}

.dep-item.active[b-4za7wpnc0b] {
    background: var(--df-primary);
    color: #fff;
}

.dep-item-ico[b-4za7wpnc0b] {
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: center;
}

.dep-item-text[b-4za7wpnc0b] {
    min-width: 0;
}

.dep-item-name[b-4za7wpnc0b] {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The subtitle is what lets a closed item still answer "is this done?", so it
   stays legible on the selected row rather than dropping to a faint tint. */
.dep-item-sub[b-4za7wpnc0b] {
    display: block;
    font-size: 0.72rem;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dep-item-flag[b-4za7wpnc0b] {
    font-size: 0.72rem;
    line-height: 1.3;
}

/* --- The detail pane ------------------------------------------------------ */

.dep-pane-head[b-4za7wpnc0b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--df-border);
}

.dep-pane-title[b-4za7wpnc0b] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.dep-pane-count[b-4za7wpnc0b] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--df-text-muted);
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    border-radius: 50rem;
    padding: 0.05rem 0.45rem;
    font-variant-numeric: tabular-nums;
}

.dep-pane-actions[b-4za7wpnc0b] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.dep-pane-body[b-4za7wpnc0b] {
    padding: 1rem;
}

.dep-empty[b-4za7wpnc0b] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--df-text-muted);
}

.dep-empty-ico[b-4za7wpnc0b] {
    display: block;
    font-size: 1.75rem;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.dep-row[b-4za7wpnc0b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--df-border);
}

.dep-row:last-child[b-4za7wpnc0b] {
    border-bottom: 0;
}

.dep-row-main[b-4za7wpnc0b] {
    flex: 1;
    min-width: 0;
}

.branch-created[b-4za7wpnc0b] {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    color: var(--df-text-muted);
    white-space: nowrap;
}

.dep-row-title[b-4za7wpnc0b] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text);
    text-decoration: none;
}

.dep-row-title:hover[b-4za7wpnc0b] {
    color: var(--df-primary);
    text-decoration: underline;
}

.dep-row-sub[b-4za7wpnc0b] {
    font-size: 0.72rem;
    color: var(--df-text-muted);
    margin-top: 0.1rem;
}

/* --- Narrower windows ----------------------------------------------------- */
/* The outer surface rail has already dropped its labels by 1100px and its column
   by 820px. This list follows one step behind so the two never collapse at the
   same breakpoint and leave the canvas without any navigation at all. */
@media (max-width: 1250px) {
    .dep-split[b-4za7wpnc0b] {
        grid-template-columns: 216px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .dep-split[b-4za7wpnc0b] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the list becomes a scrolling strip above the pane. */
    .dep-list[b-4za7wpnc0b] {
        grid-area: auto;
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, max-content);
        gap: 0.25rem;
        overflow-x: auto;
    }

    .dep-pane[b-4za7wpnc0b] {
        grid-area: auto;
    }

    .dep-list-group[b-4za7wpnc0b] {
        display: none;
    }

    .dep-item[b-4za7wpnc0b] {
        grid-template-columns: 1.25rem minmax(0, 1fr);
    }

    .dep-item-flag[b-4za7wpnc0b] {
        display: none;
    }
}
/* /Components/Pages/Tickets/TicketHub.razor.rz.scp.css */
.hub .card-header[b-znd3bczbwo] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .9rem;
}

/* quick-filter pills */
.pill-bar[b-znd3bczbwo] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.pill[b-znd3bczbwo] {
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    border-radius: 999px;
    padding: .28rem .7rem;
    font-size: .78rem;
    cursor: pointer;
    color: var(--df-text);
    transition: var(--df-transition);
    user-select: none;
}

.pill:hover[b-znd3bczbwo] {
    border-color: #c7cdd6;
}

.pill.active[b-znd3bczbwo] {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: #fff;
}

.pill.sprint.active[b-znd3bczbwo] {
    background: var(--df-success);
    border-color: var(--df-success);
}

/* segmented toggles */
.seg[b-znd3bczbwo] {
    display: inline-flex;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    overflow: hidden;
}

.seg button[b-znd3bczbwo] {
    border: 0;
    background: var(--df-surface);
    padding: .3rem .6rem;
    font-size: .78rem;
    cursor: pointer;
    color: var(--df-text);
}

.seg button.active[b-znd3bczbwo] {
    background: var(--df-primary);
    color: #fff;
}

.filt-lbl[b-znd3bczbwo] {
    font-size: .72rem;
    color: var(--df-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
}

/* KPI cards */
.kpi .card-body[b-znd3bczbwo] {
    padding: .75rem .6rem;
    text-align: center;
}

.kpi-lbl[b-znd3bczbwo] {
    color: var(--df-text-muted);
    font-size: .72rem;
}

.kpi-val[b-znd3bczbwo] {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
}

.kpi-sub[b-znd3bczbwo] {
    font-size: 0.72rem;
    color: var(--df-text-muted);
}

.chart-wrap[b-znd3bczbwo] {
    position: relative;
    height: 280px;
}

.hub-tickets[b-znd3bczbwo] {
    font-size: 0.78rem;
}

.hub-tickets td[b-znd3bczbwo],
.hub-tickets th[b-znd3bczbwo] {
    padding: .4rem .55rem;
    vertical-align: middle;
}
/* /Components/Pages/Tickets/TicketKanban.razor.rz.scp.css */
.kanban-board[b-ah86pm8hfx] {
    display: flex;
    gap: 1rem;
    padding-bottom: 1rem;
    min-height: 60vh;
}

.kanban-column[b-ah86pm8hfx] {
    flex: 1 1 0;
    min-width: 0;
    background: var(--df-bg, var(--df-bg));
    border: 1px solid var(--df-border, var(--df-border));
    border-radius: var(--df-radius, 0.625rem);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--df-transition, 0.2s ease);
}

.kanban-column:hover[b-ah86pm8hfx] {
    box-shadow: var(--df-card-shadow-hover, 0 4px 12px rgba(0,0,0,0.08));
}

.kanban-column-header[b-ah86pm8hfx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--df-border, var(--df-border));
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--df-surface);
    border-radius: var(--df-radius, 0.625rem) var(--df-radius, 0.625rem) 0 0;
}

.kanban-count[b-ah86pm8hfx] {
    background: var(--df-border, var(--df-border));
    color: var(--df-text-muted, var(--df-text-muted));
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
}

.kanban-column-body[b-ah86pm8hfx] {
    flex: 1;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    min-height: 100px;
}

.kanban-card[b-ah86pm8hfx] {
    background: var(--df-surface);
    border: 1px solid var(--df-border, var(--df-border));
    border-radius: 0.5rem;
    padding: 0.75rem;
    cursor: grab;
    transition: box-shadow var(--df-transition, 0.2s ease), transform var(--df-transition, 0.2s ease);
    box-shadow: var(--df-card-shadow, 0 1px 3px rgba(0,0,0,0.06));
}

/* A late card has to be findable while scanning a full board — the footer pill alone isn't
   enough at column density, so the whole card takes a danger rail. */
.kanban-card-overdue[b-ah86pm8hfx] {
    border-left: 3px solid var(--df-danger);
}

.kanban-card:hover[b-ah86pm8hfx] {
    box-shadow: var(--df-card-shadow-hover, 0 4px 12px rgba(0,0,0,0.08));
    transform: translateY(-1px);
}

.kanban-card.dragging[b-ah86pm8hfx] {
    opacity: 0.5;
    transform: rotate(2deg);
}

.kanban-card-header[b-ah86pm8hfx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.kanban-card-id[b-ah86pm8hfx] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--df-primary, var(--df-primary));
}

.kanban-card-title[b-ah86pm8hfx] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--df-text, var(--df-text));
    margin-bottom: 0.5rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-card-footer[b-ah86pm8hfx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.kanban-card-link[b-ah86pm8hfx] {
    color: inherit;
    text-decoration: none;
    display: block;
}

.kanban-card-link:hover[b-ah86pm8hfx] {
    color: inherit;
    text-decoration: none;
}

.kanban-card-assignee[b-ah86pm8hfx],
.kanban-card-tasks[b-ah86pm8hfx] {
    font-size: 0.72rem;
    color: var(--df-text-muted, var(--df-text-muted));
    white-space: nowrap;
}

html.nav-theme-dark .kanban-column[b-ah86pm8hfx] {
    background: #0b1220;
    border-color: var(--df-text);
}

html.nav-theme-dark .kanban-column-header[b-ah86pm8hfx] {
    background: #0f172a;
    border-bottom-color: var(--df-text);
    color: var(--df-border);
}

html.nav-theme-dark .kanban-count[b-ah86pm8hfx] {
    background: #334155;
    color: #cbd5e1;
}

html.nav-theme-dark .kanban-card[b-ah86pm8hfx] {
    background: #0f172a;
    border-color: var(--df-text);
    color: var(--df-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

html.nav-theme-dark .kanban-card:hover[b-ah86pm8hfx] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.55);
}

html.nav-theme-dark .kanban-card-id[b-ah86pm8hfx] {
    color: #c7d2fe;
}

html.nav-theme-dark .kanban-card-title[b-ah86pm8hfx] {
    color: var(--df-border);
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .kanban-column:hover[b-ah86pm8hfx] {
    box-shadow: var(--df-card-shadow-hover, 0 4px 12px rgba(0,0,0,0.08));
}
/* /Components/Pages/Tickets/TicketList.razor.rz.scp.css */
[b-d5fku98vgm] .ticket-row-link {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

[b-d5fku98vgm] .ticket-row-link:hover {
    color: inherit;
    text-decoration: none;
}

/* Sortable header styles */
[b-d5fku98vgm] .sortable-header {
    cursor: pointer;
    user-select: none;
    /* Keep header labels on a single line. Long labels are abbreviated in markup
       so they stay compact and don't steal width from the Title column. */
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

/* Keep optional/secondary columns compact so Title gets the leftover width.
   Data cells in these columns shouldn't wrap awkwardly. */
[b-d5fku98vgm] .tickets-table-section thead th:not(.col-title) {
    width: 1%;
}

/* Give the Title column priority over the table's remaining width. */
[b-d5fku98vgm] .col-title {
    width: 45%;
    min-width: 260px;
}

[b-d5fku98vgm] td.col-title {
    white-space: normal;
    word-break: break-word;
}

[b-d5fku98vgm] .sortable-header:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

[b-d5fku98vgm] .sort-icon {
    margin-left: 4px;
    font-size: 0.75rem;
    opacity: 0.6;
}

[b-d5fku98vgm] .next-task-name {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.875rem;
}

[b-d5fku98vgm] .sortable-header:hover .sort-icon {
    opacity: 1;
}

/* Filter modal styles */
[b-d5fku98vgm] .filter-modal .modal-body {
    padding: 1.25rem;
}

[b-d5fku98vgm] .filter-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

[b-d5fku98vgm] .filter-modal-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[b-d5fku98vgm] .filter-modal-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--df-text-muted);
    letter-spacing: 0.5px;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e9ecef;
}

[b-d5fku98vgm] .filter-modal-fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

[b-d5fku98vgm] .filter-modal-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

[b-d5fku98vgm] .filter-modal-field-label {
    font-size: 0.78rem;
    color: #495057;
    font-weight: 500;
}

[b-d5fku98vgm] .filter-modal .modal-footer {
    justify-content: space-between;
    background-color: var(--df-bg);
    border-top: 1px solid var(--df-border);
}

[b-d5fku98vgm] .filter-modal .modal-header {
    background-color: var(--df-bg);
    border-bottom: 1px solid var(--df-border);
}

[b-d5fku98vgm] .filter-tabs {
    border-bottom: 1px solid var(--df-border);
    padding: 0 1rem;
    margin: 0;
    flex-shrink: 0;
    background-color: var(--df-surface);
}

[b-d5fku98vgm] .filter-tabs .nav-link {
    color: var(--df-text-muted);
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

[b-d5fku98vgm] .filter-tabs .nav-link:hover {
    color: var(--df-primary, #0d6efd);
    background: rgba(13, 110, 253, 0.05);
}

[b-d5fku98vgm] .filter-tabs .nav-link.active {
    color: var(--df-primary, #0d6efd);
    background: var(--df-surface);
    border-color: var(--df-border) var(--df-border) var(--df-surface);
}

[b-d5fku98vgm] .filter-date-section {
    padding: 1rem;
    background-color: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
}

[b-d5fku98vgm] .filter-date-heading {
    font-size: 0.875rem;
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Assignment avatar styles */
[b-d5fku98vgm] .assignment-avatars {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

[b-d5fku98vgm] .assignment-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
    font-size: 0.65rem;
    cursor: default;
    overflow: hidden;
    border: 2px solid var(--df-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    margin-left: -8px;
    position: relative;
}

[b-d5fku98vgm] .assignment-chip:first-child {
    margin-left: 0;
}

[b-d5fku98vgm] .assignment-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

[b-d5fku98vgm] .assignment-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Row selection styles */
[b-d5fku98vgm] .table-active {
    background-color: rgba(13, 110, 253, 0.08) !important;
}

[b-d5fku98vgm] tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

[b-d5fku98vgm] tbody tr.table-active:hover {
    background-color: rgba(13, 110, 253, 0.12) !important;
}

/* Fixed header and scrollable table layout */
.tickets-page-container[b-d5fku98vgm] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px); /* Adjust based on your navbar height */
    overflow: hidden;
}

.tickets-header-section[b-d5fku98vgm] {
    flex-shrink: 0;
}

/* One-row header: title | search + filter controls | actions */
.tickets-page-header-v3[b-d5fku98vgm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tickets-title[b-d5fku98vgm] {
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.tickets-header-controls[b-d5fku98vgm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 400px;
    min-width: 280px;
}

.tickets-header-controls .tickets-search[b-d5fku98vgm] {
    flex: 1 1 220px;
    min-width: 160px;
    max-width: 380px;
}

.tickets-actions[b-d5fku98vgm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Transparent click-catcher behind open header dropdowns */
.dropdown-backdrop[b-d5fku98vgm] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

/* Kebab "More" menu */
.more-btn[b-d5fku98vgm] {
    width: 40px;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.35rem 0;
    font-weight: 700;
}

[b-d5fku98vgm] .more-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 200px;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding: 0.35rem;
    animation: columnChooserFadeIn-b-d5fku98vgm 0.15s ease-out;
}

[b-d5fku98vgm] .more-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.45rem 0.75rem;
    border-radius: 0.35rem;
    text-align: left;
    font-size: 0.875rem;
    color: var(--df-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

[b-d5fku98vgm] .more-menu-item:hover:not(:disabled) {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

[b-d5fku98vgm] .more-menu-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Category quick-filter pill bar */
.category-pill-bar[b-d5fku98vgm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0;
}

.category-pill[b-d5fku98vgm] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--df-border, var(--df-border));
    background: var(--df-surface);
    color: var(--df-text-muted);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}

.category-pill:hover[b-d5fku98vgm] {
    background: var(--df-primary-light);
    color: var(--df-primary);
    border-color: transparent;
}

.category-pill.active[b-d5fku98vgm] {
    background: var(--df-primary);
    color: #fff;
    border-color: var(--df-primary);
}

.category-pill .cat-icon[b-d5fku98vgm] {
    font-size: 0.875rem;
    line-height: 1;
}

/* Kanban Status quick-filter — a pill that opens a multi-select dropdown */
.status-filter[b-d5fku98vgm] {
    display: inline-flex;
}

.status-pill-caret[b-d5fku98vgm] {
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.75;
}

.status-pill-count[b-d5fku98vgm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--df-surface);
    color: var(--df-primary);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.status-menu[b-d5fku98vgm] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1050;
    min-width: 220px;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.4rem;
}

.status-menu-header[b-d5fku98vgm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.4rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--df-border);
    margin-bottom: 0.3rem;
}

.status-menu-list[b-d5fku98vgm] {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}

.status-menu-item[b-d5fku98vgm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.375rem;
    font-size: 0.82rem;
    color: var(--df-text);
    cursor: pointer;
    margin: 0;
}

.status-menu-item:hover[b-d5fku98vgm] {
    background: var(--df-primary-light);
}

.status-menu-item.sel[b-d5fku98vgm] {
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-weight: 600;
}

.status-menu-item input[b-d5fku98vgm] {
    cursor: pointer;
}

/* Reuse the column's badge background as a small status dot */
.status-menu-dot[b-d5fku98vgm] {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Filter chips row (when any filters active) */
.filter-chips-row[b-d5fku98vgm] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.filter-chip[b-d5fku98vgm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--df-primary-light);
    color: var(--df-primary);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.2rem 0.25rem 0.2rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
}

.filter-chip .chip-key[b-d5fku98vgm] {
    color: var(--df-text-muted);
    font-weight: 500;
}

.filter-chip.chip-mine[b-d5fku98vgm] {
    background: var(--df-success-light);
    color: var(--df-success);
}

/* Due presets read as urgency, not just another facet — worth standing out from the neutral chips. */
.filter-chip.chip-due[b-d5fku98vgm] {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

.chip-close[b-d5fku98vgm] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.chip-close:hover[b-d5fku98vgm] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.chip-clear-all[b-d5fku98vgm] {
    color: var(--df-text-muted) !important;
    font-size: 0.78rem;
    padding: 0.1rem 0.4rem;
}

.chip-clear-all:hover[b-d5fku98vgm] {
    color: var(--df-danger) !important;
}

.filter-add-btn[b-d5fku98vgm] {
    font-weight: 500;
}

.tickets-header-section .card[b-d5fku98vgm] {
    overflow: visible;
}

.tickets-table-section[b-d5fku98vgm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.tickets-table-section .card[b-d5fku98vgm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.tickets-table-section .table-responsive[b-d5fku98vgm] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Sticky table header */
[b-d5fku98vgm] .tickets-table-section thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--df-bg);
}

[b-d5fku98vgm] .tickets-table-section thead th {
    background-color: var(--df-bg);
    border-bottom: 2px solid var(--df-border);
}

.tickets-table-section .card-footer[b-d5fku98vgm] {
    flex-shrink: 0;
    border-top: 1px solid var(--df-border);
}

/* Column chooser dropdown */
[b-d5fku98vgm] .column-chooser-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 220px;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding: 0;
    animation: columnChooserFadeIn-b-d5fku98vgm 0.15s ease-out;
}

@keyframes columnChooserFadeIn-b-d5fku98vgm {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-d5fku98vgm] .column-chooser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.78rem;
}

[b-d5fku98vgm] .column-chooser-list {
    padding: 0.35rem 0;
    max-height: 520px;
    overflow-y: auto;
}

[b-d5fku98vgm] .column-chooser-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.1s ease;
    margin: 0;
}

[b-d5fku98vgm] .column-chooser-item:hover {
    background-color: #f0f4ff;
}

[b-d5fku98vgm] .column-chooser-item.disabled {
    opacity: 0.5;
    cursor: default;
}

[b-d5fku98vgm] .column-chooser-item.disabled:hover {
    background-color: transparent;
}

[b-d5fku98vgm] .column-chooser-item .form-check-input {
    margin: 0;
    cursor: pointer;
}

[b-d5fku98vgm] .column-chooser-item.disabled .form-check-input {
    cursor: default;
}

/* ==========================================================================
   List view modes — Standard (default table above), Refined, and Dense.
   Chosen per user via the .view-switcher segmented control.
   ========================================================================== */

/* Segmented view switcher keeps a fixed width so icons don't jump. */
.view-switcher .btn[b-d5fku98vgm] {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

/* ---- Refined view: two-line ticket cell + priority accent + progress ---- */
[b-d5fku98vgm] .refined-title {
    font-weight: 600;
    color: var(--df-text);
    display: block;
}

[b-d5fku98vgm] .refined-sub {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--df-text-muted);
}

[b-d5fku98vgm] .refined-sub .refined-id {
    font-weight: 700;
    color: var(--df-text);
    font-variant-numeric: tabular-nums;
}

[b-d5fku98vgm] .refined-sub .badge {
    font-size: 0.68rem;
    font-weight: 600;
}

[b-d5fku98vgm] .refined-sub .refined-sep {
    opacity: 0.4;
}

/* Priority accent rail on the leading (checkbox) cell of each refined row. */
[b-d5fku98vgm] .refined-row .refined-accent {
    border-left: 3px solid transparent;
}
[b-d5fku98vgm] .refined-row.prio-critical .refined-accent { border-left-color: var(--df-danger); }
[b-d5fku98vgm] .refined-row.prio-high .refined-accent { border-left-color: var(--df-warning); }
[b-d5fku98vgm] .refined-row.prio-medium .refined-accent { border-left-color: var(--df-info); }
[b-d5fku98vgm] .refined-row.prio-low .refined-accent { border-left-color: #cbd5e1; }

[b-d5fku98vgm] .refined-created {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}

[b-d5fku98vgm] .refined-prog {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
}

[b-d5fku98vgm] .refined-prog-lbl {
    font-size: 0.72rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Shared task-progress bar (used by the Refined view). */
[b-d5fku98vgm] .prog {
    width: 100%;
    height: 5px;
    border-radius: 50rem;
    background: #eef1f5;
    overflow: hidden;
}
[b-d5fku98vgm] .prog > span {
    display: block;
    height: 100%;
    border-radius: 50rem;
    background: var(--df-success);
}
[b-d5fku98vgm] .prog.part > span {
    background: var(--df-primary);
}

/* ---- Dense view: tighten the standard table, zebra stripe, shrink chrome ---- */
[b-d5fku98vgm] .view-dense .table {
    font-size: 0.82rem;
}

[b-d5fku98vgm] .view-dense .table > tbody > tr > td,
[b-d5fku98vgm] .view-dense .table > thead > tr > th {
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
}

[b-d5fku98vgm] .view-dense .table > tbody > tr:nth-child(even):not(.table-active) {
    background-color: #fcfdff;
}

[b-d5fku98vgm] .view-dense .badge {
    font-size: 0.68rem;
    padding: 0.14rem 0.4rem;
}

[b-d5fku98vgm] .view-dense .assignment-chip {
    width: 22px;
    height: 22px;
}

/* Refined column layout: cap the ticket column and let the meta columns spread
   evenly, instead of inheriting the standard table's col-title:45% / th:1% sizing
   (which crammed status→created into a bunched block on the far right). */
[b-d5fku98vgm] .refined-table .col-title {
    width: 38%;
    min-width: 300px;
}

[b-d5fku98vgm] .refined-table thead th:not(.col-title),
[b-d5fku98vgm] .refined-table tbody td:not(.col-title):not(.refined-accent) {
    width: auto;
    white-space: nowrap;
}

[b-d5fku98vgm] .refined-row td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    vertical-align: middle;
}

[b-d5fku98vgm] .refined-title {
    font-size: 0.95rem;
}

/* ---- Split view: compact master list + preview pane ---- */
.tickets-split-section[b-d5fku98vgm] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 1rem;
}

[b-d5fku98vgm] .split-list {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow-y: auto;
    min-height: 0;
}

[b-d5fku98vgm] .split-li {
    display: grid;
    grid-template-columns: 3px 1fr auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #eef1f5;
    cursor: pointer;
    transition: background-color var(--df-transition);
}

[b-d5fku98vgm] .split-li:last-child {
    border-bottom: 0;
}

[b-d5fku98vgm] .split-li:hover {
    background: #f8faff;
}

[b-d5fku98vgm] .split-li.sel {
    background: var(--df-primary-light);
}

[b-d5fku98vgm] .split-rail {
    align-self: stretch;
    border-radius: 3px;
    background: transparent;
}
[b-d5fku98vgm] .split-li.prio-critical .split-rail { background: var(--df-danger); }
[b-d5fku98vgm] .split-li.prio-high .split-rail { background: var(--df-warning); }
[b-d5fku98vgm] .split-li.prio-medium .split-rail { background: var(--df-info); }
[b-d5fku98vgm] .split-li.prio-low .split-rail { background: #cbd5e1; }

[b-d5fku98vgm] .split-li-title {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
}

[b-d5fku98vgm] .split-li-sub {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--df-text-muted);
}

[b-d5fku98vgm] .split-li-sub .split-id {
    font-weight: 700;
    color: var(--df-text);
    font-variant-numeric: tabular-nums;
}

[b-d5fku98vgm] .split-li-sub .badge {
    font-size: 0.66rem;
}

[b-d5fku98vgm] .split-li-sub .split-sep {
    opacity: 0.4;
}

[b-d5fku98vgm] .split-li-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

[b-d5fku98vgm] .split-date {
    font-size: 0.7rem;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[b-d5fku98vgm] .split-detail {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    overflow-y: auto;
    min-height: 0;
    padding: 1.25rem 1.4rem;
}

[b-d5fku98vgm] .split-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

[b-d5fku98vgm] .split-detail-id {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--df-text-muted);
}

[b-d5fku98vgm] .split-detail-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0.2rem 0 0;
}

[b-d5fku98vgm] .split-detail-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.9rem 0 1.1rem;
}

[b-d5fku98vgm] .split-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 1.5rem;
    margin-bottom: 1.25rem;
}

[b-d5fku98vgm] .split-field-k {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--df-text-muted);
}

[b-d5fku98vgm] .split-field-v {
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

[b-d5fku98vgm] .split-detail-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--df-text-muted);
    margin: 1rem 0 0.4rem;
}

[b-d5fku98vgm] .split-nexttask {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

[b-d5fku98vgm] .split-detail-indicators {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--df-text-muted);
}

@media (max-width: 900px) {
    .tickets-split-section[b-d5fku98vgm] {
        grid-template-columns: 1fr;
    }
}

/* ── Phone: rows become cards ────────────────────────────────────────────────
   A ten-column table in 390px is a horizontal scrollbar with a ticket somewhere
   inside it. Each row is turned into a wrapping block instead: the title takes
   the first line, and the id, type, status, priority and assignees flow under it
   as the chips they already are. No per-cell labels, because every cell here is
   either a badge or an avatar that reads for itself — the two that aren't (id
   and title) are the two people scan for.

   Done in CSS rather than a second markup path so the column chooser keeps
   working: whichever cells the user has switched on are the cells that flow. */
@media (max-width: 640.98px) {
    /* The header stacks. An earlier pass made it scroll sideways instead, which kept every control
       reachable and made the page look broken: half-buttons at the edge, the category pills
       overlapping the ones behind them, and no way to tell there was more. Four honest rows —
       title, search, filters, action — beat one row you have to discover. */
    .tickets-header-section[b-d5fku98vgm]  .page-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .tickets-header-section[b-d5fku98vgm]  .tickets-title {
        flex: 1 1 auto;
        font-size: 1.2rem;
        margin: 0;
    }

    .tickets-header-section[b-d5fku98vgm]  .tickets-header-controls {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 0.4rem;
        min-width: 0;
    }

    .tickets-header-section[b-d5fku98vgm]  .tickets-search {
        flex: 1 1 100%;
        max-width: none;
    }

    /* 16px exactly: iOS zooms the whole page in when a smaller field takes focus, and a search box
       that shoves the list sideways every time you tap it is the single most irritating thing a
       web app does on a phone. */
    .tickets-header-section[b-d5fku98vgm]  .tickets-search input {
        font-size: 16px;
    }

    /* Filters flow and share rows rather than each claiming a full-width line of its own, and
       they *wrap* rather than scroll: a strip that scrolls sideways hides its own contents behind
       a gesture nobody is told about, and the buttons past the edge may as well not exist. */
    .tickets-header-section[b-d5fku98vgm]  .tickets-header-controls > .btn-group,
    .tickets-header-section[b-d5fku98vgm]  .category-pill-bar {
        flex: 0 1 auto;
        max-width: 100%;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .tickets-header-section[b-d5fku98vgm]  .tickets-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    /* Buttons size to their label. Letting them grow to fill the row — which an earlier pass did —
       gave a 370px "+ New Ticket" spanning the whole screen and three filter buttons at 140px
       each: a phone-sized page made of desktop-sized furniture. Stretching a button says "this is
       the important one", and saying it about all four says nothing. */
    .tickets-header-section[b-d5fku98vgm]  .tickets-actions > *,
    .tickets-header-section[b-d5fku98vgm]  .tickets-actions .btn,
    .tickets-header-section[b-d5fku98vgm]  .tickets-header-controls .btn-group .btn,
    .tickets-header-section[b-d5fku98vgm]  .tickets-header-controls > .btn {
        flex: 0 0 auto;
    }

    /* Standard / Refined / Dense / Split is a choice about how much to pack into a desktop
       table. The phone renders one list whichever is picked, so the switcher would be four
       buttons that visibly do nothing. */
    .tickets-header-section[b-d5fku98vgm]  .view-switcher {
        display: none;
    }


    .tickets-table-section[b-d5fku98vgm]  table thead {
        display: none;
    }

    /* ── The row is a card ───────────────────────────────────────────────────────────────
       A phone opened on this page is usually answering "how is this going", not "which of
       these exist" — and a two-line row cannot say. Each ticket becomes a card: a priority
       rail down the leading edge, the title, the identifiers under it, then a footer with
       the due date and how far through its tasks it is. Five to a screen rather than seven,
       which is the trade: you stop opening tickets to find out where they are.

       Still the desktop table restyled, not a second markup path. The list renders every
       matching ticket (pageSize: int.MaxValue), so a parallel card list would mean two DOM
       nodes per ticket, on every device, to serve one of them.

       The consequence is that the column chooser still decides what a card can show. Due and
       Tasks are both on by default; switch them off and the footer goes too — which is the
       right answer, because it is the same preference being honoured. */

    /* The table stops being a table, and the card around it stops being a card — otherwise
       the rows are cards inside a card, and neither edge means anything. */
    .tickets-table-section[b-d5fku98vgm]  .card {
        border: 0;
        background: none;
        box-shadow: none;
    }

    .tickets-table-section[b-d5fku98vgm]  table {
        display: block;
        background: none;
    }

    .tickets-table-section[b-d5fku98vgm]  table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* The bottom padding is the FAB's: the last card must not be the one permanently
           underneath it. */
        padding: 12px 14px calc(84px + env(safe-area-inset-bottom, 0px));
    }

    .tickets-table-section[b-d5fku98vgm]  table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--df-row-gap);
        row-gap: 4px;
        position: relative;
        /* 17px leading = 13px of padding plus the 4px rail. */
        padding: 11px 13px 12px 17px;
        background-color: var(--df-surface);
        border: 1px solid var(--df-border);
        border-radius: var(--df-radius);
        box-shadow: var(--df-card-shadow);
        overflow: hidden;
        transition: box-shadow 0.12s ease;
    }

    /* Pressed state. A card that does not acknowledge the tap feels unresponsive even when
       the navigation is instant. */
    .tickets-table-section[b-d5fku98vgm]  table tbody tr:active {
        box-shadow: var(--df-card-shadow-hover);
    }

    /* The rail. Priority is the one field worth carrying colour on a list, and an edge can
       carry it without competing with the title the way a filled pill did. Never the only
       carrier — the word is still on the meta line below. Low priority keeps the neutral
       border, so the coloured rails mean something. */
    .tickets-table-section[b-d5fku98vgm]  table tbody tr::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--df-border);
    }

    /* The same four colours the Refined view's accent and the Split view's rail already use,
       which are in turn GetPriorityBadge's. Three rails meaning three different things by
       colour would be worse than no rail. */
    .tickets-table-section[b-d5fku98vgm]  table tbody tr.prio-critical::before {
        background: var(--df-danger);
    }

    .tickets-table-section[b-d5fku98vgm]  table tbody tr.prio-high::before {
        background: var(--df-warning);
    }

    .tickets-table-section[b-d5fku98vgm]  table tbody tr.prio-medium::before {
        background: var(--df-info);
    }

    .tickets-table-section[b-d5fku98vgm]  table td {
        flex: 0 0 auto;
        border: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
    }

    /* Line one. Two lines maximum: a wrapped six-line title makes the list unscannable, and
       one line ellipsised at 40 characters is how you open the wrong ticket. The right
       padding is the avatar's, which is pinned to the corner rather than flowing. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-title {
        order: 1;
        flex: 1 1 100%;
        padding-right: 34px !important;
        font-size: var(--df-row-title);
        font-weight: 600;
        line-height: 1.3;
        color: var(--df-text);
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
    }

    /* Line two: the identifiers, quiet, on one line — id · type, then the status pill and
       the priority word. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-id,
    .tickets-table-section[b-d5fku98vgm]  table td.col-type,
    .tickets-table-section[b-d5fku98vgm]  table td.col-status,
    .tickets-table-section[b-d5fku98vgm]  table td.col-priority {
        margin-top: 5px;
        font-size: var(--df-row-meta);
        color: var(--df-text-muted);
        line-height: 1.35;
        white-space: nowrap;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-id { order: 2; }
    .tickets-table-section[b-d5fku98vgm]  table td.col-type { order: 3; }
    .tickets-table-section[b-d5fku98vgm]  table td.col-status { order: 4; }
    .tickets-table-section[b-d5fku98vgm]  table td.col-priority { order: 5; }

    .tickets-table-section[b-d5fku98vgm]  table td.col-id::after,
    .tickets-table-section[b-d5fku98vgm]  table td.col-type::after {
        content: " · ";
        color: var(--df-border);
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-id a,
    .tickets-table-section[b-d5fku98vgm]  table td.col-id strong {
        font-weight: 600;
        color: var(--df-text-muted);
        text-decoration: none;
    }

    /* Type is plain text — it is a label, not a state. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-type .badge {
        background: none !important;
        color: inherit !important;
        padding: 0;
        font-size: inherit;
        font-weight: 500;
    }

    /* Status keeps a pill, because on a card it is the answer to "where is this" — but the
       soft tint the design system uses for a chip rather than the solid fill five of these
       side by side made unreadable. The colour comes from the kanban column's own badge
       class, so a renamed or recoloured column follows automatically. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2px 8px;
        border: 1px solid transparent;
        border-radius: 50rem;
        font-size: 0.7rem;
        font-weight: 500;
    }

    /* The dot, so the tint is never doing the work alone. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex: 0 0 auto;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge.bg-secondary {
        background: var(--df-bg) !important;
        border-color: var(--df-border);
        color: var(--df-text-muted) !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge.bg-primary {
        background: var(--df-primary-light) !important;
        border-color: var(--df-primary-border);
        color: var(--df-primary) !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge.bg-info {
        background: var(--df-info-light) !important;
        border-color: var(--df-info-border);
        color: var(--df-info) !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge.bg-warning {
        background: var(--df-warning-light) !important;
        border-color: var(--df-warning-border);
        color: var(--df-warning) !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge.bg-success {
        background: var(--df-success-light) !important;
        border-color: var(--df-success-border);
        color: var(--df-success) !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge.bg-danger {
        background: var(--df-danger-light) !important;
        border-color: var(--df-danger-border);
        color: var(--df-danger) !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-status .badge.bg-purple {
        background: var(--df-purple-light) !important;
        border-color: var(--df-purple-border);
        color: var(--df-purple) !important;
    }

    /* Priority is the dot-and-word from the row this replaces, kept because the rail is a
       colour and a colour alone is not a label. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-priority .badge {
        background: none !important;
        color: inherit !important;
        padding: 0;
        font-size: inherit;
        font-weight: 500;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-priority .badge::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 5px;
        border-radius: 50%;
        background: currentColor;
        vertical-align: baseline;
    }

    /* Matching the rail above it. The shipped row painted High red, which was defensible when
       priority was one word in a line of four — but the rail is the louder signal now, and a
       row whose edge says amber while its own label says red is worse than either. */
    .tickets-table-section[b-d5fku98vgm]  table tr.prio-critical td.col-priority .badge {
        color: var(--df-danger) !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table tr.prio-high td.col-priority .badge {
        color: var(--df-warning) !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table tr.prio-medium td.col-priority .badge {
        color: var(--df-info) !important;
    }

    /* The assignee is pinned to the corner rather than flowing with the meta line: "whose is
       this" is a glance, and on a card there is a corner to glance at. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-assigned {
        order: 6;
        position: absolute;
        top: 10px;
        right: 12px;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-assigned .assignment-avatars {
        gap: 2px;
    }

    /* ── The footer: when it is due, and how far through it is ───────────────────────────
       The break. Without it the footer only drops to its own line when the meta line happens
       to be too full to hold it — so a short title and a one-word status put the due date and
       the progress bar up beside the id, and the card has no footer at all on some rows and a
       footer on others. A zero-height 100% flex item forces the wrap every time. It is drawn
       on the row rather than added to the markup, so the desktop table never sees it. */
    .tickets-table-section[b-d5fku98vgm]  table tbody tr::after {
        content: "";
        order: 7;
        flex: 0 0 100%;
        height: 0;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-due,
    .tickets-table-section[b-d5fku98vgm]  table td.col-tasks {
        display: flex;
        align-items: center;
        margin-top: 9px;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--df-text-muted);
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-due {
        order: 8;
        flex: 0 0 auto;
        gap: 5px;
    }

    /* RenderDueCell puts "3d late" in a block under the date; on one line it reads as one
       phrase. Colour is already the pill's own, and only appears once the date matters. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-due div {
        margin-top: 0 !important;
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-tasks {
        order: 9;
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 8px;
        font-variant-numeric: tabular-nums;
    }

    /* The bar is the count the desktop already shows, drawn. Track and fill in one element:
       a gradient sized to --task-pct over the track colour, so no second node is added to a
       cell that every desktop user also renders. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-tasks::before {
        content: "";
        flex: 1 1 auto;
        min-width: 40px;
        height: 5px;
        border: 1px solid var(--df-border);
        border-radius: 50rem;
        background:
            linear-gradient(var(--df-primary), var(--df-primary)) left center / var(--task-pct, 0%) 100% no-repeat,
            var(--df-bg);
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-tasks.tasks-done::before {
        background:
            linear-gradient(var(--df-success), var(--df-success)) left center / 100% 100% no-repeat,
            var(--df-bg);
    }

    /* A ticket with no tasks has no progress to report, and "0/0" beside an empty bar reads as
       a ticket that is going nowhere rather than one that was never broken down. A ticket with
       no due date has nothing to say either — and a card whose entire footer is a single em
       dash has grown a line in order to say it. Both cells go; if that empties the footer, the
       card is simply shorter. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-tasks.tasks-none,
    .tickets-table-section[b-d5fku98vgm]  table td.col-due.due-empty {
        display: none;
    }

    /* Everything else the desktop table offers is off. Not because it does not matter, but
       because it does not matter *here* — the ticket is one tap away and shows all of it. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-select,
    .tickets-table-section[b-d5fku98vgm]  table td.col-created,
    .tickets-table-section[b-d5fku98vgm]  table td.col-completed,
    .tickets-table-section[b-d5fku98vgm]  table td.col-sprint,
    .tickets-table-section[b-d5fku98vgm]  table td.col-product,
    .tickets-table-section[b-d5fku98vgm]  table td.col-requestedby,
    .tickets-table-section[b-d5fku98vgm]  table td.col-firstopentask,
    .tickets-table-section[b-d5fku98vgm]  table td.refined-accent,
    .tickets-table-section[b-d5fku98vgm]  table td.refined-created,
    .tickets-table-section[b-d5fku98vgm]  table td:not([class]) {
        display: none;
    }

    /* The Refined view builds its own second line inside the title cell (#id · type · product
       · sprint), which is already the shape this card wants — so it keeps it, at the same
       quiet size as the meta line the other views compose from separate cells. */
    .tickets-table-section[b-d5fku98vgm]  table td.col-title .refined-sub {
        display: block;
        margin-top: 3px;
        font-size: 0.76rem;
        font-weight: 400;
        color: var(--df-text-muted);
    }

    .tickets-table-section[b-d5fku98vgm]  table td.col-title .refined-sub .badge {
        background: none !important;
        color: inherit !important;
        padding: 0;
        font-size: inherit;
        font-weight: 500;
    }

    /* ── + New Ticket becomes the floating action button ──────────────────────────────────
       One primary action, in the corner a thumb actually reaches, instead of a slab at the
       top of the page competing with the filters for the first thing you see. Below the nav
       drawer (z 1000) and its scrim (999): a button floating over an open menu is a bug. */
    .tickets-header-section[b-d5fku98vgm]  .new-ticket-btn {
        position: fixed;
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        z-index: 900;
        width: 56px;
        height: 56px;
        padding: 0 !important;
        border-radius: 50%;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
    }

    .tickets-header-section[b-d5fku98vgm]  .new-ticket-label {
        display: none;
    }

    /* ── Filters open as a sheet ──────────────────────────────────────────────────────────
       Centred, the filter modal is a floating slab with page showing round all four edges and
       its first control halfway up the screen. Anchored to the bottom it is the sheet every
       other app on the phone puts a filter in, and it opens within reach of the thumb that
       asked for it. */
    .filter-modal-dialog[b-d5fku98vgm] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        max-height: 88vh;
    }

    .filter-modal-dialog .filter-modal[b-d5fku98vgm] {
        max-height: 88vh;
        border-radius: 1rem 1rem 0 0;
    }

    /* Four tabs across one row. At desktop padding they wrap, which leaves Options alone on a
       second line looking like it belongs to the body rather than the tab strip. Equal widths
       rather than tighter padding, so the row stays even whatever the labels say. */
    .filter-modal-dialog .filter-tabs[b-d5fku98vgm] {
        padding: 0 0.3rem;
        flex-wrap: nowrap;
    }

    .filter-modal-dialog .filter-tabs .nav-item[b-d5fku98vgm] {
        flex: 1 1 0;
        min-width: 0;
    }

    .filter-modal-dialog .filter-tabs .nav-link[b-d5fku98vgm] {
        width: 100%;
        padding: 0.5rem 0.2rem;
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark[b-d5fku98vgm]  .filter-modal-section-label {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark[b-d5fku98vgm]  .filter-date-section {
    background-color: var(--df-surface);
    border: 1px solid var(--df-border);
}
html.nav-theme-dark[b-d5fku98vgm]  .filter-date-heading {
    color: var(--df-text-muted);
}
html.nav-theme-dark[b-d5fku98vgm]  .column-chooser-header {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark[b-d5fku98vgm]  .refined-row.prio-low .refined-accent {
    border-left-color: var(--df-border);
}
html.nav-theme-dark[b-d5fku98vgm]  .prog {
    background: var(--df-bg);
}
html.nav-theme-dark[b-d5fku98vgm]  .split-li {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark[b-d5fku98vgm]  .split-li:hover {
    background: var(--df-surface);
}
html.nav-theme-dark[b-d5fku98vgm]  .split-li.prio-low .split-rail {
    background: var(--df-border);
}
/* /Components/Pages/Timecards/TimecardPage.razor.rz.scp.css */
/* Mode toggle pill (Hours / Range) */
.tc-mode-toggle[b-eivcni2q3m] {
    background: var(--df-border);
}

html.nav-theme-dark .tc-mode-toggle[b-eivcni2q3m] {
    background: var(--df-text);
}

/* Summary card "Lunch" amount — orange accent that adapts to theme. */
.tc-lunch-amount[b-eivcni2q3m] {
    color: #b45309;
}

html.nav-theme-dark .tc-lunch-amount[b-eivcni2q3m] {
    color: #fbbf24;
}

/* Lunch break banner shown above the time-entries table. */
.tc-lunch-banner[b-eivcni2q3m] {
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
}

html.nav-theme-dark .tc-lunch-banner[b-eivcni2q3m] {
    background: rgba(245, 158, 11, 0.12);
    border-left-color: #fbbf24;
    color: var(--df-text);
}

/* ===== Bulk Generate — employee scope & picker ===== */

.bulk-scope[b-eivcni2q3m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.bulk-scope-opt[b-eivcni2q3m] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    transition: border-color var(--df-transition), background-color var(--df-transition);
}

.bulk-scope-opt:hover[b-eivcni2q3m] {
    border-color: #cbd5e1;
}

.bulk-scope-opt.is-active[b-eivcni2q3m] {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
}

.bulk-scope-opt input[b-eivcni2q3m] {
    margin: 0.2rem 0 0;
    accent-color: var(--df-primary);
}

.bulk-scope-title[b-eivcni2q3m] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--df-text);
}

.bulk-scope-sub[b-eivcni2q3m] {
    display: block;
    font-size: 0.75rem;
    color: var(--df-text-muted);
}

.bulk-picker[b-eivcni2q3m] {
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.bulk-picker-toolbar[b-eivcni2q3m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--df-border);
    background: var(--df-bg);
}

.bulk-picker-search[b-eivcni2q3m] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    padding: 0.35rem 0.6rem;
    color: var(--df-text);
}

.bulk-picker-sep[b-eivcni2q3m] {
    color: var(--df-border);
}

.bulk-picker-list[b-eivcni2q3m] {
    max-height: 13.5rem;
    overflow-y: auto;
}

.bulk-picker-empty[b-eivcni2q3m] {
    padding: 1rem 0.7rem;
    font-size: 0.85rem;
    color: var(--df-text-muted);
    text-align: center;
}

.bulk-emp[b-eivcni2q3m] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--df-bg);
    cursor: pointer;
    margin: 0;
    transition: background-color var(--df-transition);
}

.bulk-emp:last-child[b-eivcni2q3m] {
    border-bottom: 0;
}

.bulk-emp:hover[b-eivcni2q3m] {
    background: var(--df-primary-light);
}

.bulk-emp input[b-eivcni2q3m] {
    accent-color: var(--df-primary);
    margin: 0;
}

.bulk-emp-name[b-eivcni2q3m] {
    flex: 1 1 auto;
    font-size: 0.875rem;
    color: var(--df-text);
}

.bulk-picker-footer[b-eivcni2q3m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.7rem;
    border-top: 1px solid var(--df-border);
    background: var(--df-bg);
    font-size: 0.8125rem;
    color: var(--df-text-muted);
}

/* ── Phone: the history table becomes cards ──────────────────────────────────
   790px of columns in a 390px window. It used to scroll sideways inside its own card, which is
   the polite version of the problem and still means a table you drag to read. Each row stacks
   into a card instead: the date and the person on top, then the times as labelled pairs.

   The labels come from data-label on each cell, because unlike the ticket list — where every
   value is a badge or a name that reads for itself — "06:30 AM" is meaningless without knowing
   whether it is a clock-in or a clock-out. */
@media (max-width: 640.98px) {
    .table-responsive[b-eivcni2q3m] {
        overflow-x: visible;
    }

    .table-responsive table[b-eivcni2q3m],
    .table-responsive thead[b-eivcni2q3m],
    .table-responsive tbody[b-eivcni2q3m],
    .table-responsive tr[b-eivcni2q3m],
    .table-responsive td[b-eivcni2q3m] {
        display: block;
        width: auto;
    }

    .table-responsive thead[b-eivcni2q3m] {
        display: none;
    }

    /* Same rhythm as the ticket list and a ticket's tasks — see the phone block in app.css. */
    .table-responsive tbody tr[b-eivcni2q3m] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 10px;
        padding: var(--df-row-pad-y) var(--df-row-pad-x);
        min-height: var(--df-row-min-h);
        background-color: var(--df-surface);
        transition: background-color 0.12s ease;
    }

    .table-responsive tbody tr + tr[b-eivcni2q3m] {
        background-image: linear-gradient(var(--df-border), var(--df-border));
        background-size: calc(100% - var(--df-row-rule-inset)) 1px;
        background-position: var(--df-row-rule-inset) 0;
        background-repeat: no-repeat;
    }

    .table-responsive tbody tr:active[b-eivcni2q3m] {
        background-color: var(--df-bg);
    }

    .table-responsive tbody td[b-eivcni2q3m] {
        border: 0 !important;
        padding: 0 !important;
        font-size: 0.82rem;
    }

    /* Line one: which day, and whose. */
    /* 600, not the fw-medium the markup carries: every list title on a phone is 600, and one
       surface a half-step lighter is the sort of thing that reads as sloppy without anyone being
       able to say why. */
    .table-responsive tbody td.tc-col-date[b-eivcni2q3m] {
        grid-column: 1 / -1;
        font-size: var(--df-row-title);
        font-weight: 600 !important;
    }

    .table-responsive tbody td.tc-col-user[b-eivcni2q3m] {
        grid-column: 1 / -1;
        color: var(--df-text-muted);
        font-size: var(--df-row-meta);
    }

    /* The rest read as label-over-value pairs, two to a row. */
    .table-responsive tbody td[data-label]:not(.tc-col-date):not(.tc-col-user)[b-eivcni2q3m]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--df-text-muted);
    }

    /* The timecard number and the open/closed dot are decoration next to a date you already
       recognise — they cost a row each and say nothing you tapped the card to find out. */
    .table-responsive tbody td.tc-col-number[b-eivcni2q3m],
    .table-responsive tbody td.tc-col-state[b-eivcni2q3m] {
        display: none;
    }
}
/* /Components/Pages/UserProfile.razor.rz.scp.css */
.card[b-i8beshvu9c] {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.form-label[b-i8beshvu9c] {
    color: #495057;
}

.btn-primary[b-i8beshvu9c] {
    min-width: 140px;
}

[b-i8beshvu9c] .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* ============================================
   Desktop apps card
   Every colour is a --df-* token so the dark theme repaints it; a literal
   hex here would ship white-on-white for anyone with dark mode on.
   ============================================ */

.desktop-grid[b-i8beshvu9c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

@media (max-width: 575.98px) {
    .desktop-grid[b-i8beshvu9c] {
        grid-template-columns: 1fr;
    }
}

.desktop-tile[b-i8beshvu9c] {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    transition: box-shadow var(--df-transition), border-color var(--df-transition);
}

.desktop-tile:hover[b-i8beshvu9c] {
    box-shadow: var(--df-card-shadow-hover);
    border-color: var(--df-primary-border);
}

.desktop-tile.is-unpublished[b-i8beshvu9c] {
    opacity: 0.75;
}

.desktop-tile.is-unpublished:hover[b-i8beshvu9c] {
    box-shadow: none;
    border-color: var(--df-border);
}

/* The page-wide .btn-primary min-width above is sized for the Save Changes button; inside a
   half-width tile it stretches Download into the meta row. */
.desktop-tile .btn-primary[b-i8beshvu9c] {
    min-width: 0;
}

.desktop-icon[b-i8beshvu9c] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: #fff;
}

/* The two app marks. Deliberately different hues so the tiles are told apart at a glance —
   Studio on the primary accent, Loop on the info one. */
.desktop-icon-studio[b-i8beshvu9c] {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-purple) 100%);
}

.desktop-icon-loop[b-i8beshvu9c] {
    background: linear-gradient(135deg, var(--df-info) 0%, #0ea5e9 100%);
}

.is-unpublished .desktop-icon[b-i8beshvu9c] {
    filter: grayscale(1);
}

.desktop-blurb[b-i8beshvu9c] {
    flex: 1;
    margin: 0.625rem 0 0;
    color: var(--df-text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.desktop-meta[b-i8beshvu9c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 0.5rem;
    color: var(--df-text-muted);
    font-size: 0.72rem;
}

.desktop-meta span[b-i8beshvu9c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.desktop-empty[b-i8beshvu9c] {
    padding: 1.375rem;
    text-align: center;
    border: 1px dashed var(--df-border);
    border-radius: var(--df-radius);
    color: var(--df-text-muted);
    font-size: 0.78rem;
}

/* ---- disclosures ---- */

.desktop-notes[b-i8beshvu9c],
.desktop-setup[b-i8beshvu9c] {
    font-size: 0.78rem;
}

.desktop-notes[b-i8beshvu9c] {
    margin-top: 0.625rem;
}

.desktop-setup[b-i8beshvu9c] {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--df-border);
}

.desktop-notes > summary[b-i8beshvu9c],
.desktop-setup > summary[b-i8beshvu9c] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--df-primary);
}

.desktop-notes > summary[b-i8beshvu9c]::-webkit-details-marker,
.desktop-setup > summary[b-i8beshvu9c]::-webkit-details-marker {
    display: none;
}

/* \F282 is chevron-down, so it is the *closed* state that gets rotated. */
.desktop-notes > summary[b-i8beshvu9c]::before,
.desktop-setup > summary[b-i8beshvu9c]::before {
    content: "\F282";
    font-family: "bootstrap-icons";
    font-size: 0.7rem;
    transform: rotate(-90deg);
    transition: transform var(--df-transition);
}

.desktop-notes[open] > summary[b-i8beshvu9c]::before,
.desktop-setup[open] > summary[b-i8beshvu9c]::before {
    transform: rotate(0deg);
}

.desktop-notes-body[b-i8beshvu9c] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    background: var(--df-bg);
    color: var(--df-text-muted);
    font-size: 0.74rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ---- the three setup steps ---- */

.desktop-steps[b-i8beshvu9c] {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: desktop-step;
}

.desktop-steps > li[b-i8beshvu9c] {
    position: relative;
    padding: 0 0 1rem 2.125rem;
    counter-increment: desktop-step;
}

.desktop-steps > li[b-i8beshvu9c]::before {
    content: counter(desktop-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--df-primary-light);
    border: 1px solid var(--df-primary-border);
    color: var(--df-primary);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
}

/* The rail joining the step numbers. Stops at the last one, which has nothing to join to. */
.desktop-steps > li[b-i8beshvu9c]::after {
    content: "";
    position: absolute;
    left: 10.5px;
    top: 26px;
    bottom: 0.25rem;
    width: 1px;
    background: var(--df-border);
}

.desktop-steps > li:last-child[b-i8beshvu9c] {
    padding-bottom: 0;
}

.desktop-steps > li:last-child[b-i8beshvu9c]::after {
    display: none;
}

.desktop-step-h[b-i8beshvu9c] {
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0.1875rem;
}

.desktop-step-b[b-i8beshvu9c] {
    color: var(--df-text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.desktop-copy[b-i8beshvu9c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.375rem 0.375rem 0.6875rem;
    border: 1px solid var(--df-border);
    border-radius: 0.5rem;
    background: var(--df-bg);
}

.desktop-copy code[b-i8beshvu9c] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--df-text);
    /* app.css gives every <code> its own tinted band — inside a box that already has one it
       reads as two stacked surfaces, so flatten it here. */
    background: none;
    padding: 0;
}

.desktop-copy .btn[b-i8beshvu9c] {
    flex: 0 0 auto;
}
/* /Components/Shared/BugTradeOffPanel.razor.rz.scp.css */
/* Scoped to BugTradeOffPanel. Mirrors the card idiom already used across Bug Overview
   (.chart-title / .chart-subtitle / .scope-pill) so the panel reads as part of that page
   rather than as a visitor. bug-tradeoff.js drives the marker; nothing here is animated
   by it beyond the bar widths. */

.tradeoff[b-a6y6766kcg] {
    display: block;
    margin-bottom: 1rem;
}

/* ── the collapsed strip ── */

.tradeoff-toggle[b-a6y6766kcg] {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .6rem .9rem;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    color: var(--df-text);
    text-align: left;
    box-shadow: var(--df-card-shadow);
    cursor: pointer;
    transition: all var(--df-transition);
}

.tradeoff-toggle:hover[b-a6y6766kcg] {
    border-color: var(--df-primary-border);
    box-shadow: var(--df-card-shadow-hover);
}

.tradeoff-toggle:focus-visible[b-a6y6766kcg] {
    outline: 2px solid var(--df-primary);
    outline-offset: 2px;
}

.tradeoff-toggle > .bi-sliders2[b-a6y6766kcg] {
    flex: none;
    color: var(--df-primary);
}

.tradeoff-toggle.is-open[b-a6y6766kcg] {
    border-color: var(--df-primary-border);
    background: var(--df-primary-light);
}

.tt-q[b-a6y6766kcg] {
    flex: none;
    font-size: .86rem;
    font-weight: 600;
}

.tt-hint[b-a6y6766kcg] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--df-text-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-chev[b-a6y6766kcg] {
    flex: none;
    color: var(--df-text-muted);
    font-size: .8rem;
}

.tradeoff-body[b-a6y6766kcg] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .75rem;
}

/* ── shared card chrome, matching BugOverview ── */

.tradeoff-body .card[b-a6y6766kcg] {
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    box-shadow: var(--df-card-shadow);
}

.tradeoff-body .card-header[b-a6y6766kcg] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .78rem 1rem;
    background: var(--df-surface);
}

.chart-title[b-a6y6766kcg] {
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
}

.chart-subtitle[b-a6y6766kcg] {
    margin-top: 2px;
    color: var(--df-text-muted);
    font-size: .68rem;
    font-weight: 400;
}

.tradeoff-body .card-body[b-a6y6766kcg] {
    padding: .95rem 1rem 1rem;
}

.scope-pill[b-a6y6766kcg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .3rem .65rem;
    border: 1px solid var(--df-primary-border);
    border-radius: 50rem;
    background: var(--df-primary-light);
    color: #3730a3;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.foot-note[b-a6y6766kcg] {
    margin: .85rem 0 0;
    color: var(--df-text-muted);
    font-size: .72rem;
}

.num[b-a6y6766kcg] {
    font-variant-numeric: tabular-nums;
}

/* Dimension accents. Always paired with an icon and a word — colour never carries
   the meaning on its own. */
.dim-speed[b-a6y6766kcg] {
    --dim: var(--df-success);
    --dim-soft: var(--df-success-light);
}

.dim-scope[b-a6y6766kcg] {
    --dim: var(--df-primary);
    --dim-soft: var(--df-primary-light);
}

.dim-quality[b-a6y6766kcg] {
    --dim: var(--df-warning);
    --dim-soft: var(--df-warning-light);
}

/* ── the triangle ── */

/* Stacked on narrow screens, triangle beside the readout from lg up. The columns are capped
   rather than free: at full desktop width a 1fr readout stretches the bars to ~900px and
   leaves the bill as one unreadable line across the card. */
.tri-layout[b-a6y6766kcg] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 992px) {
    .tri-layout[b-a6y6766kcg] {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }
}

/* Wide enough for the bill to sit beside the bars instead of under them, which is what
   closes the empty quarter of the card. */
@media (min-width: 1400px) {
    .mix-col[b-a6y6766kcg] {
        display: grid;
        gap: .35rem 1.5rem;
        /* Both columns capped, not 1fr: the bill is prose, and a panel stretched to the full
           card width gives it a 100-character measure with a third of the box left empty. */
        grid-template-columns: minmax(0, 22rem) minmax(0, 36rem);
        justify-content: start;
        align-items: start;
    }

    .mix-col .mix[b-a6y6766kcg] {
        grid-area: 1 / 1 / 2 / 2;
    }

    .mix-col .bills[b-a6y6766kcg] {
        grid-area: 1 / 2 / 3 / 3;
    }

    .mix-col .foot-note[b-a6y6766kcg] {
        grid-area: 2 / 1 / 3 / 2;
    }

    .mix-col .bill[b-a6y6766kcg] {
        margin-top: 0;
    }
}

/* Capped, or the stacked layout hands the triangle the full card width and it becomes a
   700px-tall diagram above the numbers it is supposed to be annotating. */
.tri-col[b-a6y6766kcg] {
    max-width: 360px;
}

.tri[b-a6y6766kcg] {
    display: block;
    width: 100%;
    height: auto;
    /* Without this the browser claims the drag as a pan gesture on touch. */
    touch-action: none;
}

.tri-label[b-a6y6766kcg] {
    font-size: 13px;
    font-weight: 600;
}

.tri-sub[b-a6y6766kcg] {
    font-size: 10px;
    fill: var(--df-text-muted);
}

.puck[b-a6y6766kcg] {
    cursor: grab;
}

.puck:active[b-a6y6766kcg] {
    cursor: grabbing;
}

.puck:focus-visible[b-a6y6766kcg] {
    outline: none;
}

.puck:focus-visible .puck-ring[b-a6y6766kcg] {
    stroke-width: 2.5;
    opacity: 1;
}

/* Two by two rather than a wrapping row: four chips never fit on one line under a 340px
   triangle, and 3-then-1 reads as a mistake. */
.presets[b-a6y6766kcg] {
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    margin-top: .7rem;
}

.preset[b-a6y6766kcg] {
    padding: .3rem .6rem;
    border: 1px solid var(--df-border);
    border-radius: 50rem;
    background: var(--df-surface);
    color: var(--df-text-muted);
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--df-transition);
}

.preset:hover[b-a6y6766kcg] {
    border-color: var(--df-primary);
    color: var(--df-primary);
}

.preset[aria-pressed="true"][b-a6y6766kcg] {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
    color: #3730a3;
}

.preset:focus-visible[b-a6y6766kcg] {
    outline: 2px solid var(--df-primary);
    outline-offset: 2px;
}

/* The one preset that is a fact rather than a hypothetical. */
.preset-actual[b-a6y6766kcg] {
    grid-column: 1 / -1;
    justify-self: start;
    border-style: dashed;
    color: #3730a3;
}

/* ── the actual position ── */

/* An annotation, not a control: it is painted over the draggable marker so it can never be
   buried, which means it must not intercept the drag either. */
.actual[b-a6y6766kcg] {
    pointer-events: none;
}

[data-actual-trail][b-a6y6766kcg] {
    stroke: #a5b4fc;
    stroke-width: 2;
    stroke-dasharray: 3 2.5;
}

[data-actual-before][b-a6y6766kcg] {
    fill: #94a3b8;
    stroke: #fff;
    stroke-width: 2;
}

/* A white ring under the dark one, so the crosshair stays readable wherever it lands —
   including directly on top of the draggable marker. */
.actual-halo[b-a6y6766kcg] {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    opacity: .85;
}

.actual-ring[b-a6y6766kcg] {
    fill: none;
    stroke: var(--df-text);
    stroke-width: 2;
}

.actual-tick[b-a6y6766kcg] {
    stroke: var(--df-text);
    stroke-width: 2;
    stroke-linecap: round;
    paint-order: stroke;
}

/* ── the mix ── */

.mix[b-a6y6766kcg] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.mix-row[b-a6y6766kcg] {
    display: grid;
    gap: .1rem .6rem;
    grid-template-columns: 1.1rem 1fr auto;
    align-items: center;
}

.mix-row .ico[b-a6y6766kcg] {
    grid-row: span 2;
    display: grid;
    place-items: center;
    color: var(--dim);
}

.mix-name[b-a6y6766kcg] {
    font-size: .78rem;
    font-weight: 600;
}

.mix-pct[b-a6y6766kcg] {
    grid-row: span 2;
    color: var(--dim);
    font-size: .95rem;
    font-weight: 600;
}

.mix-track[b-a6y6766kcg] {
    height: 6px;
    border-radius: 50rem;
    background: var(--df-border);
    overflow: hidden;
}

.mix-fill[b-a6y6766kcg] {
    display: block;
    height: 100%;
    border-radius: 50rem;
    background: var(--dim);
    transition: width var(--df-transition);
}

/* ── the bill ── */

.bill[b-a6y6766kcg] {
    display: flex;
    gap: .6rem;
    margin-top: .9rem;
    padding: .75rem .85rem;
    border-left: 3px solid var(--df-danger);
    border-radius: .5rem;
    background: var(--df-danger-light);
}

.bill[hidden][b-a6y6766kcg] {
    display: none;
}

.bill .ico[b-a6y6766kcg] {
    flex: none;
    margin-top: 1px;
    color: var(--df-danger);
}

.bill.is-balanced[b-a6y6766kcg] {
    border-left-color: #94a3b8;
    background: var(--df-bg);
}

.bill.is-balanced .ico[b-a6y6766kcg] {
    color: var(--df-text-muted);
}

.bill-t[b-a6y6766kcg] {
    margin: 0 0 .1rem;
    font-size: .78rem;
    font-weight: 600;
}

.bill-b[b-a6y6766kcg] {
    max-width: 72ch;
    margin: 0;
    color: var(--df-text-muted);
    font-size: .76rem;
}

/* ── where we actually are ── */

.posture[b-a6y6766kcg] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    .posture[b-a6y6766kcg] {
        grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
        align-items: start;
    }
}

.posture-table[b-a6y6766kcg] {
    margin: 0;
    font-size: .78rem;
}

.posture-table thead th[b-a6y6766kcg] {
    padding: .25rem .5rem;
    border-bottom: 2px solid var(--df-border);
    color: var(--df-text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.posture-table td[b-a6y6766kcg] {
    padding: .3rem .5rem;
    vertical-align: middle;
}

.move-good[b-a6y6766kcg] {
    color: var(--df-success);
    font-weight: 600;
}

.move-bad[b-a6y6766kcg] {
    color: var(--df-warning);
    font-weight: 600;
}

.posture-read[b-a6y6766kcg] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.posture-read .bill[b-a6y6766kcg] {
    margin-top: 0;
    border-left-color: var(--df-primary);
    background: var(--df-primary-light);
}

.posture-read .bill .ico[b-a6y6766kcg] {
    color: var(--df-primary);
}

.posture-caveat[b-a6y6766kcg] {
    display: flex;
    gap: .6rem;
    padding: .75rem .85rem;
    border-left: 3px solid var(--df-warning);
    border-radius: .5rem;
    background: var(--df-warning-light);
    font-size: .76rem;
    line-height: 1.5;
    color: #78350f;
}

.posture-caveat .ico[b-a6y6766kcg] {
    flex: none;
    margin-top: 2px;
    color: var(--df-warning);
}

/* ── supporting blocks ── */

.blocks[b-a6y6766kcg] {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

@media (max-width: 991.98px) {
    .blocks[b-a6y6766kcg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.floor-list[b-a6y6766kcg] {
    display: grid;
    gap: .4rem .9rem;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
}

@media (max-width: 575.98px) {
    .floor-list[b-a6y6766kcg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.floor-list li[b-a6y6766kcg] {
    display: flex;
    gap: .4rem;
    font-size: .78rem;
}

.floor-list .ico[b-a6y6766kcg] {
    flex: none;
    margin-top: 1px;
    color: var(--df-success);
}

.floor-note[b-a6y6766kcg] {
    display: flex;
    gap: .55rem;
    margin-top: .85rem;
    padding: .65rem .8rem;
    border-left: 3px solid var(--df-success);
    border-radius: .5rem;
    background: var(--df-success-light);
    font-size: .78rem;
}

.floor-note .ico[b-a6y6766kcg] {
    flex: none;
    margin-top: 1px;
    color: var(--df-success);
}

.ways[b-a6y6766kcg] {
    display: grid;
    gap: .6rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
}

@media (max-width: 575.98px) {
    .ways[b-a6y6766kcg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ways .or[b-a6y6766kcg] {
        justify-self: center;
    }
}

.way[b-a6y6766kcg] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .8rem;
    border: 1px solid var(--dim);
    border-radius: .5rem;
    background: var(--dim-soft);
}

.way h6[b-a6y6766kcg] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    color: var(--dim);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.way-headline[b-a6y6766kcg] {
    font-size: .86rem;
    font-weight: 600;
}

.way p[b-a6y6766kcg] {
    margin: 0;
    color: var(--df-text-muted);
    font-size: .78rem;
}

.ways .or[b-a6y6766kcg] {
    align-self: center;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--df-border);
    color: #475569;
    font-size: .65rem;
    font-weight: 600;
}

.stance[b-a6y6766kcg] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 575.98px) {
    .stance[b-a6y6766kcg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.stance h6[b-a6y6766kcg] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .45rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.stance ul[b-a6y6766kcg] {
    display: flex;
    flex-direction: column;
    gap: .32rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stance li[b-a6y6766kcg] {
    display: flex;
    gap: .4rem;
    font-size: .78rem;
}

.stance .ico[b-a6y6766kcg] {
    flex: none;
    margin-top: 1px;
}

.stance .yes h6[b-a6y6766kcg],
.stance .yes .ico[b-a6y6766kcg] {
    color: var(--df-success);
}

.stance .no h6[b-a6y6766kcg],
.stance .no .ico[b-a6y6766kcg] {
    color: var(--df-danger);
}

/* ── the poster ── */

.poster[b-a6y6766kcg] {
    display: block;
    max-width: 760px;
    margin-inline: auto;
    border: 1px solid var(--df-border);
    border-radius: .5rem;
    overflow: hidden;
    transition: box-shadow var(--df-transition), border-color var(--df-transition);
}

.poster:hover[b-a6y6766kcg] {
    border-color: var(--df-primary);
    box-shadow: var(--df-card-shadow-hover);
}

.poster:focus-visible[b-a6y6766kcg] {
    outline: 2px solid var(--df-primary);
    outline-offset: 2px;
}

.poster img[b-a6y6766kcg] {
    display: block;
    width: 100%;
    /* Overrides the intrinsic height attribute, which is only there to reserve the space. */
    height: auto;
}

.script[b-a6y6766kcg] {
    margin: 0;
    padding: .9rem 1rem;
    border-left: 3px solid var(--df-primary);
    border-radius: .5rem;
    background: var(--df-primary-light);
}

.script p[b-a6y6766kcg] {
    margin: 0;
    font-size: .86rem;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .tradeoff-toggle[b-a6y6766kcg],
    .preset[b-a6y6766kcg],
    .mix-fill[b-a6y6766kcg] {
        transition: none;
    }
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .ways .or[b-a6y6766kcg] {
    color: var(--df-text-muted);
}
/* /Components/Shared/ConversationAvatars.razor.rz.scp.css */
.ca-stack[b-viwqawuaqz] {
    display: flex;
    flex: none;
}

/* One face and, on a one-to-one, its presence dot. The overlap lives here rather than on the
   avatar so a dot can be positioned against the face without being clipped by the next one. */
.ca-slot[b-viwqawuaqz] {
    position: relative;
    display: inline-flex;
    flex: none;
    margin-left: -8px;
}

.ca-slot:first-child[b-viwqawuaqz] {
    margin-left: 0;
}

.ca-sm .ca-slot[b-viwqawuaqz] {
    margin-left: -5px;
}

.ca-sm .ca-slot:first-child[b-viwqawuaqz] {
    margin-left: 0;
}

.ca-slot .ca-av[b-viwqawuaqz] {
    margin-left: 0;
}

.ca-av[b-viwqawuaqz] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border: 2px solid var(--df-surface);
    margin-left: -8px;
}

.ca-av:first-child[b-viwqawuaqz] {
    margin-left: 0;
}

.ca-sm .ca-av[b-viwqawuaqz] {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    margin-left: -5px;
}

.ca-sm .ca-av:first-child[b-viwqawuaqz] {
    margin-left: 0;
}

/* A real profile picture reuses every .ca-av rule — size, ring, overlap — so the stack
   stays even when some people have a photo and some fall back to initials. object-fit
   keeps a non-square upload from stretching. */
.ca-img[b-viwqawuaqz] {
    object-fit: cover;
    background: var(--df-bg);
}

/* An external participant gets a warning-coloured ring. Paired with the "External" label on
   the row itself, so the ring is reinforcement rather than the only signal. */
.ca-ext[b-viwqawuaqz] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--df-warning);
}

.ca-more[b-viwqawuaqz] {
    background: #475569;
}

/* ── presence ──
   Colour alone never carries this: every dot has a tooltip, and the surface that shows one
   also prints the state in words. The ring is the surface colour so the dot reads as sitting
   on the avatar in either theme. */
.ca-dot[b-viwqawuaqz] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--df-surface);
    background: var(--df-text-muted);
}

.ca-sm .ca-dot[b-viwqawuaqz] {
    width: 8px;
    height: 8px;
    border-width: 1.5px;
}

.ca-dot-active[b-viwqawuaqz] {
    background: var(--df-success);
}

.ca-dot-idle[b-viwqawuaqz] {
    background: var(--df-warning);
}

.ca-dot-away[b-viwqawuaqz] {
    background: var(--df-text-muted);
}

/* Disconnected is a hollow ring, not another shade of grey: "nothing of theirs is running" is
   a different kind of answer from "away from the keyboard", and it should not need a legend. */
.ca-dot-disconnected[b-viwqawuaqz] {
    background: var(--df-surface);
    box-shadow: inset 0 0 0 2px var(--df-text-muted);
}

.ca-c0[b-viwqawuaqz] { background: var(--df-primary); }
.ca-c1[b-viwqawuaqz] { background: var(--df-success); }
.ca-c2[b-viwqawuaqz] { background: var(--df-info); }
.ca-c3[b-viwqawuaqz] { background: var(--df-warning); }
.ca-c4[b-viwqawuaqz] { background: #7c3aed; }
.ca-c5[b-viwqawuaqz] { background: var(--df-danger); }

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .ca-more[b-viwqawuaqz] {
    background: var(--df-text-muted);
}
/* /Components/Shared/ConversationBody.razor.rz.scp.css */
/* Inline chips inside a message body. Every chip pairs its colour with an icon, so the type
   is still readable without relying on hue. */

.cb-mention[b-fs4z7rr6vj] {
    font-weight: 600;
    color: var(--df-primary);
    background: var(--df-primary-light);
    border-radius: 4px;
    padding: 0 3px;
}

/* A pasted address. Three signals rather than one, because a URL sitting in a wall of text
   reads as text: the accent colour, an underline, and the icon that says this leaves DevFlow.
   Colour never travels alone here — the icon is what carries the meaning for anyone who can't
   pick the hue out of the surrounding prose.

   A long URL breaks rather than stretching the bubble past the edge of the thread. */
.cb-link[b-fs4z7rr6vj] {
    color: var(--df-primary);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.cb-link:hover[b-fs4z7rr6vj] {
    color: var(--df-primary-hover);
    text-decoration-thickness: 2px;
}

/* inline-block so the link's underline is not drawn through the icon. */
.cb-link-ic[b-fs4z7rr6vj] {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.82em;
    vertical-align: baseline;
    opacity: 0.8;
}

/* The glyph itself has to be a plain inline box, though. Bootstrap Icons draws every icon as an
   inline-block pseudo-element, and an atomic inline is always a legal wrap opportunity — so a link
   whose text happened to fill the line left its arrow stranded alone on the next one. Making the
   glyph inline puts it back under normal text line-breaking, where the U+2060 word joiner
   ConversationBody emits before it does prohibit the break. */
.cb-link-ic[b-fs4z7rr6vj]::before {
    display: inline;
}

.cb-link:hover .cb-link-ic[b-fs4z7rr6vj] {
    opacity: 1;
}

.cb-entity[b-fs4z7rr6vj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px 0 4px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 0.78em;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: baseline;
    transition: filter var(--df-transition);
}

.cb-entity:hover[b-fs4z7rr6vj] {
    filter: brightness(0.94);
    text-decoration: none;
}

.cb-ticket[b-fs4z7rr6vj]  { background: var(--df-primary-light); border-color: var(--df-primary-border); color: var(--df-primary); }
.cb-deploy[b-fs4z7rr6vj]  { background: var(--df-success-light); border-color: var(--df-success-border); color: var(--df-success); }
.cb-project[b-fs4z7rr6vj] { background: var(--df-info-light);    border-color: var(--df-info-border); color: var(--df-info); }
.cb-product[b-fs4z7rr6vj] { background: var(--df-purple-light);  border-color: var(--df-purple-border); color: var(--df-purple); }
.cb-pr[b-fs4z7rr6vj]      { background: var(--df-warning-light); border-color: var(--df-warning-border); color: var(--df-warning); }
.cb-muted[b-fs4z7rr6vj]   { background: #f1f5f9;                 border-color: var(--df-border); color: var(--df-text-muted); }

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .cb-muted[b-fs4z7rr6vj] {
    background: var(--df-bg);
}
/* /Components/Shared/ConversationComposeView.razor.rz.scp.css */
/* Starting a conversation: a searchable list of people to pick from, with a footer for
   tags and the start button. There is no subject and no first-message box — the thread is
   named after who is in it and the opening line is typed in the thread itself.

   Everything this component renders is styled here. It previously reached for LoopPanel's
   .lp-head/.lp-title and ConversationThreadView's .ct-back/.ct-cbox, which style nothing
   from here — Blazor scopes CSS per component, so a class defined in another component's
   .razor.css never matches these elements. The back button and the message box rendered
   as raw browser defaults. Deliberately matched to the panel header and thread composer
   by value, not by borrowing their selectors. */

/* ── header ── */

.cc-head[b-ww7l8j4poh] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--df-border);
}

.cc-back[b-ww7l8j4poh] {
    flex: none;
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.cc-back:hover[b-ww7l8j4poh] {
    color: var(--df-text);
}

.cc-title[b-ww7l8j4poh] {
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── search ── */

.cc-search[b-ww7l8j4poh] {
    flex: none;
    position: relative;
    padding: 10px 14px 8px;
}

.cc-search i[b-ww7l8j4poh] {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-45%);
    color: var(--df-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.cc-search input[b-ww7l8j4poh] {
    width: 100%;
    box-sizing: border-box;   /* no global border-box reset in app.css */
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    background: var(--df-bg);
    font-size: 0.85rem;
}

.cc-search input:focus[b-ww7l8j4poh] {
    outline: none;
    border-color: var(--df-primary);
    background: var(--df-surface);
}

/* ── who is picked so far ── */

.cc-chosen[b-ww7l8j4poh] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 14px 8px;
}

/* ── the people list ── */

.cc-people[b-ww7l8j4poh] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 6px;
}

.cc-grp[b-ww7l8j4poh] {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--df-text-muted);
    padding: 10px 14px 4px;
}

.cc-prow[b-ww7l8j4poh] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background var(--df-transition);
}

.cc-prow:hover[b-ww7l8j4poh] {
    background: var(--df-bg);
}

.cc-prow-on[b-ww7l8j4poh] {
    background: var(--df-primary-light);
}

.cc-av[b-ww7l8j4poh] {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--df-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
}

.cc-av-img[b-ww7l8j4poh] {
    object-fit: cover;
    background: var(--df-bg);
}

.cc-av-ext[b-ww7l8j4poh] {
    background: var(--df-warning);
}

/* A group is a set, not a person — a distinct colour and a glyph rather than initials, so
   the row never reads as somebody called "Support Team". */
.cc-av-grp[b-ww7l8j4poh] {
    background: var(--df-info);
    font-size: 0.8rem;
}

.cc-pb[b-ww7l8j4poh] {
    min-width: 0;
    flex: 1;
}

.cc-pn[b-ww7l8j4poh] {
    font-size: 0.83rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-ps[b-ww7l8j4poh] {
    font-size: 0.72rem;
    color: var(--df-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-ext[b-ww7l8j4poh] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--df-warning);
}

.cc-check[b-ww7l8j4poh] {
    flex: none;
    color: var(--df-primary);
    font-size: 0.95rem;
}

.cc-empty[b-ww7l8j4poh] {
    padding: 32px 20px;
    text-align: center;
    color: var(--df-text-muted);
    font-size: 0.8rem;
}

.cc-empty i[b-ww7l8j4poh] {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
    opacity: .5;
}

/* ── footer ── */

.cc-foot[b-ww7l8j4poh] {
    flex: none;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--df-border);
}

.cc-tags[b-ww7l8j4poh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.cc-deliv[b-ww7l8j4poh] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.73rem;
    color: var(--df-text-muted);
}

.cc-tok[b-ww7l8j4poh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    font-size: 0.75rem;
}

/* An external participant is visibly different in the draft, so nobody starts a thread with
   a customer on it without noticing. */
.cc-tok-ext[b-ww7l8j4poh] {
    background: var(--df-warning-light);
    border-color: var(--df-warning-border);
    color: var(--df-warning);
    font-weight: 500;
}

.cc-chip[b-ww7l8j4poh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--df-primary-light);
    border: 1px solid var(--df-primary-border);
    color: var(--df-primary);
    font-size: 0.75rem;
    font-weight: 500;
}

.cc-x[b-ww7l8j4poh] {
    cursor: pointer;
    opacity: .55;
}

.cc-x:hover[b-ww7l8j4poh] {
    opacity: 1;
}

.cc-hint[b-ww7l8j4poh] {
    font-size: .72rem;
    color: var(--df-text-muted);
    margin: 0 0 8px;
}

.cc-error[b-ww7l8j4poh] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 0 0;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--df-danger-light);
    border: 1px solid var(--df-danger-border);
    color: var(--df-danger);
    font-size: 0.78rem;
    line-height: 1.5;
}

.cc-create[b-ww7l8j4poh] {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
    border: none;
    background: var(--df-primary);
    color: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--df-transition);
}

.cc-create:hover:not(:disabled)[b-ww7l8j4poh] {
    background: var(--df-primary-hover);
}

.cc-create:disabled[b-ww7l8j4poh] {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .cc-create:disabled[b-ww7l8j4poh] {
    background: var(--df-border);
}
/* /Components/Shared/ConversationGroupsView.razor.rz.scp.css */
/* Groups inside the Loop panel: a roster of groups, and an editor. Matched by value to
   ConversationComposeView's picker rather than by borrowing its selectors — Blazor scopes CSS
   per component, so a .cc-* class defined there would style nothing here. */

/* ── header ── */

.cg-head[b-m1oo8g15n0] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--df-border);
}

.cg-back[b-m1oo8g15n0] {
    flex: none;
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.cg-back:hover[b-m1oo8g15n0] {
    color: var(--df-text);
}

.cg-title[b-m1oo8g15n0] {
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-sp[b-m1oo8g15n0] {
    flex: 1;
}

.cg-primary[b-m1oo8g15n0] {
    flex: none;
    border: none;
    background: var(--df-primary);
    color: #fff;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background var(--df-transition);
}

.cg-primary:hover[b-m1oo8g15n0] {
    background: var(--df-primary-hover);
}

/* ── editor fields ── */

.cg-form[b-m1oo8g15n0] {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px 4px;
}

.cg-in[b-m1oo8g15n0] {
    width: 100%;
    box-sizing: border-box;   /* no global border-box reset in app.css */
    padding: 7px 10px;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    background: var(--df-bg);
    font-size: 0.85rem;
    color: var(--df-text);
}

.cg-in:focus[b-m1oo8g15n0] {
    outline: none;
    border-color: var(--df-primary);
    background: var(--df-surface);
}

.cg-lbl[b-m1oo8g15n0] {
    flex: none;
    padding: 8px 14px 4px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--df-text-muted);
}

.cg-lbl span[b-m1oo8g15n0] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.cg-chosen[b-m1oo8g15n0] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 14px 8px;
}

.cg-tok[b-m1oo8g15n0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    font-size: 0.75rem;
}

.cg-x[b-m1oo8g15n0] {
    cursor: pointer;
    opacity: .55;
}

.cg-x:hover[b-m1oo8g15n0] {
    opacity: 1;
}

/* ── search ── */

.cg-search[b-m1oo8g15n0] {
    flex: none;
    position: relative;
    padding: 2px 14px 8px;
}

.cg-search i[b-m1oo8g15n0] {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-60%);
    color: var(--df-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.cg-search input[b-m1oo8g15n0] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    background: var(--df-bg);
    font-size: 0.85rem;
}

.cg-search input:focus[b-m1oo8g15n0] {
    outline: none;
    border-color: var(--df-primary);
    background: var(--df-surface);
}

/* ── the scrolling middle ── */

.cg-body[b-m1oo8g15n0] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 6px;
}

/* A group in the roster. Taller than a person row because it carries two lines and its own
   actions, and because it is a thing you act on rather than a thing you tick. */
.cg-grow[b-m1oo8g15n0] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--df-border);
}

/* The row opens the group's conversation, so it behaves like the conversation rows in the
   list behind it rather than like a settings line. */
.cg-grow-go[b-m1oo8g15n0] {
    cursor: pointer;
    transition: background var(--df-transition);
}

.cg-grow-go:hover[b-m1oo8g15n0] {
    background: var(--df-bg);
}

.cg-prow[b-m1oo8g15n0] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background var(--df-transition);
}

.cg-prow:hover[b-m1oo8g15n0] {
    background: var(--df-bg);
}

.cg-prow-on[b-m1oo8g15n0] {
    background: var(--df-primary-light);
}

.cg-av[b-m1oo8g15n0] {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--df-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
}

.cg-av-img[b-m1oo8g15n0] {
    object-fit: cover;
    background: var(--df-bg);
}

/* A group is a set, not a person — its own colour and a glyph rather than initials, so the
   row never reads as somebody called "Support Team". Same treatment as the compose picker. */
.cg-av-grp[b-m1oo8g15n0] {
    background: var(--df-info);
    font-size: 0.8rem;
}

.cg-pb[b-m1oo8g15n0] {
    min-width: 0;
    flex: 1;
}

.cg-pn[b-m1oo8g15n0] {
    font-size: 0.83rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cg-ps[b-m1oo8g15n0] {
    font-size: 0.72rem;
    color: var(--df-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An empty group is worth pointing at: it is the one state where picking it does nothing. */
.cg-warn[b-m1oo8g15n0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--df-warning);
}

.cg-check[b-m1oo8g15n0] {
    flex: none;
    color: var(--df-primary);
    font-size: 0.95rem;
}

.cg-ico[b-m1oo8g15n0] {
    flex: none;
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.82rem;
    transition: all var(--df-transition);
}

.cg-ico:hover[b-m1oo8g15n0] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.cg-ico-del:hover[b-m1oo8g15n0] {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

/* Two-step rather than a browser confirm: deleting a group is quiet and easy to misclick,
   and a native dialog here would be the only one in the whole panel. */
.cg-confirm[b-m1oo8g15n0] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.cg-yes[b-m1oo8g15n0] {
    border: 1px solid var(--df-danger);
    background: var(--df-danger);
    color: #fff;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
}

.cg-no[b-m1oo8g15n0] {
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: var(--df-text-muted);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.72rem;
    cursor: pointer;
}

.cg-empty[b-m1oo8g15n0] {
    padding: 32px 20px;
    text-align: center;
    color: var(--df-text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.cg-empty i[b-m1oo8g15n0] {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
    opacity: .5;
}

/* ── footer ── */

.cg-foot[b-m1oo8g15n0] {
    flex: none;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--df-border);
}

.cg-hint[b-m1oo8g15n0] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--df-text-muted);
    line-height: 1.45;
}

.cg-error[b-m1oo8g15n0] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 10px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--df-danger-light);
    border: 1px solid var(--df-danger-border);
    color: var(--df-danger);
    font-size: 0.78rem;
    line-height: 1.5;
}

.cg-create[b-m1oo8g15n0] {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    border: none;
    background: var(--df-primary);
    color: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--df-transition);
}

.cg-create:hover:not(:disabled)[b-m1oo8g15n0] {
    background: var(--df-primary-hover);
}

.cg-create:disabled[b-m1oo8g15n0] {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .cg-create:disabled[b-m1oo8g15n0] {
    background: var(--df-border);
}
/* /Components/Shared/ConversationPicker.razor.rz.scp.css */
/* The people / entity picker. Sits above the panel, dismissed by clicking away. */

.cp-backdrop[b-lfwdh7bz92] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--df-z-dropdown) + 1);
}

.cp-pop[b-lfwdh7bz92] {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 372px;
    max-width: calc(100vw - 32px);
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    overflow: hidden;
    z-index: calc(var(--df-z-dropdown) + 2);
    display: flex;
    flex-direction: column;
    max-height: min(420px, 70vh);
}

/* Autocomplete: anchored to the composer the caller positions it against, rather than
   pinned to the viewport corner. Same card, no chrome — it reads as a continuation of
   what you are typing. */
.cp-inline[b-lfwdh7bz92] {
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + 6px);
    width: 320px;
    max-height: min(272px, 46vh);
    z-index: calc(var(--df-z-dropdown) + 2);
}

.cp-h[b-lfwdh7bz92] {
    flex: none;
    padding: 7px 11px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--df-text-muted);
    background: var(--df-bg);
    border-bottom: 1px solid var(--df-border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-in[b-lfwdh7bz92] {
    flex: none;
    padding: 8px 10px;
    border-bottom: 1px solid var(--df-border);
}

.cp-in input[b-lfwdh7bz92] {
    width: 100%;
    box-sizing: border-box;   /* no global border-box reset in app.css */
    border: 1px solid var(--df-border);
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 0.83rem;
}

.cp-in input:focus[b-lfwdh7bz92] {
    outline: none;
    border-color: var(--df-primary);
}

.cp-list[b-lfwdh7bz92] {
    flex: 1;
    overflow-y: auto;
}

.cp-grp[b-lfwdh7bz92] {
    padding: 6px 11px 3px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--df-text-muted);
    background: var(--df-bg);
}

.cp-row[b-lfwdh7bz92] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    cursor: pointer;
    transition: background var(--df-transition);
}

.cp-row:hover[b-lfwdh7bz92] {
    background: var(--df-primary-light);
}

.cp-av[b-lfwdh7bz92] {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--df-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
}

.cp-av-ext[b-lfwdh7bz92] {
    background: var(--df-warning);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--df-warning);
}

/* A group is a set, not a person — its own colour and a glyph rather than initials, so the
   row never reads as somebody called "Support Team". */
.cp-av-grp[b-lfwdh7bz92] {
    background: var(--df-info);
}

/* The picker only offers a photo for DevFlow users; external contacts keep the initials
   disc and its warning ring, which is what distinguishes them in this list. */
.cp-av-img[b-lfwdh7bz92] {
    object-fit: cover;
    background: var(--df-bg);
}

.cp-ico[b-lfwdh7bz92] {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    color: var(--df-text-muted);
    font-size: 0.82rem;
}

.cp-b[b-lfwdh7bz92] {
    min-width: 0;
    flex: 1;
}

.cp-t[b-lfwdh7bz92] {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-s[b-lfwdh7bz92] {
    font-size: 0.71rem;
    color: var(--df-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-ext[b-lfwdh7bz92] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--df-warning);
    margin-left: 4px;
}

.cp-f[b-lfwdh7bz92] {
    flex: none;
    padding: 6px 11px;
    border-top: 1px solid var(--df-border);
    font-size: 0.71rem;
    color: var(--df-text-muted);
    background: var(--df-bg);
    line-height: 1.5;
}

.cp-empty[b-lfwdh7bz92] {
    padding: 26px 16px;
    text-align: center;
    color: var(--df-text-muted);
    font-size: .8rem;
    line-height: 1.6;
}

.cp-empty i[b-lfwdh7bz92] {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 6px;
    opacity: .5;
}
/* /Components/Shared/ConversationThreadView.razor.rz.scp.css */
/* Thread view — shared by the Loop panel (Compact) and the /loop page. */

.ct-head[b-st4hanm25h] {
    flex: none;
    padding: 10px 14px;
    border-bottom: 1px solid var(--df-border);
}

.ct-h1[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-back[b-st4hanm25h] {
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 2px;
}

.ct-back:hover[b-st4hanm25h] {
    color: var(--df-text);
}

.ct-subj[b-st4hanm25h] {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-ico[b-st4hanm25h] {
    width: 28px;
    height: 28px;
    flex: none;
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--df-transition);
}

.ct-ico:hover[b-st4hanm25h] {
    background: var(--df-bg);
    color: var(--df-text);
}

/*
    HeaderActions is written by the host (the Loop panel), so its buttons carry the *host's*
    scope attribute, not ours — .ct-ico above can't reach them and they fall back to the
    browser's default button chrome. ::deep re-applies the same look to anything slotted in.
*/
.ct-h1[b-st4hanm25h]  .ct-ico {
    width: 28px;
    height: 28px;
    flex: none;
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--df-transition);
}

.ct-h1[b-st4hanm25h]  .ct-ico:hover {
    background: var(--df-bg);
    color: var(--df-text);
}

/* Muted is a state, not a hover — it stays lit so you know why the thread is quiet. */
.ct-ico-on[b-st4hanm25h] {
    background: var(--df-warning-light);
    color: var(--df-warning);
}

/* The bin reads as one more header control until the pointer is on it, then as the destructive
   thing it is. Colour alone doesn't carry that — the icon and the confirm wording do. */
.ct-ico-del:hover[b-st4hanm25h] {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

.ct-del[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 2px 4px 2px 10px;
    border: 1px solid var(--df-danger-border);
    border-radius: 0.5rem;
    background: var(--df-surface);
    white-space: nowrap;
}

.ct-del-q[b-st4hanm25h] {
    font-size: 0.78rem;
    color: var(--df-text);
}

.ct-del button[b-st4hanm25h] {
    border: none;
    background: none;
    border-radius: 0.375rem;
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--df-transition);
}

.ct-del-yes[b-st4hanm25h] {
    color: var(--df-danger);
}

.ct-del-yes:hover[b-st4hanm25h] {
    background: var(--df-danger-light);
}

.ct-del-no[b-st4hanm25h] {
    color: var(--df-text-muted);
}

.ct-del-no:hover[b-st4hanm25h] {
    background: var(--df-bg);
    color: var(--df-text);
}

.ct-del-err[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--df-danger);
}

.ct-meta[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    /* Anchors the roster popover. */
    position: relative;
}

/* The avatars + names strip, made into the control that opens the roster. Reset to look
   exactly like the plain text it replaced — the affordance is the caret, not a button. */
.ct-people[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: opacity var(--df-transition);
}

.ct-people:hover[b-st4hanm25h] {
    opacity: .75;
}

.ct-caret[b-st4hanm25h] {
    font-size: 0.6rem;
    color: var(--df-text-muted);
    flex: none;
    transition: transform var(--df-transition);
}

.ct-caret-up[b-st4hanm25h] {
    transform: rotate(180deg);
}

.ct-names[b-st4hanm25h] {
    font-size: 0.73rem;
    color: var(--df-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── presence ──
   The state in words next to the names, because a dot on its own is a colour and colour is
   never the only carrier of meaning here. Muted by default and tinted per state; the roster
   uses the same dot on its own rows. */
.ct-pres[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    font-size: 0.7rem;
    color: var(--df-text-muted);
    white-space: nowrap;
}

.ct-pres-dot[b-st4hanm25h] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--df-text-muted);
}

.ct-pres-active .ct-pres-dot[b-st4hanm25h],
.ct-pres-dot.ct-pres-active[b-st4hanm25h] {
    background: var(--df-success);
}

.ct-pres-idle .ct-pres-dot[b-st4hanm25h],
.ct-pres-dot.ct-pres-idle[b-st4hanm25h] {
    background: var(--df-warning);
}

.ct-pres-away .ct-pres-dot[b-st4hanm25h],
.ct-pres-dot.ct-pres-away[b-st4hanm25h] {
    background: var(--df-text-muted);
}

/* Hollow, not another grey: "nothing of theirs is running" is a different kind of answer
   from "away from the keyboard". */
.ct-pres-disconnected .ct-pres-dot[b-st4hanm25h],
.ct-pres-dot.ct-pres-disconnected[b-st4hanm25h] {
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--df-text-muted);
}

.ct-pres-active[b-st4hanm25h] {
    color: var(--df-success);
}

.ct-sp[b-st4hanm25h] {
    flex: 1;
}

.ct-ghost[b-st4hanm25h] {
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: var(--df-text);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex: none;
    transition: all var(--df-transition);
}

.ct-ghost:hover[b-st4hanm25h] {
    border-color: var(--df-primary);
    color: var(--df-primary);
}

/* ── roster popover ── */

/* Catches the click that closes the popover. Transparent rather than dimmed: this is a
   small menu on a header, not a modal, and dimming the thread behind it overstates it. */
.ct-roster-back[b-st4hanm25h] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--df-z-dropdown) - 1);
}

.ct-roster[b-st4hanm25h] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    z-index: var(--df-z-dropdown);
    overflow: hidden;
    max-height: min(360px, 60vh);
    overflow-y: auto;
}

.ct-roster-h[b-st4hanm25h] {
    padding: 9px 12px 7px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--df-text-muted);
    border-bottom: 1px solid var(--df-border);
}

.ct-roster-row[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
}

.ct-roster-row + .ct-roster-row[b-st4hanm25h] {
    border-top: 1px solid var(--df-border);
}

.ct-roster-av[b-st4hanm25h] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-size: 0.66rem;
    font-weight: 600;
}

.ct-roster-av-img[b-st4hanm25h] {
    object-fit: cover;
}

.ct-roster-av-ext[b-st4hanm25h] {
    background: var(--df-warning-light);
    color: var(--df-warning);
}

.ct-roster-b[b-st4hanm25h] {
    min-width: 0;
    flex: 1;
}

.ct-roster-n[b-st4hanm25h] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--df-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-roster-s[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--df-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-roster-x[b-st4hanm25h] {
    border: none;
    background: none;
    color: var(--df-text-muted);
    cursor: pointer;
    flex: none;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.78rem;
    transition: all var(--df-transition);
}

.ct-roster-x:hover[b-st4hanm25h] {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

/* Two-step rather than a browser confirm: taking someone off a thread is quiet and easy to
   misclick, and a native dialog here would be the only one in the whole panel. */
.ct-roster-confirm[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.ct-roster-yes[b-st4hanm25h] {
    border: 1px solid var(--df-danger);
    background: var(--df-danger);
    color: #fff;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
}

.ct-roster-no[b-st4hanm25h] {
    border: 1px solid var(--df-border);
    background: var(--df-surface);
    color: var(--df-text-muted);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.72rem;
    cursor: pointer;
}

.ct-roster-err[b-st4hanm25h] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    background: var(--df-danger-light);
    color: var(--df-danger);
    font-size: 0.72rem;
    border-top: 1px solid var(--df-border);
}

.ct-roster-f[b-st4hanm25h] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    background: var(--df-bg);
    border-top: 1px solid var(--df-border);
    font-size: 0.69rem;
    color: var(--df-text-muted);
    line-height: 1.35;
}

/* The conversation-level "Linked" strip is gone — tagging is per message, with # in the
   composer. What is left here is the ✕ on a staged attachment chip, which shares the class. */

.ct-chip-x[b-st4hanm25h] {
    cursor: pointer;
    opacity: .5;
    flex: none;
}

.ct-chip-x:hover[b-st4hanm25h] {
    opacity: 1;
}

/* ── messages ── */

/* Wrapper exists so the "jump to latest" pill can be positioned against the message list
   without scrolling away with it. */
.ct-msgs-wrap[b-st4hanm25h] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Drag-and-drop target. Hidden until conversation-chat.js puts .ct-dropping on the wrapper,
   which it drives from a depth counter so crossing a message doesn't make this flicker. */
.ct-dropzone[b-st4hanm25h] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    /* Legible over whatever the thread is showing, and still obviously a hovering layer. */
    background: color-mix(in srgb, var(--df-primary-light) 92%, transparent);
    border: 2px dashed var(--df-primary);
    border-radius: var(--df-radius);
    /* The drag events belong to the wrapper. If this took the pointer it would fire its own
       dragleave the instant it appeared, and the overlay would strobe. */
    pointer-events: none;
}

.ct-msgs-wrap.ct-dropping .ct-dropzone[b-st4hanm25h] {
    display: flex;
}

.ct-dropzone > div[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--df-radius);
    background: var(--df-surface);
    box-shadow: var(--df-card-shadow-hover);
    color: var(--df-primary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.ct-msgs[b-st4hanm25h] {
    flex: 1;
    overflow-y: auto;
    /* A conversation never scrolls sideways. Anything too wide for the panel wraps, and a
       link too long to wrap is shortened before it gets here — so this is the backstop that
       makes the rule true whatever ends up in a message. Without it, overflow-y:auto alone
       computes overflow-x to auto, and one long word puts a scrollbar under the thread. */
    overflow-x: hidden;
    padding: 12px 14px 4px;
}

/* Where you left off. Red rather than the accent colour: this is the one divider that means
   "you have not seen what is below", and it should not read as decoration. */
.ct-newsep[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}

.ct-newsep[b-st4hanm25h]::before,
.ct-newsep[b-st4hanm25h]::after {
    content: "";
    height: 1px;
    background: var(--df-danger);
    opacity: .45;
    flex: 1;
}

.ct-newsep span[b-st4hanm25h] {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--df-danger);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ct-jump[b-st4hanm25h] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border: none;
    border-radius: 999px;
    background: var(--df-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
    z-index: 3;
    transition: background var(--df-transition);
}

.ct-jump:hover[b-st4hanm25h] {
    background: var(--df-primary-hover);
}

.ct-daysep[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 14px;
}

.ct-daysep[b-st4hanm25h]::before,
.ct-daysep[b-st4hanm25h]::after {
    content: "";
    height: 1px;
    background: var(--df-border);
    flex: 1;
}

.ct-daysep span[b-st4hanm25h] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--df-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ct-msg[b-st4hanm25h] {
    display: flex;
    gap: 9px;
    margin-bottom: 14px;
}

.ct-av[b-st4hanm25h] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
}

.ct-av-ext[b-st4hanm25h] {
    box-shadow: 0 0 0 2px var(--df-surface), 0 0 0 3.5px var(--df-warning);
}

/* Profile picture in place of the initials disc. Only DevFlow users can have one — an
   external contact always falls back to initials plus the .ct-av-ext ring. */
.ct-av-img[b-st4hanm25h] {
    object-fit: cover;
    background: var(--df-bg);
}

.ct-c0[b-st4hanm25h] { background: var(--df-primary); }
.ct-c1[b-st4hanm25h] { background: var(--df-success); }
.ct-c2[b-st4hanm25h] { background: var(--df-info); }
.ct-c3[b-st4hanm25h] { background: var(--df-warning); }
.ct-c4[b-st4hanm25h] { background: var(--df-purple); }
.ct-c5[b-st4hanm25h] { background: var(--df-danger); }

.ct-mb[b-st4hanm25h] {
    min-width: 0;
    flex: 1;
}

.ct-mh[b-st4hanm25h] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.ct-who[b-st4hanm25h] {
    font-size: 0.8rem;
    font-weight: 600;
}

.ct-when[b-st4hanm25h] {
    font-size: 0.69rem;
    color: var(--df-text-muted);
}

/* "via email" is the single most important fact about a message that came from outside —
   it changes how you read the tone and who can see your reply. */
.ct-via[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--df-warning-light);
    color: var(--df-warning);
    border: 1px solid var(--df-warning-border);
}

.ct-mt[b-st4hanm25h] {
    font-size: 0.83rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    /* Belt and braces with the link's own rule: an address long enough to be wider than the
       panel must break here too, whatever is or isn't styling the anchor inside it. Nothing a
       message can contain is allowed to widen the thread and put a sideways scrollbar under
       the whole conversation. */
    overflow-wrap: anywhere;
    min-width: 0;
}

.ct-mine .ct-mt[b-st4hanm25h] {
    background: var(--df-primary-light);
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    padding: 7px 10px;
}

/* ── edit / delete ── */

.ct-edited[b-st4hanm25h] {
    font-size: 0.66rem;
    color: var(--df-text-muted);
    font-style: italic;
}

/* Row actions stay hidden until hover so a thread of forty messages isn't a wall of icons. */
.ct-msg-actions[b-st4hanm25h] {
    display: none;
    gap: 2px;
    margin-left: auto;
}

.ct-msg:hover .ct-msg-actions[b-st4hanm25h] {
    display: inline-flex;
}

.ct-msg-act[b-st4hanm25h] {
    border: none;
    background: transparent;
    color: var(--df-text-muted);
    cursor: pointer;
    padding: 0 3px;
    font-size: 0.75rem;
    border-radius: 4px;
    line-height: 1;
}

.ct-msg-act:hover[b-st4hanm25h] {
    color: var(--df-primary);
    background: var(--df-bg);
}

.ct-edit-box[b-st4hanm25h] {
    margin-top: 4px;
}

/* ── in-thread replies ── */

/* The quoted parent above a reply. Deliberately quiet — it is context, not content. */
.ct-quote[b-st4hanm25h] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
    padding: 3px 8px;
    border-left: 2px solid var(--df-border);
    border-radius: 0 6px 6px 0;
    background: var(--df-bg);
    font-size: 0.73rem;
    color: var(--df-text-muted);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    transition: border-color var(--df-transition);
}

.ct-quote:hover[b-st4hanm25h] {
    border-left-color: var(--df-primary);
    text-decoration: none;
}

.ct-quote i[b-st4hanm25h] {
    flex: none;
    font-size: 0.7rem;
}

.ct-quote-who[b-st4hanm25h] {
    font-weight: 600;
    color: var(--df-text);
    flex: none;
}

.ct-quote-text[b-st4hanm25h] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Banner above the composer while a reply is in progress. */
.ct-replying[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    padding: 5px 9px;
    border-left: 2px solid var(--df-primary);
    border-radius: 0 7px 7px 0;
    background: var(--df-primary-light);
    font-size: 0.75rem;
    color: var(--df-text-muted);
}

.ct-replying i[b-st4hanm25h] {
    color: var(--df-primary);
    flex: none;
}

.ct-replying-t[b-st4hanm25h] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-replying strong[b-st4hanm25h] {
    color: var(--df-text);
}

/* ── read receipts ── */

/* Sits under your own last message. Muted and small on purpose: it is status about the
   message, not part of it, and it must never compete with what anyone wrote. */
.ct-seen[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.66rem;
    color: var(--df-text-muted);
}

/* Seen reads in the brand colour, sent stays grey — always with its own icon beside it, so
   the two states are told apart without relying on the colour. */
.ct-seen-yes[b-st4hanm25h] {
    color: var(--df-primary);
}

/* ── reactions ── */

.ct-reactions[b-st4hanm25h] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.ct-reaction[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border: 1px solid var(--df-border);
    border-radius: 999px;
    background: var(--df-surface);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.5;
    transition: all var(--df-transition);
}

.ct-reaction:hover[b-st4hanm25h] {
    border-color: var(--df-primary);
}

/* Your own reaction is tinted, so you can tell at a glance whether clicking adds or removes. */
.ct-reaction-mine[b-st4hanm25h] {
    background: var(--df-primary-light);
    border-color: var(--df-primary-border);
}

.ct-reaction-e[b-st4hanm25h] {
    font-size: 0.85rem;
    line-height: 1;
}

.ct-reaction-n[b-st4hanm25h] {
    font-weight: 600;
    color: var(--df-text-muted);
    font-variant-numeric: tabular-nums;
}

.ct-reaction-mine .ct-reaction-n[b-st4hanm25h] {
    color: var(--df-primary);
}

.ct-react-wrap[b-st4hanm25h] {
    position: relative;
    display: inline-flex;
}

.ct-react-pop[b-st4hanm25h] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
    z-index: 5;
}

.ct-react-opt[b-st4hanm25h] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 3px 4px;
    border-radius: 6px;
    transition: background var(--df-transition), transform var(--df-transition);
}

.ct-react-opt:hover[b-st4hanm25h] {
    background: var(--df-bg);
    transform: scale(1.2);
}

/* ── attachments ── */

.ct-atts[b-st4hanm25h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    /* Load-bearing since images render at their own height: the default stretch makes a
       file pill sitting next to a tall screenshot grow into a 240px-tall empty box. */
    align-items: flex-start;
}

/* The pill is the group, not the link: the border has to enclose both the open target and
   the download target so two controls still read as one file. */
.ct-att-group[b-st4hanm25h] {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--df-border);
    border-radius: 8px;
    background: var(--df-bg);
    overflow: hidden;
    transition: border-color var(--df-transition), background var(--df-transition);
}

.ct-att-group:hover[b-st4hanm25h] {
    border-color: var(--df-primary);
    background: var(--df-surface);
}

.ct-att[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 5px 8px 5px 8px;
    font-size: 0.76rem;
    color: var(--df-text);
    text-decoration: none;
}

.ct-att:hover[b-st4hanm25h] {
    text-decoration: none;
}

.ct-att-dl[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-left: 1px solid var(--df-border);
    color: var(--df-text-muted);
    text-decoration: none;
    flex: none;
    transition: background var(--df-transition), color var(--df-transition);
}

.ct-att-dl:hover[b-st4hanm25h] {
    background: var(--df-primary);
    color: #fff;
    text-decoration: none;
}

.ct-att-dl i[b-st4hanm25h] {
    font-size: 0.85rem;
}

.ct-att i[b-st4hanm25h] {
    color: var(--df-primary);
    font-size: 0.95rem;
    flex: none;
}

.ct-att-n[b-st4hanm25h] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.ct-att-s[b-st4hanm25h] {
    color: var(--df-text-muted);
    font-size: 0.7rem;
    flex: none;
}

/* An image attachment shows as the image. Capped rather than sized: a screenshot arrives at
   whatever the sender's monitor is, and letting that set the bubble width would make one
   paste reflow the whole thread. */
.ct-att-img[b-st4hanm25h] {
    position: relative;
    display: inline-block;
    max-width: min(340px, 100%);
    border: 1px solid var(--df-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--df-bg);
    line-height: 0;
    transition: border-color var(--df-transition);
}

.ct-att-img:hover[b-st4hanm25h] {
    border-color: var(--df-primary);
}

.ct-att-img img[b-st4hanm25h] {
    display: block;
    max-width: 100%;
    /* Tall screenshots — a full page grab — would otherwise push the composer off screen. */
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
}

/* Sits on the picture, so it has to carry its own contrast rather than borrow the page's. */
.ct-att-img-dl[b-st4hanm25h] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(17, 24, 39, 0.55);
    color: #fff;
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--df-transition), background var(--df-transition);
}

.ct-att-img:hover .ct-att-img-dl[b-st4hanm25h],
.ct-att-img-dl:focus-visible[b-st4hanm25h] {
    opacity: 1;
}

.ct-att-img-dl:hover[b-st4hanm25h] {
    background: rgba(17, 24, 39, 0.8);
    color: #fff;
    text-decoration: none;
}

.ct-att-img-dl i[b-st4hanm25h] {
    font-size: 0.8rem;
}

/* Touch has no hover to reveal it, so leave it up. */
@media (hover: none) {
    .ct-att-img-dl[b-st4hanm25h] {
        opacity: 1;
    }
}

/* Files staged in the composer, already uploaded but not yet sent. */
.ct-staged[b-st4hanm25h] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.ct-chip-file[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--df-primary-light);
    border: 1px solid var(--df-primary-border);
    color: var(--df-primary);
    font-size: 0.74rem;
    font-weight: 500;
    max-width: 100%;
}

/* Same footprint as the file icon it replaces, so a mixed row of chips stays level. */
.ct-chip-thumb[b-st4hanm25h] {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    flex: none;
}

.ct-uploading[b-st4hanm25h] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--df-text-muted);
}

.ct-uploading i[b-st4hanm25h] {
    animation: ct-spin-b-st4hanm25h 1s linear infinite;
}

@keyframes ct-spin-b-st4hanm25h {
    to { transform: rotate(360deg); }
}

.ct-upload-err[b-st4hanm25h] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 7px;
    font-size: 0.74rem;
    color: var(--df-danger);
    line-height: 1.45;
}

/* The paperclip is a <label> wrapping a hidden InputFile, so it looks like the other
   icon buttons while still opening the file dialog. */
.ct-attach-btn[b-st4hanm25h] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* ::deep is load-bearing. <InputFile> is a child component, so the <input> it renders
   never carries this component's scope attribute — without ::deep the compiled selector
   is `.ct-attach-btn input[type="file"][b-xxx]`, which matches nothing, and Chrome draws
   the native file input inside the 28px button as a stray grey line next to @ and #. */
.ct-attach-btn[b-st4hanm25h]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.ct-sys[b-st4hanm25h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 14px;
    font-size: 0.72rem;
    color: var(--df-text-muted);
    text-align: center;
}

/* ── composer ── */

.ct-composer[b-st4hanm25h] {
    flex: none;
    border-top: 1px solid var(--df-border);
    padding: 9px 12px 10px;
    background: var(--df-surface);
}

/* ── typing indicator ── */

.ct-typing[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 0.73rem;
    color: var(--df-text-muted);
    font-style: italic;
}

.ct-typing-dots[b-st4hanm25h] {
    display: inline-flex;
    gap: 3px;
    flex: none;
}

.ct-typing-dots i[b-st4hanm25h] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--df-text-muted);
    animation: ct-typing-bounce-b-st4hanm25h 1.1s infinite ease-in-out;
}

.ct-typing-dots i:nth-child(2)[b-st4hanm25h] { animation-delay: .15s; }
.ct-typing-dots i:nth-child(3)[b-st4hanm25h] { animation-delay: .3s; }

@keyframes ct-typing-bounce-b-st4hanm25h {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .ct-typing-dots i[b-st4hanm25h] {
        animation: none;
        opacity: .6;
    }
}

.ct-cbox[b-st4hanm25h] {
    /* Anchors the @ / # autocomplete, which opens above the box. */
    position: relative;
    border: 1px solid var(--df-border);
    border-radius: 10px;
    padding: 8px 10px;
    transition: border-color var(--df-transition), box-shadow var(--df-transition);
}

.ct-cbox:focus-within[b-st4hanm25h] {
    border-color: var(--df-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .09);
}

/* The spell checker's own styles live in app.css, not here: the squiggle marks and the
   suggestion popup are created by spellcheck.js at runtime, so they never carry this file's
   scope attribute and a rule written here would not match them. */

.ct-cbox textarea[b-st4hanm25h] {
    width: 100%;
    box-sizing: border-box;   /* no global border-box reset in app.css */
    border: none;
    outline: none;
    resize: vertical;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--df-text);
    background: transparent;
    font-family: inherit;
}

.ct-ctools[b-st4hanm25h] {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.ct-send[b-st4hanm25h] {
    border: none;
    background: var(--df-primary);
    color: #fff;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background var(--df-transition);
}

.ct-send:hover:not(:disabled)[b-st4hanm25h] {
    background: var(--df-primary-hover);
}

.ct-send:disabled[b-st4hanm25h] {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* Says where this message is about to go, before it goes. */
.ct-deliv[b-st4hanm25h] {
    font-size: 0.71rem;
    color: var(--df-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
}

.ct-deliv i[b-st4hanm25h] {
    color: var(--df-warning);
}

.ct-deliv-internal i[b-st4hanm25h] {
    color: var(--df-primary);
}

.ct-empty[b-st4hanm25h] {
    margin: auto;
    padding: 40px 20px;
    text-align: center;
    color: var(--df-text-muted);
    font-size: .82rem;
}

.ct-empty i[b-st4hanm25h] {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 8px;
    opacity: .5;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .ct-mine .ct-mt[b-st4hanm25h] {
    border: 1px solid var(--df-primary-border);
}
html.nav-theme-dark .ct-ctools[b-st4hanm25h] {
    border-top: 1px solid var(--df-border);
}
html.nav-theme-dark .ct-send:disabled[b-st4hanm25h] {
    background: var(--df-border);
}
/* /Components/Shared/EmailThreadPane.razor.rz.scp.css */
.etp-thread[b-vojjpwk0ri] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.etp-header[b-vojjpwk0ri] {
    padding: 0 .25rem .25rem;
}
.etp-header-row[b-vojjpwk0ri] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: 0.875rem;
    color: #475569;
}
.etp-toggle-all[b-vojjpwk0ri] {
    text-decoration: none;
    color: #475569;
    font-size: 0.78rem;
    padding: .15rem .35rem;
}
.etp-toggle-all:hover[b-vojjpwk0ri] {
    color: #1d4ed8;
    text-decoration: none;
}
.etp-header-title[b-vojjpwk0ri] {
    color: #16a34a;
    font-weight: 600;
}

.etp-empty[b-vojjpwk0ri] {
    padding: 1rem;
    text-align: center;
    font-size: .9rem;
}

.etp-row[b-vojjpwk0ri] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.etp-row.expanded[b-vojjpwk0ri] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.etp-row-head[b-vojjpwk0ri] {
    width: 100%;
    background: transparent;
    border: 0;
    padding: .65rem .85rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
    cursor: pointer;
}
.etp-row:not(.expanded) .etp-row-head:hover[b-vojjpwk0ri] { background: var(--df-bg); }

.etp-avatar[b-vojjpwk0ri] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.etp-avatar.in[b-vojjpwk0ri] { background: #93c5fd; color: #1e3a8a; }
.etp-avatar.out[b-vojjpwk0ri] { background: #86efac; color: #14532d; }

.etp-row-main[b-vojjpwk0ri] {
    flex: 1;
    min-width: 0;
}
.etp-row-line1[b-vojjpwk0ri] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}
.etp-row-name[b-vojjpwk0ri] {
    font-size: .9rem;
    color: var(--df-text);
    font-weight: 600;
}

.etp-badge[b-vojjpwk0ri] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .15rem .45rem;
    border-radius: 4px;
}
.etp-badge.etp-in[b-vojjpwk0ri] { background: #dbeafe; color: #1d4ed8; }
.etp-badge.etp-out[b-vojjpwk0ri] { background: #dcfce7; color: #15803d; }
.etp-badge.etp-auto[b-vojjpwk0ri] { background: #f1f5f9; color: #475569; }
.etp-badge.etp-latest[b-vojjpwk0ri] { background: transparent; color: var(--df-text-muted); font-weight: 500; padding: .15rem .25rem; display: inline-flex; align-items: center; gap: .3rem; }
.etp-badge.etp-has-attachments[b-vojjpwk0ri] { background: #f1f5f9; color: #475569; display: inline-flex; align-items: center; gap: .15rem; }
.etp-badge.etp-inline-reply[b-vojjpwk0ri] { background: #fef3c7; color: #b45309; display: inline-flex; align-items: center; gap: .2rem; }
.etp-latest-dot[b-vojjpwk0ri] { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; }

.etp-row-preview[b-vojjpwk0ri] {
    font-size: 0.78rem;
    color: #475569;
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.etp-row-recipients[b-vojjpwk0ri] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-top: .2rem;
}

.etp-row-when[b-vojjpwk0ri] {
    font-size: .78rem;
    color: #94a3b8;
    flex-shrink: 0;
    white-space: nowrap;
}

.etp-row-caret[b-vojjpwk0ri] {
    color: #94a3b8;
    flex-shrink: 0;
    font-size: 0.72rem;
    width: 14px;
    text-align: center;
}

.etp-row-body[b-vojjpwk0ri] {
    padding: .25rem 1rem 1rem 4.45rem;
    border-top: 1px solid #f1f5f9;
    background: #fcfcfd;
}
.etp-row-subject[b-vojjpwk0ri] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--df-text);
    margin: .5rem 0 .35rem;
}
.etp-row-html[b-vojjpwk0ri] {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--df-text);
}
.etp-row-html[b-vojjpwk0ri]  blockquote {
    border-left: 3px solid var(--df-border);
    padding-left: .75rem;
    margin-left: 0;
    color: var(--df-text-muted);
}
.etp-row-html[b-vojjpwk0ri]  img { max-width: 100%; height: auto; }

/* Inline-reply notice — the sender answered inside the quoted message */
.etp-inline-notice[b-vojjpwk0ri] {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .78rem;
    line-height: 1.5;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--df-radius-sm, 4px);
    padding: .45rem .6rem;
    margin-bottom: .65rem;
}
.etp-inline-notice i[b-vojjpwk0ri] { margin-top: .1rem; flex-shrink: 0; }

/* "•••" toggle for the quoted history that was trimmed off the reply */
.etp-quote-toggle[b-vojjpwk0ri] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .7rem;
    padding: .2rem .55rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--df-transition, background .15s ease, color .15s ease);
}
.etp-quote-toggle:hover[b-vojjpwk0ri] {
    background: #e2e8f0;
    color: var(--df-text);
}
.etp-quote-dots[b-vojjpwk0ri] { letter-spacing: .08em; line-height: 1; }

/* Attachments */
.etp-attachments[b-vojjpwk0ri] {
    margin-top: .85rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--df-border);
}
.etp-attachments-label[b-vojjpwk0ri] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--df-text-muted);
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.etp-attachments-list[b-vojjpwk0ri] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.etp-attachment[b-vojjpwk0ri] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 18rem;
    padding: .35rem .6rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s;
}
.etp-attachment:hover[b-vojjpwk0ri] {
    border-color: #93c5fd;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.etp-attachment-icon[b-vojjpwk0ri] { font-size: 1rem; flex-shrink: 0; }
.etp-attachment-name[b-vojjpwk0ri] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #1d4ed8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.etp-attachment-size[b-vojjpwk0ri] {
    font-size: .72rem;
    color: #94a3b8;
    flex-shrink: 0;
}

/* Composer */
.etp-composer[b-vojjpwk0ri] {
    /* Sits above the thread, so the gap belongs underneath it. */
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 6px;
}
.etp-composer-head[b-vojjpwk0ri] {
    font-size: 0.875rem;
    color: var(--df-text);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
/* Collapsed rest state: the header row is the whole card. */
.etp-composer-collapsed .etp-composer-head[b-vojjpwk0ri] {
    margin-bottom: 0;
}
.etp-composer-head-actions[b-vojjpwk0ri] {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.etp-composer-recipient[b-vojjpwk0ri] {
    font-size: .82rem;
    color: var(--df-text-muted);
}
.etp-draft-badge[b-vojjpwk0ri] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 500;
    border-radius: 50rem;
    padding: .1rem .5rem;
    background: var(--df-warning-light);
    color: var(--df-warning);
}
.etp-composer-field[b-vojjpwk0ri] {
    margin-bottom: .55rem;
}
.etp-composer-field label[b-vojjpwk0ri] {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--df-text-muted);
    margin-bottom: .2rem;
}
.etp-composer-editor-wrap[b-vojjpwk0ri] { margin: .55rem 0 .35rem; }
.etp-composer-editor[b-vojjpwk0ri] {
    height: 280px;
    min-height: 140px;
    max-height: 1000px;
    overflow-y: auto;
    resize: vertical;
    white-space: pre-wrap;
    font-size: .9rem;
}
.etp-composer-actions[b-vojjpwk0ri] {
    margin-top: .5rem;
}

/* Compose modal: formatting toolbar */
.etp-format-toolbar[b-vojjpwk0ri] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    padding: .3rem .35rem;
    border: 1px solid var(--df-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--df-bg);
}
.etp-format-toolbar .btn[b-vojjpwk0ri] {
    padding: .2rem .45rem;
    line-height: 1;
    color: #334155;
}
.etp-toolbar-sep[b-vojjpwk0ri] {
    width: 1px;
    align-self: stretch;
    background: var(--df-border);
    margin: .15rem .25rem;
}
/* Near-fullscreen Compose dialog */
.etp-compose-dialog[b-vojjpwk0ri] {
    width: 96vw;
    max-width: 1500px;
    height: 94vh;
    margin: 3vh auto;
}
.etp-compose-dialog .modal-content[b-vojjpwk0ri] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.etp-compose-header[b-vojjpwk0ri] {
    flex: 0 0 auto;
}
.etp-compose-body[b-vojjpwk0ri] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: .25rem;
}
.etp-compose-recipients[b-vojjpwk0ri] {
    flex: 0 0 auto;
}
/* The editor wrap grows to fill the remaining height; the editor fills the wrap. */
.etp-compose-editor-wrap[b-vojjpwk0ri] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}
.etp-compose-modal .etp-composer-editor.etp-modal-editor[b-vojjpwk0ri] {
    flex: 1 1 auto;
    height: auto;
    min-height: 160px;
    max-height: none;
    resize: none;
    border-radius: 0 0 6px 6px;
}

html.nav-theme-dark .etp-format-toolbar[b-vojjpwk0ri] {
    background: #0b1220;
    border-color: var(--df-text);
}
html.nav-theme-dark .etp-format-toolbar .btn[b-vojjpwk0ri] {
    color: #cbd5e1;
}
html.nav-theme-dark .etp-toolbar-sep[b-vojjpwk0ri] {
    background: var(--df-text);
}
.etp-compose-modal .modal-content[b-vojjpwk0ri] {
    background: var(--df-surface);
    color: var(--df-text);
}
.etp-compose-modal .modal-header[b-vojjpwk0ri],
.etp-compose-modal .modal-footer[b-vojjpwk0ri] {
    border-color: var(--df-border);
}
html.nav-theme-dark .etp-compose-modal .modal-content[b-vojjpwk0ri] {
    background: #0f172a;
    color: var(--df-border);
}
html.nav-theme-dark .etp-compose-modal .modal-header[b-vojjpwk0ri],
html.nav-theme-dark .etp-compose-modal .modal-footer[b-vojjpwk0ri] {
    border-color: var(--df-text);
}

/* Reply attachments */
.etp-composer-attachments[b-vojjpwk0ri] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .35rem 0 .25rem;
}
.etp-attach-btn[b-vojjpwk0ri] {
    font-size: .78rem;
    padding: .25rem .6rem;
    line-height: 1.2;
    cursor: pointer;
}
.etp-pending-attachments[b-vojjpwk0ri] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.etp-pending-chip[b-vojjpwk0ri] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 16rem;
    padding: .25rem .5rem;
    background: #f1f5f9;
    border: 1px solid var(--df-border);
    border-radius: 6px;
}
.etp-pending-icon[b-vojjpwk0ri] { font-size: .9rem; flex-shrink: 0; }
.etp-pending-name[b-vojjpwk0ri] {
    font-size: .78rem;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.etp-pending-size[b-vojjpwk0ri] {
    font-size: 0.72rem;
    color: #94a3b8;
    flex-shrink: 0;
}
.etp-pending-remove[b-vojjpwk0ri] {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
    flex-shrink: 0;
}
.etp-pending-remove:hover:not(:disabled)[b-vojjpwk0ri] { color: #ef4444; }
.etp-pending-remove:disabled[b-vojjpwk0ri] { opacity: .5; cursor: default; }

.etp-summarize-btn[b-vojjpwk0ri],
.etp-sync-att-btn[b-vojjpwk0ri] {
    font-size: .78rem;
    padding: .2rem .55rem;
    line-height: 1.2;
}
.etp-summarize-btn .bi[b-vojjpwk0ri],
.etp-sync-att-btn .bi[b-vojjpwk0ri] {
    font-size: 0.875rem;
}

.etp-summary-panel[b-vojjpwk0ri] {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: .75rem .9rem;
    margin: 0 .25rem;
}
.etp-summary-head[b-vojjpwk0ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0c4a6e;
    font-size: 0.875rem;
    margin-bottom: .4rem;
}
.etp-summary-body[b-vojjpwk0ri] {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--df-text);
}
.etp-summary-body[b-vojjpwk0ri]  h4,
.etp-summary-body[b-vojjpwk0ri]  h5,
.etp-summary-body[b-vojjpwk0ri]  h6 {
    margin: .6rem 0 .3rem;
    color: #0c4a6e;
}
.etp-summary-body[b-vojjpwk0ri]  ul {
    margin: .25rem 0 .5rem 1.1rem;
    padding-left: .25rem;
}
.etp-summary-body[b-vojjpwk0ri]  p {
    margin: 0 0 .4rem;
}

/* ---- Dark theme overrides ----
   The light styles above use hardcoded slate/blue palette colors that become
   unreadable on the dark surface. These rules flip every surface, border, text,
   and accent color when the user toggles `html.nav-theme-dark`. Any new style
   added above MUST have a matching override here — see EmailThreadPaneCssTests
   for the enforced selector list. */
html.nav-theme-dark .etp-header-row[b-vojjpwk0ri] {
    color: #94a3b8;
}
html.nav-theme-dark .etp-toggle-all[b-vojjpwk0ri] {
    color: #cbd5e1;
}
html.nav-theme-dark .etp-toggle-all:hover[b-vojjpwk0ri] {
    color: #93c5fd;
}
html.nav-theme-dark .etp-header-title[b-vojjpwk0ri] {
    color: #4ade80;
}

html.nav-theme-dark .etp-empty[b-vojjpwk0ri] {
    color: #94a3b8;
}

html.nav-theme-dark .etp-row[b-vojjpwk0ri] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .etp-row.expanded[b-vojjpwk0ri] {
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
html.nav-theme-dark .etp-row:not(.expanded) .etp-row-head:hover[b-vojjpwk0ri] {
    background: rgba(255, 255, 255, .04);
}

html.nav-theme-dark .etp-avatar.in[b-vojjpwk0ri] { background: #1e3a8a; color: #bfdbfe; }
html.nav-theme-dark .etp-avatar.out[b-vojjpwk0ri] { background: #14532d; color: #bbf7d0; }

html.nav-theme-dark .etp-row-name[b-vojjpwk0ri] {
    color: #f1f5f9;
}

html.nav-theme-dark .etp-badge.etp-in[b-vojjpwk0ri] { background: rgba(59, 130, 246, .20); color: #93c5fd; }
html.nav-theme-dark .etp-badge.etp-out[b-vojjpwk0ri] { background: rgba(16, 185, 129, .20); color: #6ee7b7; }
html.nav-theme-dark .etp-badge.etp-auto[b-vojjpwk0ri] { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
html.nav-theme-dark .etp-badge.etp-latest[b-vojjpwk0ri] { color: #94a3b8; }
html.nav-theme-dark .etp-badge.etp-has-attachments[b-vojjpwk0ri] { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
html.nav-theme-dark .etp-badge.etp-inline-reply[b-vojjpwk0ri] { background: rgba(245, 158, 11, .20); color: #fcd34d; }
html.nav-theme-dark .etp-latest-dot[b-vojjpwk0ri] { background: #fbbf24; }

html.nav-theme-dark .etp-row-preview[b-vojjpwk0ri] {
    color: #94a3b8;
}

html.nav-theme-dark .etp-row-recipients[b-vojjpwk0ri] {
    color: #94a3b8;
}

html.nav-theme-dark .etp-row-when[b-vojjpwk0ri] {
    color: #94a3b8;
}

html.nav-theme-dark .etp-row-caret[b-vojjpwk0ri] {
    color: #94a3b8;
}

html.nav-theme-dark .etp-row-body[b-vojjpwk0ri] {
    border-top-color: var(--df-text);
    background: #0b1220;
}
html.nav-theme-dark .etp-row-subject[b-vojjpwk0ri] {
    color: #f1f5f9;
}
html.nav-theme-dark .etp-row-html[b-vojjpwk0ri] {
    /* --df-text, not --df-border: in dark the two are near-inverses (#e2e8f0 vs #1e293b), and
       --df-border here painted body text almost the same colour as the card behind it. */
    color: var(--df-text);
}
html.nav-theme-dark .etp-row-html[b-vojjpwk0ri]  blockquote {
    border-left-color: #334155;
    color: #94a3b8;
}

html.nav-theme-dark .etp-inline-notice[b-vojjpwk0ri] {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .35);
    color: #fcd34d;
}

html.nav-theme-dark .etp-quote-toggle[b-vojjpwk0ri] {
    background: rgba(148, 163, 184, .18);
    color: #cbd5e1;
}
html.nav-theme-dark .etp-quote-toggle:hover[b-vojjpwk0ri] {
    background: rgba(148, 163, 184, .30);
    color: #f1f5f9;
}

html.nav-theme-dark .etp-attachments[b-vojjpwk0ri] {
    border-top-color: var(--df-border);
}
html.nav-theme-dark .etp-attachments-label[b-vojjpwk0ri] {
    color: #94a3b8;
}
html.nav-theme-dark .etp-attachment[b-vojjpwk0ri] {
    background: #111827;
    border-color: var(--df-border);
}
html.nav-theme-dark .etp-attachment:hover[b-vojjpwk0ri] {
    border-color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
html.nav-theme-dark .etp-attachment-name[b-vojjpwk0ri] {
    color: #93c5fd;
}
html.nav-theme-dark .etp-attachment-size[b-vojjpwk0ri] {
    color: var(--df-text-muted);
}

html.nav-theme-dark .etp-pending-chip[b-vojjpwk0ri] {
    background: #111827;
    border-color: var(--df-text);
}
html.nav-theme-dark .etp-pending-name[b-vojjpwk0ri] {
    color: #cbd5e1;
}
html.nav-theme-dark .etp-pending-size[b-vojjpwk0ri] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .etp-pending-remove[b-vojjpwk0ri] {
    color: var(--df-text-muted);
}
html.nav-theme-dark .etp-pending-remove:hover:not(:disabled)[b-vojjpwk0ri] {
    color: #f87171;
}

html.nav-theme-dark .etp-composer[b-vojjpwk0ri] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .etp-composer-head[b-vojjpwk0ri] {
    color: #f1f5f9;
}
html.nav-theme-dark .etp-composer-field label[b-vojjpwk0ri] {
    color: #94a3b8;
}
html.nav-theme-dark .etp-composer-editor[b-vojjpwk0ri] {
    background: #0b1220;
    color: var(--df-border);
    border-color: var(--df-text);
}

html.nav-theme-dark .etp-summary-panel[b-vojjpwk0ri] {
    background: linear-gradient(180deg, rgba(34, 211, 238, .12) 0%, #0f172a 100%);
    border-color: rgba(34, 211, 238, .35);
}
html.nav-theme-dark .etp-summary-head[b-vojjpwk0ri] {
    color: #67e8f9;
}
html.nav-theme-dark .etp-summary-body[b-vojjpwk0ri] {
    color: var(--df-border);
}
html.nav-theme-dark .etp-summary-body[b-vojjpwk0ri]  h4,
html.nav-theme-dark .etp-summary-body[b-vojjpwk0ri]  h5,
html.nav-theme-dark .etp-summary-body[b-vojjpwk0ri]  h6 {
    color: #67e8f9;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .etp-row-body[b-vojjpwk0ri] {
    border-top: 1px solid var(--df-border);
}
/* /Components/Shared/EntityConversations.razor.rz.scp.css */
/* Conversations section on an entity detail page. Built on the shared card look from
   app.css rather than re-styling one, with a primary-tinted border so it reads as a live
   surface rather than another static block of metadata. */

.ec-card[b-h3be577u82] {
    background: var(--df-surface);
    border: 1px solid var(--df-primary-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow);
    margin-bottom: 14px;
    overflow: hidden;
}

.ec-head[b-h3be577u82] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--df-border);
}

.ec-title[b-h3be577u82] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

.ec-title i[b-h3be577u82] {
    color: var(--df-primary);
}

.ec-count[b-h3be577u82] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid var(--df-border);
    color: var(--df-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.ec-sp[b-h3be577u82] {
    flex: 1;
}

.ec-last[b-h3be577u82] {
    font-size: 0.73rem;
    color: var(--df-text-muted);
    white-space: nowrap;
}

.ec-new[b-h3be577u82] {
    border: none;
    background: var(--df-primary);
    color: #fff;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex: none;
    transition: background var(--df-transition);
}

.ec-new:hover[b-h3be577u82] {
    background: var(--df-primary-hover);
}

.ec-body[b-h3be577u82] {
    padding: 4px 0;
}

.ec-row[b-h3be577u82] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background var(--df-transition);
}

.ec-row:last-child[b-h3be577u82] {
    border-bottom: none;
}

.ec-row:hover[b-h3be577u82] {
    background: var(--df-bg);
}

.ec-rb[b-h3be577u82] {
    min-width: 0;
    flex: 1;
}

.ec-rt[b-h3be577u82] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ec-subj[b-h3be577u82] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ec-time[b-h3be577u82] {
    font-size: 0.7rem;
    color: var(--df-text-muted);
    flex: none;
}

.ec-prev[b-h3be577u82] {
    font-size: 0.78rem;
    color: var(--df-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-ext[b-h3be577u82] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--df-warning);
    flex: none;
}

.ec-badge[b-h3be577u82] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid var(--df-border);
    color: var(--df-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    flex: none;
}

.ec-chev[b-h3be577u82] {
    color: var(--df-text-muted);
    flex: none;
}

.ec-empty[b-h3be577u82] {
    padding: 16px 15px;
    font-size: 0.8rem;
    color: var(--df-text-muted);
    line-height: 1.5;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .ec-count[b-h3be577u82] {
    background: var(--df-bg);
}
html.nav-theme-dark .ec-row[b-h3be577u82] {
    border-bottom: 1px solid var(--df-border);
}
html.nav-theme-dark .ec-badge[b-h3be577u82] {
    background: var(--df-bg);
}
/* /Components/Shared/LiveStudioScreen.razor.rz.scp.css */
/* Side-rail layout: a slim control column on the left, the remote screen filling all remaining
   space at the largest size that preserves its aspect ratio. */
.live-screen-shell[b-5h5dxnup93] {
    display: flex;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: #0f1117;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 8px 28px rgba(15, 23, 42, .035);
}

/* ── left control rail ── */
.live-screen-rail[b-5h5dxnup93] {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    overflow-y: auto;
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
}

.live-screen-rail-head[b-5h5dxnup93] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.live-screen-rail-controls[b-5h5dxnup93] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
}

.live-screen-field[b-5h5dxnup93] {
    width: 100%;
}

.live-screen-field-label[b-5h5dxnup93] {
    display: block;
    margin-bottom: .2rem;
    color: var(--bs-secondary-color);
    font-size: 0.65rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.live-screen-status[b-5h5dxnup93] {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .28rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: 0.65rem;
    font-weight: 650;
}

.live-screen-status-dot[b-5h5dxnup93] {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #94a3b8;
}

.live-screen-status.is-connected[b-5h5dxnup93] {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.live-screen-status.is-connected .live-screen-status-dot[b-5h5dxnup93] {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}

.live-screen-status.is-error[b-5h5dxnup93] {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

.live-screen-status.is-error .live-screen-status-dot[b-5h5dxnup93] {
    background: #f43f5e;
}

.live-screen-status.is-busy .live-screen-status-dot[b-5h5dxnup93] {
    background: #635bff;
    animation: screenStatusPulse-b-5h5dxnup93 1.2s ease-in-out infinite;
}

@keyframes screenStatusPulse-b-5h5dxnup93 {
    50% { box-shadow: 0 0 0 4px rgba(99, 91, 255, .13); }
}

.live-screen-fullscreen-btn[b-5h5dxnup93] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    justify-content: center;
}

.live-screen-hints[b-5h5dxnup93] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.65rem;
    line-height: 1.4;
}

.live-screen-hints span[b-5h5dxnup93] {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
}

.live-screen-hints .bi[b-5h5dxnup93] {
    margin-top: .1rem;
}

/* ── screen stage (fills all remaining space) ── */
.live-screen-stage[b-5h5dxnup93] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: #0f1117;
}

.live-screen-canvas[b-5h5dxnup93] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
    cursor: crosshair;
    outline: none;
}

.live-screen-canvas.is-hidden[b-5h5dxnup93] {
    display: none;
}

.live-screen-empty[b-5h5dxnup93] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: radial-gradient(circle at 50% 42%, #25283a 0%, #181b27 68%);
    color: #f1f5f9;
    text-align: center;
}

.live-screen-empty-icon[b-5h5dxnup93] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: .9rem;
    border: 1px solid #394054;
    border-radius: 16px;
    background: #292d3e;
    color: #a5b4fc;
    font-size: 1.35rem;
}

.live-screen-empty-icon.is-error[b-5h5dxnup93] {
    color: #fda4af;
}

.live-screen-empty-icon .spinner-border[b-5h5dxnup93] {
    width: 1.45rem;
    height: 1.45rem;
    border-width: .16rem;
}

.live-screen-empty h6[b-5h5dxnup93] {
    margin: 0;
    color: var(--df-bg);
    font-size: 1rem;
    font-weight: 700;
}

.live-screen-empty p[b-5h5dxnup93] {
    max-width: 460px;
    margin: .4rem 0 1rem;
    color: #9da9bc;
    font-size: .78rem;
    line-height: 1.55;
}

/* ── full-screen overlay ── */
.live-screen-shell.is-fullscreen[b-5h5dxnup93] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    height: 100vh;
    width: 100vw;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ── responsive: stack the rail on top on narrow viewports ── */
@media (max-width: 767.98px) {
    .live-screen-shell[b-5h5dxnup93] {
        flex-direction: column;
    }

    .live-screen-rail[b-5h5dxnup93] {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem;
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .live-screen-rail-head[b-5h5dxnup93] {
        flex: 1 1 100%;
        padding-bottom: .6rem;
    }

    .live-screen-fullscreen-btn[b-5h5dxnup93] {
        width: auto;
    }

    .live-screen-hints[b-5h5dxnup93] {
        display: none;
    }
}
/* /Components/Shared/PersonalChecklist.razor.rz.scp.css */
/* Shared per-ticket checklist. Rendered bare inside TodosDrawer, which supplies the frame:
   progress on top, a scrolling list, and the add row pinned to the bottom. */

.checklist[b-icha1yicu8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.checklist-scroll[b-icha1yicu8] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.checklist-progress[b-icha1yicu8] {
    height: 4px;
    background: var(--df-border);
    overflow: hidden;
}

.checklist-progress-bar[b-icha1yicu8] {
    height: 100%;
    background: var(--df-success);
    transition: width var(--df-transition);
}

.checklist-body[b-icha1yicu8] {
    padding: 0.375rem 0.5rem 0.25rem;
}

/* ---- item row ---- */

.checklist-item[b-icha1yicu8] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.5rem;
    transition: background var(--df-transition);
}

.checklist-item:hover[b-icha1yicu8] {
    background: var(--df-primary-light);
}

.checklist-item.dragging[b-icha1yicu8] {
    opacity: 0.4;
}

.checklist-grip[b-icha1yicu8] {
    flex: 0 0 auto;
    color: #cbd5e1;
    cursor: grab;
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0;
    transition: opacity var(--df-transition);
}

.checklist-item:hover .checklist-grip[b-icha1yicu8] {
    opacity: 1;
}

.checklist-check[b-icha1yicu8] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--df-primary);
}

.checklist-text[b-icha1yicu8] {
    flex: 1 1 auto;
    font-size: 0.9rem;
    line-height: 1.45;
    cursor: text;
    word-break: break-word;
}

.checklist-item.done .checklist-text[b-icha1yicu8] {
    text-decoration: line-through;
    color: var(--df-text-muted);
}

.checklist-edit[b-icha1yicu8] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--df-text);
    background: var(--df-surface);
    border: 1px solid var(--df-primary);
    border-radius: 0.5rem;
    padding: 0.1rem 0.35rem;
}

.checklist-edit:focus[b-icha1yicu8] {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

/* The created date and the row actions share a slot: date at rest, actions on hover. */
.checklist-meta[b-icha1yicu8] {
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.65rem;
    color: var(--df-text-muted);
    white-space: nowrap;
    transition: opacity var(--df-transition);
}

.checklist-item:hover .checklist-meta[b-icha1yicu8] {
    opacity: 0;
}

.checklist-actions[b-icha1yicu8] {
    flex: 0 0 auto;
    align-self: center;
    margin-left: -2rem;
    opacity: 0;
    transition: opacity var(--df-transition);
}

.checklist-item:hover .checklist-actions[b-icha1yicu8] {
    opacity: 1;
}

.checklist-del[b-icha1yicu8] {
    background: none;
    border: none;
    padding: 0.2rem 0.35rem;
    border-radius: 0.375rem;
    color: var(--df-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    transition: all var(--df-transition);
}

.checklist-del:hover[b-icha1yicu8] {
    background: var(--df-danger-light);
    color: var(--df-danger);
}

/* ---- completed section ---- */

.checklist-divider[b-icha1yicu8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--df-text-muted);
    cursor: pointer;
    user-select: none;
    transition: color var(--df-transition);
}

.checklist-divider:hover[b-icha1yicu8] {
    color: var(--df-primary);
}

.checklist-divider span[b-icha1yicu8] {
    white-space: nowrap;
}

.checklist-divider[b-icha1yicu8]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--df-border);
}

/* ---- empty state ---- */

.checklist-empty[b-icha1yicu8] {
    text-align: center;
    padding: 1.75rem 1.25rem;
    color: var(--df-text-muted);
}

.checklist-empty i[b-icha1yicu8] {
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
}

.checklist-empty p[b-icha1yicu8] {
    font-size: 0.875rem;
}

/* ---- add row, pinned to the bottom ---- */

.checklist-add[b-icha1yicu8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--df-border);
}

.checklist-add > i[b-icha1yicu8] {
    color: #cbd5e1;
    font-size: 0.875rem;
    transition: color var(--df-transition);
}

.checklist-add:focus-within > i[b-icha1yicu8] {
    color: var(--df-primary);
}

.checklist-add input[b-icha1yicu8] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--df-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.3rem 0.4rem;
    transition: all var(--df-transition);
}

.checklist-add input[b-icha1yicu8]::placeholder {
    color: #94a3b8;
}

.checklist-add input:focus[b-icha1yicu8] {
    outline: none;
    background: var(--df-surface);
    border-color: var(--df-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

.checklist-add-hint[b-icha1yicu8] {
    font-size: 0.65rem;
    color: var(--df-text-muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--df-transition);
}

.checklist-add:focus-within .checklist-add-hint[b-icha1yicu8] {
    opacity: 1;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .checklist-grip[b-icha1yicu8] {
    color: var(--df-border);
}
html.nav-theme-dark .checklist-empty i[b-icha1yicu8] {
    color: var(--df-border);
}
/* /Components/Shared/ProblemResolutionPane.razor.rz.scp.css */
.prp-thread[b-bwtrcje4dj] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.prp-header[b-bwtrcje4dj] {
    padding: 0 .25rem .25rem;
}
.prp-header-row[b-bwtrcje4dj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: 0.875rem;
    color: #475569;
}
.prp-toggle-all[b-bwtrcje4dj] {
    text-decoration: none;
    color: #475569;
    font-size: 0.78rem;
    padding: .15rem .35rem;
}
.prp-toggle-all:hover[b-bwtrcje4dj] {
    color: #1d4ed8;
    text-decoration: none;
}
.prp-header-title[b-bwtrcje4dj] {
    color: #16a34a;
    font-weight: 600;
}

.prp-empty[b-bwtrcje4dj] {
    padding: 1rem;
    text-align: center;
    font-size: .9rem;
}

.prp-row[b-bwtrcje4dj] {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.prp-row.expanded[b-bwtrcje4dj] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.prp-row-head[b-bwtrcje4dj] {
    width: 100%;
    background: transparent;
    border: 0;
    padding: .65rem .85rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
    cursor: pointer;
}
.prp-row:not(.expanded) .prp-row-head:hover[b-bwtrcje4dj] { background: var(--df-bg); }

.prp-avatar[b-bwtrcje4dj] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.prp-avatar.problem[b-bwtrcje4dj] { background: var(--df-danger-border); color: #991b1b; }
.prp-avatar.resolution[b-bwtrcje4dj] { background: #86efac; color: #14532d; }

.prp-row-main[b-bwtrcje4dj] {
    flex: 1;
    min-width: 0;
}
.prp-row-line1[b-bwtrcje4dj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}
.prp-row-name[b-bwtrcje4dj] {
    font-size: .9rem;
    color: var(--df-text);
    font-weight: 600;
}

.prp-badge[b-bwtrcje4dj] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .15rem .45rem;
    border-radius: 4px;
}
.prp-badge.prp-problem[b-bwtrcje4dj] { background: #fee2e2; color: #b91c1c; }
.prp-badge.prp-resolution[b-bwtrcje4dj] { background: #dcfce7; color: #15803d; }
.prp-badge.prp-latest[b-bwtrcje4dj] { background: transparent; color: var(--df-text-muted); font-weight: 500; padding: .15rem .25rem; display: inline-flex; align-items: center; gap: .3rem; }
.prp-latest-dot[b-bwtrcje4dj] { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; }

.prp-row-preview[b-bwtrcje4dj] {
    font-size: 0.78rem;
    color: #475569;
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prp-row-when[b-bwtrcje4dj] {
    font-size: .78rem;
    color: #94a3b8;
    flex-shrink: 0;
    white-space: nowrap;
}

.prp-row-caret[b-bwtrcje4dj] {
    color: #94a3b8;
    flex-shrink: 0;
    font-size: 0.72rem;
    width: 14px;
    text-align: center;
}

.prp-row-body[b-bwtrcje4dj] {
    padding: .25rem 1rem 1rem 4.45rem;
    border-top: 1px solid #f1f5f9;
    background: #fcfcfd;
}
.prp-section-label[b-bwtrcje4dj] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: .5rem 0 .3rem;
}
.prp-section-label.problem[b-bwtrcje4dj] { color: var(--df-danger); }
.prp-section-label.resolution[b-bwtrcje4dj] { color: #16a34a; }

.prp-row-html[b-bwtrcje4dj] {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--df-text);
    /* The composer editor uses white-space: pre-wrap, so typed/pasted line breaks
       are stored as literal "\n" characters in the body HTML. Render them the same
       way here so saved entries keep the paragraph breaks the author saw while typing. */
    white-space: pre-wrap;
}
.prp-row-html[b-bwtrcje4dj]  img { max-width: 100%; height: auto; }

.prp-row-actions[b-bwtrcje4dj] {
    margin-top: .85rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--df-border);
    display: flex;
    align-items: center;
    gap: .6rem;
}
.prp-action-link[b-bwtrcje4dj] {
    text-decoration: none;
    font-size: 0.78rem;
}
.prp-action-link:hover[b-bwtrcje4dj] { text-decoration: underline; }

/* Composer */
.prp-composer[b-bwtrcje4dj] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: 6px;
}
.prp-composer-head[b-bwtrcje4dj] {
    font-size: 0.875rem;
    color: var(--df-text);
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.prp-type-toggle .btn[b-bwtrcje4dj] {
    font-size: .78rem;
    padding: .2rem .6rem;
}
.prp-composer-field[b-bwtrcje4dj] {
    margin-bottom: .55rem;
}
.prp-composer-field label[b-bwtrcje4dj] {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--df-text-muted);
    margin-bottom: .2rem;
}
.prp-composer-editor[b-bwtrcje4dj] {
    height: 180px;
    min-height: 120px;
    max-height: 800px;
    overflow-y: auto;
    resize: vertical;
    white-space: pre-wrap;
    font-size: .9rem;
}
.prp-composer-actions[b-bwtrcje4dj] {
    margin-top: .5rem;
}
.prp-compose-open-btn[b-bwtrcje4dj] {
    font-size: .78rem;
    padding: .2rem .55rem;
    line-height: 1.2;
}
.prp-summarize-btn[b-bwtrcje4dj] {
    font-size: .78rem;
    padding: .2rem .55rem;
    line-height: 1.2;
}
.prp-summarize-btn .bi[b-bwtrcje4dj] { font-size: 0.875rem; }

.prp-summary-panel[b-bwtrcje4dj] {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: .75rem .9rem;
    margin: 0 .25rem;
}
.prp-summary-head[b-bwtrcje4dj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0c4a6e;
    font-size: 0.875rem;
    margin-bottom: .4rem;
}
.prp-summary-body[b-bwtrcje4dj] {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--df-text);
}
.prp-summary-body[b-bwtrcje4dj]  h4,
.prp-summary-body[b-bwtrcje4dj]  h5,
.prp-summary-body[b-bwtrcje4dj]  h6 {
    margin: .6rem 0 .3rem;
    color: #0c4a6e;
}
.prp-summary-body[b-bwtrcje4dj]  ul {
    margin: .25rem 0 .5rem 1.1rem;
    padding-left: .25rem;
}
.prp-summary-body[b-bwtrcje4dj]  p {
    margin: 0 0 .4rem;
}

/* ---- Full editor modal (mirrors EmailThreadPane Compose) ---- */
.prp-format-toolbar[b-bwtrcje4dj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    padding: .3rem .35rem;
    border: 1px solid var(--df-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--df-bg);
}
.prp-format-toolbar .btn[b-bwtrcje4dj] {
    padding: .2rem .45rem;
    line-height: 1;
    color: #334155;
}
.prp-toolbar-sep[b-bwtrcje4dj] {
    width: 1px;
    align-self: stretch;
    background: var(--df-border);
    margin: .15rem .25rem;
}
.prp-compose-dialog[b-bwtrcje4dj] {
    width: 96vw;
    max-width: 1500px;
    height: 94vh;
    margin: 3vh auto;
}
.prp-compose-dialog .modal-content[b-bwtrcje4dj] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.prp-compose-header[b-bwtrcje4dj] {
    flex: 0 0 auto;
}
.prp-compose-body[b-bwtrcje4dj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: .25rem;
}
.prp-compose-editor-wrap[b-bwtrcje4dj] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}
.prp-compose-modal .prp-composer-editor.prp-modal-editor[b-bwtrcje4dj] {
    flex: 1 1 auto;
    height: auto;
    min-height: 160px;
    max-height: none;
    resize: none;
    border-radius: 0 0 6px 6px;
}
.prp-compose-modal .modal-content[b-bwtrcje4dj] {
    background: var(--df-surface);
    color: var(--df-text);
}
.prp-compose-modal .modal-header[b-bwtrcje4dj] {
    border-color: var(--df-border);
}

html.nav-theme-dark .prp-format-toolbar[b-bwtrcje4dj] {
    background: #0b1220;
    border-color: var(--df-text);
}
html.nav-theme-dark .prp-format-toolbar .btn[b-bwtrcje4dj] {
    color: #cbd5e1;
}
html.nav-theme-dark .prp-toolbar-sep[b-bwtrcje4dj] {
    background: var(--df-text);
}
html.nav-theme-dark .prp-compose-modal .modal-content[b-bwtrcje4dj] {
    background: #0f172a;
    color: var(--df-border);
}
html.nav-theme-dark .prp-compose-modal .modal-header[b-bwtrcje4dj] {
    border-color: var(--df-text);
}

/* ---- Dark theme overrides (mirrors EmailThreadPane) ---- */
html.nav-theme-dark .prp-header-row[b-bwtrcje4dj] { color: #94a3b8; }
html.nav-theme-dark .prp-toggle-all[b-bwtrcje4dj] { color: #cbd5e1; }
html.nav-theme-dark .prp-toggle-all:hover[b-bwtrcje4dj] { color: #93c5fd; }
html.nav-theme-dark .prp-header-title[b-bwtrcje4dj] { color: #4ade80; }
html.nav-theme-dark .prp-empty[b-bwtrcje4dj] { color: #94a3b8; }

html.nav-theme-dark .prp-row[b-bwtrcje4dj] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .prp-row.expanded[b-bwtrcje4dj] {
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
html.nav-theme-dark .prp-row:not(.expanded) .prp-row-head:hover[b-bwtrcje4dj] {
    background: rgba(255, 255, 255, .04);
}

html.nav-theme-dark .prp-avatar.problem[b-bwtrcje4dj] { background: #7f1d1d; color: #fecaca; }
html.nav-theme-dark .prp-avatar.resolution[b-bwtrcje4dj] { background: #14532d; color: #bbf7d0; }

html.nav-theme-dark .prp-row-name[b-bwtrcje4dj] { color: #f1f5f9; }

html.nav-theme-dark .prp-badge.prp-problem[b-bwtrcje4dj] { background: rgba(239, 68, 68, .20); color: #fca5a5; }
html.nav-theme-dark .prp-badge.prp-resolution[b-bwtrcje4dj] { background: rgba(16, 185, 129, .20); color: #6ee7b7; }
html.nav-theme-dark .prp-badge.prp-latest[b-bwtrcje4dj] { color: #94a3b8; }
html.nav-theme-dark .prp-latest-dot[b-bwtrcje4dj] { background: #fbbf24; }

html.nav-theme-dark .prp-row-preview[b-bwtrcje4dj] { color: #94a3b8; }
html.nav-theme-dark .prp-row-when[b-bwtrcje4dj] { color: #94a3b8; }
html.nav-theme-dark .prp-row-caret[b-bwtrcje4dj] { color: #94a3b8; }

html.nav-theme-dark .prp-row-body[b-bwtrcje4dj] {
    border-top-color: var(--df-text);
    background: #0b1220;
}
html.nav-theme-dark .prp-section-label.problem[b-bwtrcje4dj] { color: #f87171; }
html.nav-theme-dark .prp-section-label.resolution[b-bwtrcje4dj] { color: #4ade80; }
html.nav-theme-dark .prp-row-html[b-bwtrcje4dj] { color: var(--df-border); }
html.nav-theme-dark .prp-row-actions[b-bwtrcje4dj] { border-top-color: var(--df-text); }

html.nav-theme-dark .prp-composer[b-bwtrcje4dj] {
    background: #0f172a;
    border-color: var(--df-text);
}
html.nav-theme-dark .prp-composer-head[b-bwtrcje4dj] { color: #f1f5f9; }
html.nav-theme-dark .prp-composer-field label[b-bwtrcje4dj] { color: #94a3b8; }
html.nav-theme-dark .prp-composer-editor[b-bwtrcje4dj] {
    background: #0b1220;
    color: var(--df-border);
    border-color: var(--df-text);
}

html.nav-theme-dark .prp-summary-panel[b-bwtrcje4dj] {
    background: linear-gradient(180deg, rgba(34, 211, 238, .12) 0%, #0f172a 100%);
    border-color: rgba(34, 211, 238, .35);
}
html.nav-theme-dark .prp-summary-head[b-bwtrcje4dj] { color: #67e8f9; }
html.nav-theme-dark .prp-summary-body[b-bwtrcje4dj] { color: var(--df-border); }
html.nav-theme-dark .prp-summary-body[b-bwtrcje4dj]  h4,
html.nav-theme-dark .prp-summary-body[b-bwtrcje4dj]  h5,
html.nav-theme-dark .prp-summary-body[b-bwtrcje4dj]  h6 {
    color: #67e8f9;
}

/* Dark theme — the light values above are literals so
   light mode is untouched; these repaint them for dark. */
html.nav-theme-dark .prp-row-body[b-bwtrcje4dj] {
    border-top: 1px solid var(--df-border);
}
/* /Components/Shared/ProjectPreview.razor.rz.scp.css */
.preview-loading[b-ysgjqfu1hf],
.preview-empty[b-ysgjqfu1hf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: #71717a;
    font-size: 0.9rem;
}

.preview-header[b-ysgjqfu1hf] {
    margin-bottom: 18px;
}

.preview-title[b-ysgjqfu1hf] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #18181b;
    margin: 0 0 10px;
    line-height: 1.35;
}

.preview-badges[b-ysgjqfu1hf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preview-grid[b-ysgjqfu1hf] {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 8px;
    column-gap: 14px;
    margin-bottom: 18px;
    font-size: 0.875rem;
}

.preview-grid dt[b-ysgjqfu1hf] {
    font-weight: 600;
    color: #71717a;
}

.preview-grid dd[b-ysgjqfu1hf] {
    margin: 0;
    color: #18181b;
    overflow-wrap: anywhere;
}

.preview-section-title[b-ysgjqfu1hf] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 8px;
}

.preview-description[b-ysgjqfu1hf] {
    font-size: 0.9rem;
    color: #27272a;
    line-height: 1.55;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 12px 14px;
    max-height: 260px;
    overflow-y: auto;
}

.preview-description :where(img)[b-ysgjqfu1hf] {
    max-width: 100%;
    height: auto;
}

.preview-actions[b-ysgjqfu1hf] {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
/* /Components/Shared/SidePanel.razor.rz.scp.css */
/* ==========================================================================
   SidePanel — STYLE 3: Minimal borderless card.
   No backdrop dim, panel floats as a quiet card with a big soft shadow,
   inset from the edges with rounded corners. Very clean / quiet.
   Scoped CSS. JS in /js/side-panel-resize.js drives the drag handle; it
   finds the panel via the data-resizable-panel attribute on the <aside>.
   The handle's own styles are global (app.css) because LoopPanel draws the
   same grip.
   ========================================================================== */

.side-panel-backdrop[b-afmkb11qjd] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1040;
    animation: sp-fade-in-b-afmkb11qjd 0.15s ease-out;
    pointer-events: auto;
}

.side-panel[b-afmkb11qjd] {
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    width: calc(60vw - 20px);
    min-width: 540px;
    max-width: calc(100vw - 40px);
    background: var(--df-surface);
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    box-shadow:
        0 60px 100px -30px rgba(15, 23, 42, 0.22),
        0 20px 40px -12px rgba(15, 23, 42, 0.12),
        0 1px 2px rgba(15, 23, 42, 0.04);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sp-slide-in-b-afmkb11qjd 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Header — no divider, just whitespace. Title is a subtle caps "eyebrow". */
.side-panel-header[b-afmkb11qjd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px 26px;
    background: var(--df-surface);
    flex-shrink: 0;
    position: relative;
}

.side-panel-title[b-afmkb11qjd] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-panel-close[b-afmkb11qjd] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.side-panel-close:hover[b-afmkb11qjd] {
    background: #f1f5f9;
    color: #0f172a;
}

.side-panel-close:active[b-afmkb11qjd] {
    transform: scale(0.94);
}

.side-panel-close:focus-visible[b-afmkb11qjd] {
    outline: none;
    background: var(--df-primary-light);
    color: var(--df-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

/* Body */
.side-panel-body[b-afmkb11qjd] {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 26px 26px;
    background: var(--df-surface);
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}

.side-panel-body[b-afmkb11qjd]::-webkit-scrollbar {
    width: 10px;
}

.side-panel-body[b-afmkb11qjd]::-webkit-scrollbar-track {
    background: transparent;
}

.side-panel-body[b-afmkb11qjd]::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.12);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 10px;
}

.side-panel-body[b-afmkb11qjd]::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.24);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* Iframe variant — a hairline separator so the embedded page doesn't look
   like it's just bleeding through the header. The card's border-radius
   handles the clean rounded-corner edge via outer overflow: hidden. */
.side-panel-body.side-panel-body-frame[b-afmkb11qjd] {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    background: var(--df-bg, var(--df-bg));
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

[b-afmkb11qjd] iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    display: block;
    background: transparent;
}

@keyframes sp-slide-in-b-afmkb11qjd {
    from {
        transform: translateX(calc(100% + 20px));
        opacity: 0.8;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sp-fade-in-b-afmkb11qjd {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 640px) {
    .side-panel[b-afmkb11qjd] {
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
        min-width: 0;
        border-radius: 10px;
    }
    .side-panel-header[b-afmkb11qjd] {
        padding: 14px 14px 10px 20px;
    }
    .side-panel-body[b-afmkb11qjd] {
        padding: 4px 18px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .side-panel[b-afmkb11qjd],
    .side-panel-backdrop[b-afmkb11qjd] {
        animation: none;
    }
    .side-panel-close[b-afmkb11qjd] {
        transition: none;
    }
}

/* ---- Dark theme overrides ---- */
html.nav-theme-dark .side-panel[b-afmkb11qjd] {
    background: #0f172a;
    border-color: var(--df-text);
    color: var(--df-border);
    box-shadow:
        0 60px 100px -30px rgba(0, 0, 0, 0.55),
        0 20px 40px -12px rgba(0, 0, 0, 0.40),
        0 1px 2px rgba(0, 0, 0, 0.30);
}

html.nav-theme-dark .side-panel-header[b-afmkb11qjd] {
    background: #0f172a;
}

html.nav-theme-dark .side-panel-title[b-afmkb11qjd] {
    color: #94a3b8;
}

html.nav-theme-dark .side-panel-close[b-afmkb11qjd] {
    color: #94a3b8;
}

html.nav-theme-dark .side-panel-close:hover[b-afmkb11qjd] {
    background: var(--df-text);
    color: var(--df-border);
}

html.nav-theme-dark .side-panel-close:focus-visible[b-afmkb11qjd] {
    background: rgba(99, 102, 241, 0.20);
    color: #c7d2fe;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.30);
}

html.nav-theme-dark .side-panel-body[b-afmkb11qjd] {
    background: #0f172a;
    scrollbar-color: rgba(226, 232, 240, 0.20) transparent;
}

html.nav-theme-dark .side-panel-body[b-afmkb11qjd]::-webkit-scrollbar-thumb {
    background: rgba(226, 232, 240, 0.18);
}

html.nav-theme-dark .side-panel-body[b-afmkb11qjd]::-webkit-scrollbar-thumb:hover {
    background: rgba(226, 232, 240, 0.32);
}

html.nav-theme-dark .side-panel-body.side-panel-body-frame[b-afmkb11qjd] {
    background: #0b1220;
    border-top-color: var(--df-text);
}
/* /Components/Shared/TicketPreview.razor.rz.scp.css */
.preview-loading[b-tp5mcsoq27],
.preview-empty[b-tp5mcsoq27] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: #71717a;
    font-size: 0.9rem;
}

.preview-header[b-tp5mcsoq27] {
    margin-bottom: 18px;
}

.preview-id[b-tp5mcsoq27] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #a1a1aa;
    letter-spacing: 0.04em;
}

.preview-title[b-tp5mcsoq27] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #18181b;
    margin: 4px 0 10px;
    line-height: 1.35;
}

.preview-badges[b-tp5mcsoq27] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preview-grid[b-tp5mcsoq27] {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 8px;
    column-gap: 14px;
    margin-bottom: 18px;
    font-size: 0.875rem;
}

.preview-grid dt[b-tp5mcsoq27] {
    font-weight: 600;
    color: #71717a;
}

.preview-grid dd[b-tp5mcsoq27] {
    margin: 0;
    color: #18181b;
    overflow-wrap: anywhere;
}

.preview-section-title[b-tp5mcsoq27] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 8px;
}

.preview-description[b-tp5mcsoq27] {
    font-size: 0.9rem;
    color: #27272a;
    line-height: 1.55;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 12px 14px;
    max-height: 260px;
    overflow-y: auto;
}

.preview-description :where(img)[b-tp5mcsoq27] {
    max-width: 100%;
    height: auto;
}

.preview-actions[b-tp5mcsoq27] {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
/* /Components/Shared/TimeEntryRow.razor.rz.scp.css */
.te-row[b-26a8j83yn2] {
    display: grid;
    grid-template-columns: 4px 1fr auto auto;
    column-gap: 0.85rem;
    row-gap: 0.15rem;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid var(--df-border, var(--df-border));
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.te-row:last-child[b-26a8j83yn2] {
    border-bottom: 0;
}

.te-bar[b-26a8j83yn2] {
    grid-row: 1 / 3;
    align-self: stretch;
    width: 4px;
    border-radius: 2px;
    background: var(--df-primary, var(--df-primary));
}

.te-row.te-task .te-bar[b-26a8j83yn2] {
    background: #14b8a6;
}

.te-row.te-absence .te-bar[b-26a8j83yn2] {
    background: var(--df-warning, var(--df-warning));
}

.te-row.te-other .te-bar[b-26a8j83yn2] {
    background: var(--df-text-muted, var(--df-text-muted));
}

.te-row.te-running .te-bar[b-26a8j83yn2] {
    background: var(--df-success, var(--df-success));
    animation: te-pulse-b-26a8j83yn2 2s ease-in-out infinite;
}

@keyframes te-pulse-b-26a8j83yn2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.te-primary[b-26a8j83yn2] {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--df-text, var(--df-text));
}

.te-name[b-26a8j83yn2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.te-running-text[b-26a8j83yn2] {
    color: var(--df-success, var(--df-success));
    font-weight: 500;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.te-running-text .bi[b-26a8j83yn2] {
    margin-right: 0.15rem;
}

.te-duration[b-26a8j83yn2] {
    color: var(--df-primary, var(--df-primary));
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}

.te-row.te-running .te-duration[b-26a8j83yn2] {
    color: var(--df-success, var(--df-success));
}

.te-duration-value[b-26a8j83yn2] {
    font-size: 1rem;
}

.te-duration-unit[b-26a8j83yn2] {
    color: var(--df-text-muted, var(--df-text-muted));
    font-weight: 500;
    margin-left: 0.15rem;
    font-size: 0.875rem;
}

.te-actions[b-26a8j83yn2] {
    display: flex;
    gap: 0.15rem;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.te-row:hover .te-actions[b-26a8j83yn2],
.te-row:focus-within .te-actions[b-26a8j83yn2] {
    opacity: 1;
}

.te-action-btn[b-26a8j83yn2] {
    background: transparent;
    border: 0;
    color: var(--df-text-muted, var(--df-text-muted));
    padding: 0.3rem 0.45rem;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    font-size: 0.95rem;
}

.te-action-btn:hover[b-26a8j83yn2],
.te-action-btn:focus[b-26a8j83yn2] {
    background: var(--df-primary-light, var(--df-primary-light));
    color: var(--df-primary, var(--df-primary));
    outline: none;
}

.te-action-btn.te-action-danger:hover[b-26a8j83yn2],
.te-action-btn.te-action-danger:focus[b-26a8j83yn2] {
    background: var(--df-danger-light);
    color: var(--df-danger, var(--df-danger));
}

.te-lock[b-26a8j83yn2] {
    color: var(--df-text-muted, var(--df-text-muted));
    padding: 0.3rem 0.45rem;
    font-size: 0.95rem;
}

.te-secondary[b-26a8j83yn2] {
    grid-column: 2 / 5;
    font-size: 0.78rem;
    color: var(--df-text-muted, var(--df-text-muted));
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
}

.te-time[b-26a8j83yn2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.te-time .bi-clock[b-26a8j83yn2] {
    font-size: 0.875rem;
    opacity: 0.7;
}

.te-arrow[b-26a8j83yn2] {
    opacity: 0.6;
}

.te-sep[b-26a8j83yn2] {
    opacity: 0.5;
}

.te-link[b-26a8j83yn2] {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.te-link:hover[b-26a8j83yn2] {
    color: var(--df-primary, var(--df-primary));
    text-decoration: underline;
}

.te-detail[b-26a8j83yn2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.te-lunch[b-26a8j83yn2] {
    color: var(--df-warning, var(--df-warning));
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Dark theme harmony (sidebar dark theme spills onto some surfaces) */
html.nav-theme-dark .te-row[b-26a8j83yn2] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* /Components/Shared/TimerStartGuard.razor.rz.scp.css */
/* Built entirely from --df-* tokens so the prompt repaints with html.nav-theme-dark
   rather than shipping a light card into a dark app. */

.tsg-dot[b-brm80ahi5f] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--df-warning);
    box-shadow: 0 0 0 3px var(--df-warning-light);
    margin-right: 0.4rem;
    vertical-align: middle;
}

.tsg-lede[b-brm80ahi5f] {
    font-size: 0.875rem;
    color: var(--df-text-muted);
}

.tsg-lede strong[b-brm80ahi5f] {
    color: var(--df-text);
    font-weight: 600;
}

/* The three outcomes. Each states plainly what happens to the time already on the clock. */
.tsg-choices[b-brm80ahi5f] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tsg-choice[b-brm80ahi5f] {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--df-border);
    border-radius: 0.4rem;
    background: var(--df-bg);
    cursor: pointer;
    transition: background var(--df-transition), border-color var(--df-transition);
}

.tsg-choice.is-on[b-brm80ahi5f] {
    border-color: var(--df-primary-border);
    background: var(--df-primary-light);
}

.tsg-radio[b-brm80ahi5f] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--df-primary);
    cursor: pointer;
    margin: 0.1rem 0 0 0;
}

.tsg-choice-text[b-brm80ahi5f] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.tsg-choice-title[b-brm80ahi5f] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--df-text);
}

.tsg-choice-detail[b-brm80ahi5f] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--df-text-muted);
}

.tsg-list-label[b-brm80ahi5f] {
    margin: 0.9rem 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-text-muted);
}

.tsg-hint[b-brm80ahi5f] {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--df-text-muted);
}

.tsg-list[b-brm80ahi5f] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tsg-row[b-brm80ahi5f] {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--df-border);
    border-radius: 0.4rem;
    background: var(--df-bg);
    cursor: pointer;
    transition: background var(--df-transition), border-color var(--df-transition);
}

.tsg-row.is-on[b-brm80ahi5f] {
    border-color: var(--df-success-border);
    background: var(--df-success-light);
}

.tsg-row.is-off[b-brm80ahi5f] {
    opacity: 0.72;
}

.tsg-check[b-brm80ahi5f] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--df-success);
    cursor: pointer;
    margin: 0;
}

.tsg-text[b-brm80ahi5f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tsg-name[b-brm80ahi5f] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--df-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsg-meta[b-brm80ahi5f] {
    font-size: 0.72rem;
    color: var(--df-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsg-under[b-brm80ahi5f] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
}

.tsg-elapsed[b-brm80ahi5f] {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--df-text-muted);
    white-space: nowrap;
}

.tsg-row.is-on .tsg-elapsed[b-brm80ahi5f] {
    color: var(--df-success);
}
/* /Components/Shared/TodosDrawer.razor.rz.scp.css */
/* Ticket Todos drawer. Sits below the app's top bar (3.5rem) so the bell, timecard and user
   menu stay reachable even while it's pinned. The page-side half of docking — the padding that
   makes room for it — is the html.td-todos-docked rule in app.css. */

.todos-drawer-backdrop[b-a8ths3bzz5] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1040;
}

.todos-drawer[b-a8ths3bzz5] {
    position: fixed;
    top: calc(3.5rem + 12px);
    right: 12px;
    bottom: 12px;
    width: 360px;
    max-width: calc(100vw - 24px);
    display: flex;
    flex-direction: column;
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-card-shadow-hover);
    z-index: 1050;
    overflow: hidden;
    animation: todos-drawer-in-b-a8ths3bzz5 0.2s ease;
}

/* Pinned it's part of the page rather than floating over it, so it sits under page popovers —
   and under the top bar. The Loop panel, alert bell and user menu all open from inside
   .top-row, which is a stacking context at z-index 10 (MainLayout.razor.css), so their own
   1000+ z-indexes only count inside it; anything here above 10 covers them. */
.todos-drawer.pinned[b-a8ths3bzz5] {
    z-index: 9;
    box-shadow: var(--df-card-shadow);
}

.todos-drawer-header[b-a8ths3bzz5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border-bottom: 1px solid var(--df-border);
    flex-shrink: 0;
}

.todos-drawer-title[b-a8ths3bzz5] {
    margin: 0;
    margin-right: auto;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.todos-drawer-title i[b-a8ths3bzz5] {
    color: var(--df-primary);
}

.todos-drawer-count[b-a8ths3bzz5] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--df-text-muted);
    white-space: nowrap;
}

.todos-drawer-btn[b-a8ths3bzz5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--df-text-muted);
    cursor: pointer;
    transition: all var(--df-transition);
}

.todos-drawer-btn:hover[b-a8ths3bzz5] {
    background: var(--df-primary-light);
    color: var(--df-primary);
}

.todos-drawer-btn.active[b-a8ths3bzz5] {
    background: var(--df-primary-light);
    border-color: var(--df-primary-border);
    color: var(--df-primary);
}

html.nav-theme-dark .todos-drawer-btn:hover[b-a8ths3bzz5],
html.nav-theme-dark .todos-drawer-btn.active[b-a8ths3bzz5],
html.nav-theme-dark .todos-drawer-title i[b-a8ths3bzz5] {
    color: #c7d2fe;
}

.todos-drawer-btn:focus-visible[b-a8ths3bzz5] {
    outline: 2px solid var(--df-primary);
    outline-offset: 1px;
}

.todos-drawer-body[b-a8ths3bzz5] {
    flex: 1 1 auto;
    min-height: 0;
}

@keyframes todos-drawer-in-b-a8ths3bzz5 {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* On a phone the app's top bar is still there but narrower margins matter more. */
@media (max-width: 640px) {
    .todos-drawer[b-a8ths3bzz5] {
        top: calc(3.5rem + 8px);
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .todos-drawer[b-a8ths3bzz5] {
        animation: none;
    }
}

@media print {
    .todos-drawer[b-a8ths3bzz5],
    .todos-drawer-backdrop[b-a8ths3bzz5] {
        display: none;
    }
}