html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    overflow: hidden;
}

/* App shell: full viewport, no body scroll */
.page.app-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

/* SignalR debug panel at foot of page - only takes space when panel is shown */
.app-footer-debug {
    flex-shrink: 0;
}

/* Narrow: top row full width, then page-content (sidebar + content-column) */
.page-content {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Desktop (min-width: 992px): sidebar + content-column as direct flex children of .page */
@media (min-width: 992px) {
    .page.app-shell {
        flex-direction: row;
    }

    .page-content {
        display: contents; /* sidebar + content-column become direct children of .page */
    }

    .content-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    .top-row-narrow {
        display: none !important;
    }

    .top-row-desktop {
        flex-shrink: 0;
    }

    .workspace-host {
        flex: 1;
        min-height: 0;
        overflow: auto;
        display: flex;
        flex-direction: column;
    }

    .workspace-host .content {
        flex: 1;
        padding-top: 0;
        min-height: 0;
    }
}

/* Narrow: top row visible; desktop top row hidden until we're in content-column */
@media (max-width: 991.98px) {
    .top-row-desktop {
        display: none !important;
    }

    .content-column {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .workspace-host {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }
}

/*
 * Space page (/space/...): background uses background-attachment: fixed on .space-detail-container.
 * The scroll surface (workspace-host / article) must stay transparent; otherwise an opaque default
 * layer scrolls over the fixed image. Main column behind the workspace is cleared too so no white
 * strip appears beside full-bleed content. Do not clip overflow-x here — wide space canvases
 * need horizontal scroll on .workspace-host (overflow: auto from layout rules).
 */
.workspace-host:has(.space-detail-container) {
    background-color: transparent !important;
}

.workspace-host:has(.space-detail-container) > .content,
.workspace-host:has(.space-detail-container) article.content {
    background-color: transparent !important;
}

.content-column:has(.space-detail-container) {
    background-color: transparent !important;
}

.content {
    padding-top: 0;
    flex: 1;
}

/* SLA-aligned theme tokens for LHS (match SharedList.App2 Lists screen) */
.sidebar {
    --slw-sidebar-surface: #ffffff;
    --slw-sidebar-divider: #DADCE0; /* visible but subtle line between list/space rows */
    --slw-sidebar-text-primary: #333333; /* match SLA: medium grey, not harsh black */
    --slw-sidebar-text-secondary: #667781;
    --slw-sidebar-text-tertiary: #8E9BA4; /* lighter grey for time – most subtle */
    --slw-sidebar-accent: #F26522;
    --slw-sidebar-badge-red: #f44336;
    --slw-sidebar-hover: rgba(0, 0, 0, 0.04);
    --slw-sidebar-selected-bg: rgba(242, 101, 34, 0.08);
    --slw-sidebar-selected-bar: #F26522;
}

/* Dark mode: disabled for now */

.sidebar {
    background-color: var(--slw-sidebar-surface);
    border-right: 1px solid var(--slw-sidebar-divider);
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    max-height: 100%;
    min-height: 0;
    transition: width 0.3s ease, opacity 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.sidebar.collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
}

/* Desktop: full-height sidebar, expanded (280px) or mini rail (68px) */
@media (min-width: 992px) {
    .sidebar {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        height: 100%;
        min-height: 100%;
        opacity: 1;
        overflow-y: auto;
        overflow-x: hidden;
        align-self: stretch;
    }

    .sidebar.collapsed {
        width: 68px;
        min-width: 68px;
        max-width: 68px;
        opacity: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Sidebar header: brand + collapse toggle (desktop only) – SLA top bar vibe */
    .sidebar-header-desktop {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 12px 16px;
        border-bottom: 1px solid var(--slw-sidebar-divider);
        min-height: 2.75rem;
        box-sizing: border-box;
        background-color: var(--slw-sidebar-surface);
    }

    .sidebar-brand {
        color: var(--slw-sidebar-text-primary);
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .sidebar-brand:hover {
        color: var(--slw-sidebar-text-primary);
        text-decoration: none;
        opacity: 0.85;
    }

    /* Collapse/expand chevron – SLA icon color (dark gray) */
    .sidebar .sidebar-toggle-inrail {
        color: var(--slw-sidebar-text-secondary);
        padding: 0.35rem 0.5rem;
        margin: -0.2rem -0.25rem -0.2rem 0;
        border: none;
        background: none;
        cursor: pointer;
        border-radius: 6px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        min-width: 2rem;
        min-height: 2rem;
    }

    .sidebar .sidebar-toggle-inrail:hover {
        color: var(--slw-sidebar-text-primary);
        background: var(--slw-sidebar-hover);
    }

    .sidebar.collapsed .sidebar-brand {
        display: none;
    }

    .sidebar.collapsed .sidebar-header-desktop {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Mini rail: icons only, hide labels */
    .sidebar.collapsed .nav-section-title,
    .sidebar.collapsed .list-title,
    .sidebar.collapsed .list-item-content,
    .sidebar.collapsed .list-item-main,
    .sidebar.collapsed .list-meta,
    .sidebar.collapsed .list-time,
    .sidebar.collapsed .list-item-time,
    .sidebar.collapsed .nav-section-menu-button,
    .sidebar.collapsed .list-item-actions,
    .sidebar.collapsed .list-item-right,
    .sidebar.collapsed .space-menu-button,
    .sidebar.collapsed .show-more-link,
    .sidebar.collapsed .show-more-action,
    .sidebar.collapsed .nav-section-toggle,
    .sidebar.collapsed .new-space-input-wrapper,
    .sidebar.collapsed .new-badge {
        display: none !important;
    }

    .sidebar.collapsed .nav-section-header {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .sidebar.collapsed .nav-item ::deep a {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .sidebar.collapsed .list-item {
        justify-content: center;
    }

    .sidebar.collapsed .nav-section-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .sidebar.collapsed .sidebar-nav-pad {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Hide top-bar hamburger on desktop; only show in overlay (narrow) mode */
    .sidebar-toggle-topbar {
        display: none !important;
    }
}

/* Sidebar header only on desktop; hidden in overlay (narrow) mode */
@media (max-width: 991.98px) {
    .sidebar-header-desktop {
        display: none !important;
    }
}

.nav-scrollable {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--slw-sidebar-surface);
}

.nav-scrollable nav {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    padding: 1rem 0;
}

.nav-footer {
    padding: 1rem 8px 1rem 16px;
    border-top: 1px solid var(--slw-sidebar-divider);
    margin-top: auto;
    flex-shrink: 0;
}

.nav-footer small {
    color: var(--slw-sidebar-text-secondary) !important;
    font-size: 0.75rem;
}

.nav-section {
    min-width: 0;
    max-width: 100%;
}

/* Section headers: quiet labels — icon sits at same left inset as list avatars (16px) */
.nav-section-header {
    color: var(--slw-sidebar-text-secondary);
    font-weight: 500;
    padding: 0.6rem 8px 0.3rem 16px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    position: relative;
    min-width: 0;
    border-top: 1px solid var(--slw-sidebar-divider);
    margin-top: 0.25rem;
}

/* 12px between Shortlists → Lists, then standard gap for later sections */
.nav-section--lists .nav-section-header {
    margin-top: 0;
    padding-top: 0.25rem;
}

.nav-section--spaces .nav-section-header {
    margin-top: 1rem;
}

.nav-section:first-child .nav-section-header {
    border-top: none;
    margin-top: 0;
    padding-top: 0.35rem;
}

.nav-section-header .nav-section-header-icon {
    font-size: 0.875rem;
    line-height: 1;
    width: auto;
    height: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--slw-sidebar-text-secondary);
}

.nav-section-header .bi:first-child {
    margin-right: 0;
    flex-shrink: 0;
}

.nav-section-header .nav-section-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--slw-sidebar-text-secondary);
    font-weight: 500;
}

.nav-section-header .nav-section-menu-button {
    flex-shrink: 0;
}

.nav-section-toggle {
    color: var(--slw-sidebar-text-secondary);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.2s, transform 0.2s;
}

.nav-section-toggle:hover {
    opacity: 1;
    color: var(--slw-sidebar-text-primary);
}

.nav-section-toggle .bi {
    font-size: 0.75rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.nav-section--collapsed .nav-section-toggle .bi {
    transform: rotate(-90deg);
}

.nav-section-menu-button {
    color: var(--slw-sidebar-text-secondary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.875rem;
    opacity: 0.65;
    transition: opacity 0.2s;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-section-menu-button:hover {
    opacity: 1;
    color: var(--slw-sidebar-text-primary);
}

/* No horizontal padding: list rows use full width and apply 16px via link padding (SLA fit-to-sides) */
.nav-section-content {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.nav-section--shortlists .nav-section-header {
    padding-top: 0.35rem;
    padding-right: 8px;
    padding-bottom: 0.3rem;
    padding-left: 16px;
}

.nav-section--shortlists .nav-section-content {
    padding-top: 0;
    padding-bottom: 2px;
}

.nav-section--shortlists .sidebar-nav-pad {
    padding-left: 36px;
    font-size: 0.8125rem;
}

.sidebar .text-muted {
    color: var(--slw-sidebar-text-secondary) !important;
}

.nav-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
}

/* Sidebar nav horizontal padding (16px left, 8px right). Our class instead of Bootstrap px-3. */
.sidebar-nav-pad {
    padding-left: 16px;
    padding-right: 8px;
}

/* List and space rows: no wrapper padding (we don’t use px-3 on these); link has 16px left, 8px right */

/* Row separator: thin grey line between list items (match SLA). Border-top on following rows so ::after stays free for active bar. */
.sidebar .nav-item + .nav-item > a.nav-link:not(.show-more-link) {
    border-top: 1px solid var(--slw-sidebar-divider) !important;
}

/* Sidebar list row link: high specificity to beat Bootstrap + scoped CSS. Left 16px, right 8px. */
.sidebar .nav-item a.nav-link {
    color: var(--slw-sidebar-text-primary) !important;
    border-radius: 0 !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    padding: 10px 8px 10px 16px !important;
    transition: background-color 0.2s;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* List rows: transparent background. Space rows keep their inline background-image. */
.sidebar .nav-item a.nav-link:not([style*="background-image"]) {
    background: transparent !important;
}

.nav-item ::deep a {
    color: var(--slw-sidebar-text-primary);
    border-radius: 0;
    min-height: 64px;
    display: flex;
    align-items: flex-start;
    text-decoration: none;
    padding: 10px 8px 10px 16px !important;
    transition: background-color 0.2s;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    background: transparent;
}

.nav-item ::deep a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 0;
    transition: background 0.2s;
    pointer-events: none;
}

.nav-item ::deep a:hover {
    background-color: var(--slw-sidebar-hover);
    color: var(--slw-sidebar-text-primary);
}

.nav-item ::deep a .list-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    flex: 1 1 0%;
}

/* Space rows with background image: subtle overlay so name stays readable */
.nav-item ::deep a[style*="background-image"]::before {
    display: block;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.5) 100%);
}

.nav-item ::deep a:not([style*="background-image"])::before {
    display: none;
}

/* Show more: quiet secondary action aligned to list text column */
.nav-item.show-more-action {
    padding: 2px 8px 4px 48px;
    margin-top: -2px;
}

.show-more-button {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--slw-sidebar-text-secondary);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.show-more-button:hover {
    color: var(--slw-sidebar-text-primary);
    text-decoration: underline;
}

/* Legacy show-more-link kept for mini-sidebar hide rules */
.nav-item ::deep a.show-more-link {
    color: var(--slw-sidebar-text-secondary);
    font-weight: 400 !important;
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    min-height: 0;
    padding: 0 8px 5px 48px !important;
    margin-bottom: 0;
    background: transparent !important;
}

.sidebar .nav-item a.nav-link.show-more-link {
    padding: 0 8px 5px 48px !important;
    font-weight: 400 !important;
    min-height: 0 !important;
}

.sidebar .nav-item a.nav-link.show-more-link span {
    font-weight: 400 !important;
}

.nav-item ::deep a.show-more-link:hover {
    text-decoration: underline;
    color: var(--slw-sidebar-text-primary);
    background: transparent !important;
}

/* Compact wrapper so no dead zone below Show more */
.sidebar .nav-item:has(.show-more-link) {
    margin-bottom: 0;
}

/* Selected: subtle tint + 4px accent bar. Bar drawn via pseudo-element so padding stays 16px and avatar left edges align. */
.nav-item ::deep a.active,
.sidebar .nav-item a.nav-link.active:not([style*="background-image"]) {
    background-color: var(--slw-sidebar-selected-bg) !important;
    color: var(--slw-sidebar-text-primary);
    padding-left: 16px !important; /* same as non-active so avatar column lines up */
}

.nav-item ::deep a.active::after,
.sidebar .nav-item a.nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--slw-sidebar-selected-bar);
    z-index: 1;
    pointer-events: none;
}

.nav-item ::deep a.active:hover:not([style*="background-image"]),
.sidebar .nav-item a.nav-link.active:hover:not([style*="background-image"]) {
    background-color: var(--slw-sidebar-selected-bg) !important;
}

.sidebar .nav-item a.nav-link.active {
    padding-left: 16px !important;
    padding-right: 8px !important;
}

.sidebar .nav-item a.nav-link.active .list-title,
.nav-item ::deep a.active .list-title {
    font-weight: 700;
}

/* ── Shortlist rows ─────────────────────────────────────────────────
   Compact personal-focus section — denser than List rows. A single line
   holds [bookmark] name … count. The action chevron is tucked BELOW the
   count and only appears on hover/focus; it is absolutely positioned so
   it never grows the row or adds a second text line. Shortlists stay
   distinct via the bookmark icon — no avatar and no activity meta. */

/* Compact fixed-ish row height (Lists are taller for their meta line) */
.sidebar .nav-item.sidebar-nav-row--shortlist > a.nav-link {
    min-height: 46px !important;
    padding: 5px 8px 5px 16px !important;
    align-items: flex-start !important;
}

/* First row: a little breathing room from the section header */
.sidebar .nav-section--shortlists .nav-section-content > .nav-item.sidebar-nav-row--shortlist:first-child > a.nav-link {
    padding-top: 7px !important;
}

/* No dividers between shortlist rows (List rows keep separators) */
.sidebar .nav-section--shortlists .sidebar-nav-row--shortlist + .sidebar-nav-row--shortlist > a.nav-link {
    border-top: none !important;
}

/* Single top-aligned line; relative context for the absolute hover chevron */
.sidebar .sidebar-nav-row--shortlist .list-item-main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    min-width: 0;
}

.sidebar .sidebar-nav-row--shortlist .list-item-content {
    flex: 1 1 0%;
    min-width: 0;
}

/* Name: single line with ellipsis, same colour/weight as other nav titles */
.sidebar .sidebar-nav-row--shortlist .list-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--slw-sidebar-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Count: top-right on the name line — secondary, muted, smaller */
.sidebar .sidebar-nav-row--shortlist .list-item-time {
    position: static;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 1px;
    min-width: 16px;
    padding-right: 2px;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    color: var(--slw-sidebar-text-tertiary);
}

/* Chevron: tucked snugly beneath the count, absolutely positioned so the
   row height never grows and no second content line is reserved. */
.sidebar .sidebar-nav-row--shortlist .list-item-right {
    position: absolute;
    top: 12px;
    right: 2px;
    bottom: auto;
    left: auto;
    display: flex;
    justify-content: flex-end;
}

/* Short button so the glyph hugs the count above it; right edge aligned with
   the count; small consistent count-to-chevron gap; still easy to click. */
.sidebar .sidebar-nav-row--shortlist .list-chevron-button {
    height: 18px;
    justify-content: flex-end;
}

/* Two-column row: Avatar (fixed) | Content (flex). Tighter gap so text gets more width. */
.list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

/* Avatar column: fixed 48px, vertically centered in row (never shifts on wrap) */
.list-item .list-icon,
.list-item .list-icon-initials,
.list-item .list-icon-placeholder {
    flex-shrink: 0;
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.list-item .list-icon {
    object-fit: cover;
}

/* Initials: match SLA – orange (#F26522), not white */
.list-item .list-icon-initials {
    font-weight: 600;
    color: var(--slw-sidebar-accent);
}

.list-item .list-icon-placeholder {
    font-size: 1rem;
    color: var(--slw-sidebar-text-secondary);
    background-color: var(--slw-sidebar-hover) !important;
}

/* Bookmark icon: occupies the same 40px column as list avatars so titles share
   the same left edge. Aligned to the top of the row to sit on the title line
   (content is top-aligned in the grid, like List rows). Small glyph — smaller
   than the section header bookmark. */
.list-item .list-icon-shortlist {
    flex-shrink: 0;
    align-self: flex-start;
    width: 40px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--slw-sidebar-text-secondary);
}

.space-icon-no-bg {
    background-color: transparent !important;
    background: none !important;
}

/* Main block: content + timestamp/chevron (WhatsApp Desktop pattern) */
.list-item-main {
    flex: 1 1 0%;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
}

/* List rows: grid keeps title and time on one row without overlap */
.list-item-wrapper .list-item-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: start;
}

