.bg-priority-critical, .bg-priority-4 { background-color: var(--color-priority-4) !important; }
.bg-priority-high, .bg-priority-3 { background-color: var(--color-priority-3) !important; }
.bg-priority-medium, .bg-priority-2 { background-color: var(--color-priority-2) !important; }
.bg-priority-low, .bg-priority-1 { background-color: var(--color-priority-1) !important; }
.bg-priority-negligible, .bg-priority-0 { background-color: var(--color-priority-0) !important; }
.bg-priority-none { background-color: var(--color-priority-none) !important; }

.bg-risk-catastrophic, .bg-risk-4 { background-color: var(--color-risk-4) !important; }
.bg-risk-major, .bg-risk-3 { background-color: var(--color-risk-3) !important; }
.bg-risk-moderate, .bg-risk-2 { background-color: var(--color-risk-2) !important; }
.bg-risk-minor, .bg-risk-1 { background-color: var(--color-risk-1) !important; }
.bg-risk-insignificant, .bg-risk-0 { background-color: var(--color-risk-0) !important; }
.bg-risk-none { background-color: var(--color-risk-none) !important; }

.bg-state-TODO-New { background-color: var(--color-state-TODO-New) !important; }
.bg-state-TODO-Waiting { background-color: var(--color-state-TODO-Waiting) !important; }
.bg-state-DOING-Refining { background-color: var(--color-state-DOING-Refining) !important; }
.bg-state-DOING-Creating { background-color: var(--color-state-DOING-Creating) !important; }
.bg-state-DONE-Reviewing { background-color: var(--color-state-DONE-Reviewing) !important; }
.bg-state-DONE-Complete { background-color: var(--color-state-DONE-Complete) !important; }
.bg-state-none { background-color: var(--color-levelname-none) !important; }

.bg-levelname-vision { background-color: var(--color-levelname-vision) !important; }
.bg-levelname-strategy { background-color: var(--color-levelname-strategy) !important; }
.bg-levelname-objective { background-color: var(--color-levelname-objective) !important; }
.bg-levelname-keyresult { background-color: var(--color-levelname-keyresult) !important; }
.bg-levelname-deliverable { background-color: var(--color-levelname-deliverable) !important; }
.bg-levelname-task { background-color: var(--color-levelname-task) !important; }
.bg-levelname-none { background-color: var(--color-levelname-none) !important; }

.bg-type-IDEA { background-color: var(--color-type-IDEA) !important; }
.bg-type-OPPORTUNITY { background-color: var(--color-type-OPPORTUNITY) !important; }
.bg-type-IMPROVEMENT { background-color: var(--color-type-IMPROVEMENT) !important; }
.bg-type-DEVELOPMENT { background-color: var(--color-type-DEVELOPMENT) !important; }
.bg-type-DEFECT { background-color: var(--color-type-DEFECT) !important; }
.bg-type-RISK { background-color: var(--color-type-RISK) !important; }
.bg-type-OOO { background-color: var(--color-type-OOO) !important; }
.bg-type-none { background-color: var(--color-type-none) !important; }

.bg-guestimate-0 { background-color: var(--color-guestimate-0) !important; }
.bg-guestimate-1 { background-color: var(--color-guestimate-1) !important; }
.bg-guestimate-2 { background-color: var(--color-guestimate-2) !important; }
.bg-guestimate-3 { background-color: var(--color-guestimate-3) !important; }
.bg-guestimate-5 { background-color: var(--color-guestimate-5) !important; }
.bg-guestimate-8 { background-color: var(--color-guestimate-8) !important; }
.bg-guestimate-13 { background-color: var(--color-guestimate-13) !important; }
.bg-guestimate-21 { background-color: var(--color-guestimate-21) !important; }
.bg-guestimate-none { background-color: var(--color-guestimate-none) !important; }

/* Add border-radius to all color classes */
[class*="bg-priority-"], [class*="bg-risk-"], [class*="bg-state-"],
[class*="bg-levelname-"], [class*="bg-type-"], [class*="bg-guestimate-"] {
border-radius: 2px;
}

/* ShowColor dropdown active states */
.state-color-active { background-color: var(--state-active-bg, transparent) !important; }
.priority-color-active { background-color: var(--priority-active-bg, transparent) !important; }
.risk-color-active { background-color: var(--risk-active-bg, transparent) !important; }
.type-color-active { background-color: var(--type-active-bg, transparent) !important; }
.guestimate-color-active { background-color: var(--guestimate-active-bg, transparent) !important; }
.levelname-color-active { background-color: var(--levelname-active-bg, transparent) !important; }

/* Level depth visualization dots */
.level-dots {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    position: absolute;
    top: 0px;
    left: -14px;
    z-index: 10;
}

/* Level dots in modal - positioned next to name field */
#modal-level-dots .level-dots {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.level-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.level-dot-vision { background-color: #2e3138; }
.level-dot-strategy { background-color: #595959; }
.level-dot-objective { background-color: #828282; }
.level-dot-keyresult { background-color: #a5a5a5; }
.level-dot-deliverable { background-color: #bcbcbc; }
.level-dot-task { background-color: #d2d2d2; }