/* The Letter Circle */
.journal-avatar {
    width: 25px;
    height: 25px;
    min-width: 25px;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    background-color: #6c757d; /* Default fallback color */
}

/* Hover effect for the item */
.journal-dropdown-item:hover, .dropdown-item:hover {
    background-color: #f8f9fa;
    transition: all 0.2s ease;
}

/* Dynamic Colors based on First Letter (Common letters) */
.journal-avatar[data-letter="A"], .journal-avatar[data-letter="J"] { background: linear-gradient(135deg, #ff5f6d, #ffc371); }
.journal-avatar[data-letter="B"], .journal-avatar[data-letter="K"] { background: linear-gradient(135deg, #2193b0, #6dd5ed); }
.journal-avatar[data-letter="C"], .journal-avatar[data-letter="L"] { background: linear-gradient(135deg, #11998e, #38ef7d); }
.journal-avatar[data-letter="D"], .journal-avatar[data-letter="M"] { background: linear-gradient(135deg, #ee0979, #ff6a00); }
.journal-avatar[data-letter="E"], .journal-avatar[data-letter="N"] { background: linear-gradient(135deg, #4568dc, #b06ab3); }
.journal-avatar[data-letter="F"], .journal-avatar[data-letter="O"] { background: linear-gradient(135deg, #f7971e, #ffd200); }
.journal-avatar[data-letter="G"], .journal-avatar[data-letter="P"] { background: linear-gradient(135deg, #00b09b, #96c93d); }
.journal-avatar[data-letter="H"], .journal-avatar[data-letter="I"] { background: linear-gradient(135deg, #8e2de2, #4a00e0); }
/* Default for others */
.journal-avatar { background: linear-gradient(135deg, #434343, #000000); }