.list-item-wrapper .list-item-content {
    grid-column: 1;
    grid-row: 1 / -1;
}

.list-item-wrapper .list-item-time {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    flex-shrink: 0;
}

.list-item-wrapper .list-item-right {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
}

/* Content block: top row = title; bottom row = meta. */
.list-item-content {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title row – list rows use grid for time; spaces reserve chevron space on hover */
.list-item-heading-row {
    padding-right: 0;
}

.list-item-wrapper .list-item-heading-row {
    padding-right: 0;
}

/* Meta row: chevron sits in grid column 2 on list rows */
.list-item-meta-wrap {
    min-width: 0;
    overflow: hidden;
    padding-right: 0;
    transition: padding-right 0.2s ease;
}

.list-item-wrapper:hover .list-item-meta-wrap {
    padding-right: 0;
}

.space-item-wrapper:hover .list-item-meta-wrap {
    padding-right: 28px;
}

/* Timestamp: tertiary – most subtle, pinned top right on non-grid rows */
.list-item-time {
    position: absolute;
    top: 0;
    right: 8px;
    font-size: 12px;
    font-weight: 400;
    color: var(--slw-sidebar-text-tertiary);
    white-space: nowrap;
    line-height: 1.3;
    flex-shrink: 0;
}

/* Chevron: always on "second line" so same place with or without meta (never over timestamp) */
.list-item-right {
    position: absolute;
    right: 8px;
    top: 24px; /* aligns with meta text baseline when present, below timestamp when not */
    bottom: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    pointer-events: none;
}

.list-item-right .list-chevron-button {
    pointer-events: auto;
}

/* Top row: title only (timestamp is .list-item-time, pinned) */
.list-item-heading-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
.list-item-heading-row .list-title {
    flex: 1 1 0%;
    min-width: 0;
}

/* Title: allow 2 lines so names like "test complete" aren’t truncated too short */
.list-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--slw-sidebar-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    min-width: 0;
}

