.popover-trigger { display: inline-block; width:100%; }
.popover-panel {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 6px;
    animation: popover-in 0.3s ease-out;
}

.popover-panel.system{
    background-color: var(--bg-primary);
}

@keyframes popover-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dependencies popover — reproduces the rust-ui Popover look in Kyst's own CSS
   (no Tailwind / no CSS Anchor Positioning). Source: rust-ui PopoverContent
   "p-4 rounded-md border bg-card shadow-md". See RUST-UI-ADAPTER.md. */
.popover-panel.deps-popover {
    width: 400px;
    max-width: 92vw;
    max-height: 70vh;
    overflow-y: auto;
    padding: 16px;                 /* p-4 */
    border-radius: 6px;            /* rounded-md */
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    /* rust-ui open animation: scale(0.95) translateY(-2px) -> scale(1) */
    transform-origin: top center;
    animation: deps-popover-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes deps-popover-in {
    from { opacity: 0; transform: scale(0.95) translateY(-2px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* The deps popover hosts the full DependenciesSection; drop its redundant
   "Dependencies" heading (the trigger context already implies it). */
.popover-panel.deps-popover .deps-section > .deps-section-header {
    display: none;
}

/* Gantt-only popover header: which item the badges/dependencies belong to. */
.deps-popover-item-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Manual-block banner shown at the top of the deps popover when the item was
   blocked by hand (separate from dependency-derived blocking). */
.deps-manual-block {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, #c0392b 35%, transparent);
    background: color-mix(in srgb, #c0392b 10%, transparent);
}
.deps-manual-block-icon { font-size: 14px; line-height: 1.3; flex-shrink: 0; }
.deps-manual-block-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deps-manual-block-text strong { font-size: 0.8rem; color: #c0392b; }
.deps-manual-block-reason { font-size: 0.78rem; color: var(--text-secondary); }

/* Multiselect */
.multiselect-trigger {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popover-panel.multiselect-popover {
    background-color: var(--card-bg, var(--bg-primary, #ffffff));
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    cursor: pointer;
}

.multiselect-option:hover {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
}

.multiselect-option.selected {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-weight: 500;
}

/* Thin colored swatch before the label (e.g. the tag's color). */
.multiselect-color-bar {
    width: 4px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.multiselect-option label {
    cursor: pointer;
    flex: 1;
}

.multiselect-option input[type="checkbox"] {
    cursor: pointer;
    border-radius: 16px;
    accent-color: var(--accent);
}