:root {
    --bg-empty: #ffffff;
    /* LeetCode Greens */
    --lc-1: #9be9a8;
    --lc-2: #40c463;
    --lc-3: #30a14e;
    --lc-4: #216e39;

    /* GitHub Oranges */
    --gh-1: #ffeed8;
    --gh-2: #ffc773;
    --gh-3: #ffa116;
    --gh-4: #cc7b00;

    --cell-size: 13px;
    --cell-gap: 3px;
}

.activity-card {
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
}

.graph-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    justify-content: flex-end;
}

.chart-main {
    display: flex;
    flex-direction: column;

    /* Important changes */
    width: max-content;
    min-width: 100%;
    flex: 0 0 auto;
}

.graph-grid {
    display: grid;
    grid-template-rows: repeat(7, var(--cell-size));
    grid-auto-flow: column;
    gap: var(--cell-gap);

    /* Ensure the grid takes its actual content width */
    width: max-content;

    direction: ltr;
}

/* On smaller screens, align the entire chart to the right */
@media (max-width: 768px) {
    .graph-wrapper {
        justify-content: flex-end;
    }
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    border-radius: 3px;
    /* Noticeably rounder than default */
    background-color: var(--bg-empty);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    cursor: pointer;
}

.cell:not(.empty):hover {
    transform: scale(1.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.cell.empty {
    background: transparent;
    cursor: default;
}

.cell.level-0 {
    background: var(--bg-empty);
}

/* GitHub Level Classes */
.cell.github.level-1 {
    background: var(--gh-1);
}

.cell.github.level-2 {
    background: var(--gh-2);
}

.cell.github.level-3 {
    background: var(--gh-3);
}

.cell.github.level-4 {
    background: var(--gh-4);
}

/* LeetCode Level Classes */
.cell.leetcode.level-1 {
    background: var(--lc-1);
}

.cell.leetcode.level-2 {
    background: var(--lc-2);
}

.cell.leetcode.level-3 {
    background: var(--lc-3);
}

.cell.leetcode.level-4 {
    background: var(--lc-4);
}

/* Legend Styles */
.legend-container {
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-size: 12px;
    color: #57606a;
}

.legend-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-title {
    margin-right: 4px;
    font-weight: 500;
}

/* Custom Tooltip */
.custom-tooltip {
    position: absolute;
    background: #24292f;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.custom-tooltip strong {
    display: block;
    margin-bottom: 4px;
    color: #f6f8fa;
}

.cell.blink-once {
    animation: subtleBlink var(--blink-duration, 500ms) ease-in-out;
}

@keyframes subtleBlink {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }
}