/* Meta: full width, allow 2 lines so "updated Project" etc. isn’t over-cropped */
.list-meta {
    font-size: 14px;
    font-weight: 400;
    color: var(--slw-sidebar-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    min-width: 0;
}

/* Time: inside heading row, right-aligned, no longer a separate column */
.list-time {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--slw-sidebar-text-secondary);
    white-space: nowrap;
    line-height: 1.3;
}

.new-space-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    width: 100%;
}

.new-space-input {
    flex: 1;
    min-width: 0;
    max-width: 140px;
    background: var(--slw-sidebar-hover);
    border: 1px solid var(--slw-sidebar-divider);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--slw-sidebar-text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.new-space-input::placeholder {
    color: var(--slw-sidebar-text-secondary);
}

.new-space-input:focus {
    background: var(--slw-sidebar-surface);
    border-color: var(--slw-sidebar-accent);
}

.new-space-input:hover {
    border-color: var(--slw-sidebar-text-secondary);
}

.new-space-confirm-btn,
.new-space-cancel-btn {
    flex-shrink: 0;
    background: var(--slw-sidebar-hover);
    border: 1px solid var(--slw-sidebar-divider);
    border-radius: 6px;
    padding: 0.5rem;
    color: var(--slw-sidebar-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: background-color 0.2s, border-color 0.2s;
    outline: none;
}

.new-space-confirm-btn:hover {
    background: var(--slw-sidebar-accent);
    border-color: var(--slw-sidebar-accent);
    color: #fff;
}

.new-space-cancel-btn:hover {
    border-color: var(--slw-sidebar-text-secondary);
}

.new-space-confirm-btn:active,
.new-space-cancel-btn:active {
    opacity: 0.9;
}

.space-item-wrapper,
.list-item-wrapper {
    position: relative;
    min-height: 2.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Space row: same structure as list row – thumbnail (not banner), same padding/height/hover/selected */
.space-item-wrapper .nav-link {
    /* Uses same padding and min-height as list rows via .sidebar .nav-item a.nav-link */
}

/* Left-aligned thumbnail: same column width as list avatar, rounded rect, overlay for contrast */
.space-thumbnail {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.space-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.space-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

.space-item-wrapper:hover .space-thumbnail::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
}

.space-thumbnail-placeholder {
    background-color: var(--slw-sidebar-hover);
    color: var(--slw-sidebar-text-secondary);
}

.space-thumbnail-placeholder::after {
    display: none;
}

.space-thumbnail-placeholder .bi {
    font-size: 1.1rem;
}

/* Space content: yield for chevron on hover (same as list) */
.space-item-wrapper .list-item-content {
    padding-right: 0;
}

.space-item-wrapper:hover .list-item-content {
    padding-right: 28px;
}

.space-item-wrapper .list-item-heading-row {
    padding-right: 0; /* no timestamp; reserve space only on hover for chevron */
}

/* Space rows: no meta line – align chevron with top line (title) */
.space-item-wrapper .list-item-right {
    top: 0;
}

.space-menu-button,
.list-menu-button {
    display: flex;
    color: var(--slw-sidebar-text-secondary);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
    align-items: center;
    justify-content: center;
}

.space-item-wrapper:hover .space-menu-button,
.space-menu-button.active {
    opacity: 0.8;
    visibility: visible;
    pointer-events: auto;
}

.space-menu-button:hover {
    opacity: 1 !important;
    color: var(--slw-sidebar-text-primary);
}

/* List row: down chevron. Zero width when not hovered so text fills the space; on hover takes space and appears where text truncated. */
.list-chevron-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    min-width: 0;
    max-width: 0;
    height: 20px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--slw-sidebar-text-secondary);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.2s ease, color 0.2s, min-width 0.2s ease, max-width 0.2s ease;
    flex-shrink: 0;
}

.list-item-wrapper:hover .list-chevron-button,
.space-item-wrapper:hover .list-chevron-button,
.list-chevron-button.active {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}

.list-chevron-button:hover {
    color: var(--slw-sidebar-text-primary);
}

.list-chevron-button .bi-chevron-down {
    font-size: 0.75rem;
}

/* Space rows: keep 3-dot in fixed actions column */
.list-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    margin-left: auto;
}

.list-menu-button {
    color: var(--slw-sidebar-text-secondary);
}

.list-menu-button:hover {
    opacity: 1 !important;
    color: var(--slw-sidebar-text-primary);
}

.space-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.space-menu-popover {
    position: fixed;
    z-index: 1201;
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    padding: 0;
}

.space-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    font-weight: 600;
    font-size: 0.9rem;
    color: #212529;
}

.space-menu-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #666;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.space-menu-close:hover {
    color: #000;
}

.space-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border: none;
    background: transparent;
    color: #212529;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
}

.space-menu-item:hover {
    background: rgba(0,0,0,0.05);
}

.new-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    margin-left: auto;
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: space-between;
    height: 3.5rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    z-index: 100;
}

/* Desktop: single compact merged bar (~52px) */
@media (min-width: 992px) {
    .top-row.top-row-desktop {
        height: 52px;
        min-height: 52px;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}

.top-row-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* List search mode: search bar in header */
.top-row-left.lists-search-mode {
    flex: 1;
    min-width: 0;
}

.lists-search-bar-in-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.lists-search-bar-in-nav:focus-within {
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(242, 101, 34, 0.2);
}

.lists-search-input-icon {
    font-size: 1rem;
    color: #8E9BA4;
    flex-shrink: 0;
}

.lists-search-bar-in-nav input,
.lists-search-input {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    font-size: 0.95rem;
    outline: none;
}

.lists-search-filter-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lists-search-filter-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--slw-sidebar-text-secondary);
}

.lists-search-filter-clear {
    color: var(--slw-sidebar-text-tertiary) !important;
}

.list-item-search-match {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
}

/* Narrow: entity context (icon + title + gear) fills space, no app name in entity view */
.top-row-narrow .top-bar-entity-context {
    flex: 1;
    min-width: 0;
}

.top-row-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Space context in top bar (icon + name + menu) */
.top-bar-space-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.top-bar-space-icon,
.top-bar-space-icon-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6c757d;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.top-bar-space-icon {
    object-fit: cover;
}

.top-bar-space-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-bar-space-menu-wrapper {
    position: relative;
    flex-shrink: 0;
}

.top-bar-space-popover {
    left: 0;
    right: auto;
}

/* List context in top bar (same pattern as space) */
.top-bar-list-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.top-bar-list-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #212529;
    text-decoration: none;
}

.top-bar-list-icon,
.top-bar-list-icon-initials,
.top-bar-list-icon-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6c757d;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 600;
}

.top-bar-list-icon {
    object-fit: cover;
}

.top-bar-list-icon-placeholder {
    font-size: 0.9rem;
}

.top-bar-list-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-bar-list-menu-wrapper {
    position: relative;
    flex-shrink: 0;
}

.top-bar-list-popover {
    left: 0;
    right: auto;
}

.top-nav-icon-button {
    color: #333;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.top-nav-icon-button:hover:not(:disabled) {
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
    text-decoration: none;
}

.top-nav-icon-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.top-nav-icon-button.ai-assistant-toggle.active {
    background-color: rgba(13, 110, 253, 0.12);
    border-radius: 4px;
}

.top-nav-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.top-nav-menu-button {
    color: #333;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.top-nav-menu-button:hover {
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
}

.top-nav-profile-avatar {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.top-nav-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.top-nav-avatar-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.top-nav-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.top-nav-menu-popover {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1201;
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    padding: 0.35rem 0;
}

.top-nav-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border: none;
    background: transparent;
    color: #212529;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.top-nav-menu-item .bi {
    width: 18px;
    display: inline-flex;
    justify-content: center;
}

.top-nav-menu-item:hover {
    background: rgba(0,0,0,0.05);
}

.top-nav-menu-item:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.top-nav-menu-sep {
    height: 1px;
    background: rgba(0,0,0,0.12);
    margin: 0.35rem 0;
}

.sidebar-toggle-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.sidebar-toggle {
    color: #333;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
}

.sidebar-toggle:hover {
    background-color: rgba(0,0,0,0.05);
}

.navbar-brand {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.navbar-brand:hover {
    color: #000;
    text-decoration: none;
}

/* Notification Bell */
.notification-bell-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.notification-bell-button {
    padding: 0.25rem 0.5rem;
    color: #333;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.notification-bell-button:hover {
    background-color: rgba(0,0,0,0.05);
    color: #000;
}

.notification-reason-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.notification-reason-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}

.notification-reason-chip--attention {
    background: #fff3cd;
    color: #7a5d00;
}

.notification-reason-chip--fyi {
    background: #e7f0ff;
    color: #1e4a8a;
}

.notification-why-link {
    font-size: 0.75rem;
    font-weight: 600;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #f44336; /* Red */
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    padding: 0 4px;
    border: 2px solid white;
    box-sizing: border-box;
}

.notification-badge--fyi {
    background-color: #6c757d;
}

.notification-badge--attention {
    background-color: #f44336;
}

.notification-pause-pill {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff3cd;
    color: #7a5d00;
    border: 1px solid #ffe69c;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

.notification-pause-pill--inline {
    position: static;
    transform: none;
    margin-left: 8px;
    font-size: 11px;
    padding: 2px 8px;
    pointer-events: auto;
    vertical-align: middle;
}

.top-row ::deep a, .top-row ::deep .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
    text-decoration: underline;
}

.top-row ::deep .top-nav-icon-button,
.top-row ::deep .top-nav-icon-button:hover {
    text-decoration: none;
}

.top-row ::deep a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page-content {
        flex-direction: row;
    }

    .sidebar {
        height: 100%;
    }
}

/* Below desktop: temporary overlay drawer; hamburger in top bar */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 3.5rem;
        height: calc(100vh - 3.5rem);
        width: 250px;
        min-width: 250px;
        max-width: 250px;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    }

    .sidebar.collapsed {
        left: -250px;
        width: 0;
        min-width: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
    }
}

#blazor-error-ui {
    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;
}

/* Mention Input (SLW) */
.mention-input-container {
    position: relative;
    width: 100%;
}

.mention-picker {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
    max-height: 220px;
    overflow-y: auto;
    z-index: 2000;
    padding: 6px 0;
}

.mention-picker-visible {
    display: block;
}

.mention-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
}

.mention-picker-item:hover,
.mention-picker-item-selected {
    background-color: rgba(255,255,255,0.06);
}

.mention-picker-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mention-picker-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    border: 1px solid rgba(255,255,255,0.15);
}

.mention-picker-name {
    color: #e0e0e0;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-picker-empty {
    padding: 10px 12px;
    color: #9aa0a6;
    font-size: 0.9rem;
}

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

/* App version policy (anonymous API): blocking modal + soft banner */
.app-version-policy-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    box-sizing: border-box;
}

.app-version-policy-modal {
    max-width: 26rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: #fff;
    color: #212529;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.app-version-policy-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.app-version-policy-body {
    margin: 0 0 1rem;
    line-height: 1.45;
}

.app-version-policy-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.app-version-policy-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 199900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: #0d6efd;
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.app-version-policy-banner-text {
    flex: 1;
    min-width: 0;
}

.app-version-policy-banner-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.task-context-menu-wrapper {
    position: relative;
    flex-shrink: 0;
    align-self: center;
}

.task-context-menu-button {
    border: none;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.25rem 0.35rem;
    line-height: 1;
    border-radius: 4px;
    opacity: 0.4;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.task-item:hover .task-context-menu-button,
.task-context-menu-button:hover {
    opacity: 1;
    color: var(--bs-body-color, #212529);
}

.task-context-menu-button:focus-visible {
    opacity: 1;
    color: var(--bs-body-color, #212529);
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: 1px;
}

.task-context-menu-button.active {
    opacity: 1;
    color: var(--bs-body-color, #212529);
}

.task-context-menu-popover {
    min-width: 11.5rem;
    max-width: 15rem;
    z-index: 1300;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    padding: 0.25rem 0 0.35rem;
}

.task-context-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1299;
    background: transparent;
}

.task-context-menu-heading {
    padding: 0.45rem 0.85rem 0.3rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    line-height: 1.3;
}

.task-context-menu-status {
    padding: 0.25rem 0.85rem 0.35rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.task-context-menu-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: none;
    background: transparent;
    color: var(--bs-body-color, #212529);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    line-height: 1.3;
}

.task-context-menu-row:hover {
    background: rgba(0, 0, 0, 0.05);
}

.task-context-menu-checkbox {
    flex-shrink: 0;
    width: 1rem;
    font-size: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-context-menu-row[aria-checked="true"] .task-context-menu-checkbox {
    color: var(--slw-sidebar-accent, #F26522);
}

.task-context-menu-row-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-context-menu-divider {
    height: 1px;
    margin: 0.2rem 0;
    background: rgba(0, 0, 0, 0.08);
}

.task-context-menu-create {
    color: var(--bs-body-color, #212529);
}

.task-context-menu-create-prefix {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.task-context-menu-create-form {
    padding: 0.35rem 0.75rem 0.15rem;
}

.task-context-menu-create-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.task-context-menu-error {
    padding: 0.25rem 0.85rem 0;
    font-size: 0.75rem;
    color: var(--bs-danger, #dc3545);
}

.task-source-list a {
    text-decoration: none;
    color: inherit;
}

.task-source-list a:hover {
    text-decoration: underline;
}