/* Development-activity heatmap (who-we-are team card).
 *
 * Renders 53 weeks x 7 days of squares from /gitlab-activity.php. Intensity
 * uses the brand teal ramp from css/brand.css (--primary-*), with hard-coded
 * fallbacks so the widget still looks right if brand.css fails to load.
 *
 * The widget starts hidden and js/gitlab-activity.js reveals it only once it
 * has data — a failed fetch or an empty year leaves no broken box behind.
 */

.gl-activity {
    display: none;
    margin-top: 1rem;
    text-align: left;
}

.gl-activity.is-ready {
    display: block;
}

/* ---- intensity ramp -------------------------------------------------- */

.gl-activity {
    --gl-sq: 11px;
    --gl-gap: 3px;
    --gl-radius: 2px;

    --gl-l0: #e9edec;
    --gl-l1: var(--primary-100, #c7e8e1);
    --gl-l2: var(--primary-300, #5fbba8);
    --gl-l3: var(--primary-500, #0a867d);
    --gl-l4: var(--primary-700, #175247);

    --gl-edge: rgba(27, 31, 35, 0.06);
    --gl-muted: #6b7280;
    --gl-tip-bg: #1f2937;
    --gl-tip-fg: #ffffff;
}

/* Dark theme: the empty square must stay clearly lighter than the team card
 * it sits on (--card-bg #2d2d2d), otherwise the whole grid disappears and only
 * the active days float in the void. The edge colour has to flip too — a dark
 * outline on a dark card is invisible. */
:root[data-theme="dark"] .gl-activity {
    --gl-l0: #3d4342;
    --gl-l1: var(--primary-700, #175247);
    --gl-l2: var(--primary-600, #11786e);
    --gl-l3: var(--primary-400, #2ba38b);
    --gl-l4: var(--primary-200, #94d2c4);

    --gl-edge: rgba(255, 255, 255, 0.10);
    --gl-muted: #9ca3af;
    --gl-tip-bg: #f3f4f6;
    --gl-tip-fg: #111827;
}

/* ---- layout ---------------------------------------------------------- */

/* The grid is ~750px wide; the card is narrower. Scroll inside this element
 * so the page body itself never gains a horizontal scrollbar on mobile. */
.gl-activity__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
}

.gl-activity__chart {
    display: inline-block;
    min-width: min-content;
}

/* One column per week so a label can be placed on the week its month starts.
 * Labels are wider than a square and deliberately overflow their track. */
.gl-activity__months {
    display: grid;
    grid-template-columns: repeat(53, var(--gl-sq));
    gap: var(--gl-gap);
    margin-left: calc(var(--gl-dow-w, 26px) + var(--gl-gap));
    margin-bottom: 3px;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--gl-muted);
    white-space: nowrap;
}

.gl-activity__body {
    display: flex;
    gap: var(--gl-gap);
}

.gl-activity__dows {
    display: grid;
    grid-template-rows: repeat(7, var(--gl-sq));
    gap: var(--gl-gap);
    width: var(--gl-dow-w, 26px);
    font-size: 0.68rem;
    line-height: var(--gl-sq);
    color: var(--gl-muted);
    white-space: nowrap;
}

.gl-activity__squares {
    display: grid;
    grid-template-rows: repeat(7, var(--gl-sq));
    grid-auto-flow: column;
    grid-auto-columns: var(--gl-sq);
    gap: var(--gl-gap);
}

.gl-activity__day {
    width: var(--gl-sq);
    height: var(--gl-sq);
    border-radius: var(--gl-radius);
    background: var(--gl-l0);
    /* keeps pale squares readable against the card in both themes */
    outline: 1px solid var(--gl-edge);
    outline-offset: -1px;
    transition: transform 0.1s ease;
}

.gl-activity__day[data-level="1"] { background: var(--gl-l1); }
.gl-activity__day[data-level="2"] { background: var(--gl-l2); }
.gl-activity__day[data-level="3"] { background: var(--gl-l3); }
.gl-activity__day[data-level="4"] { background: var(--gl-l4); }

.gl-activity__day.is-empty {
    visibility: hidden;
}

.gl-activity__day:hover {
    transform: scale(1.35);
}

/* ---- footer: summary + legend ---------------------------------------- */

.gl-activity__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: var(--gl-muted);
}

.gl-activity__legend {
    display: flex;
    align-items: center;
    gap: 3px;
}

.gl-activity__legend i {
    width: var(--gl-sq);
    height: var(--gl-sq);
    border-radius: var(--gl-radius);
    background: var(--gl-l0);
    outline: 1px solid var(--gl-edge);
    outline-offset: -1px;
}

.gl-activity__legend i[data-level="1"] { background: var(--gl-l1); }
.gl-activity__legend i[data-level="2"] { background: var(--gl-l2); }
.gl-activity__legend i[data-level="3"] { background: var(--gl-l3); }
.gl-activity__legend i[data-level="4"] { background: var(--gl-l4); }

.gl-activity__legend span {
    margin: 0 0.25rem;
}

/* ---- tooltip --------------------------------------------------------- */

.gl-activity {
    position: relative;
}

.gl-activity__tip {
    position: absolute;
    z-index: 20;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    background: var(--gl-tip-bg);
    color: var(--gl-tip-fg);
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity 0.12s ease;
}

.gl-activity__tip.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .gl-activity__day,
    .gl-activity__tip {
        transition: none;
    }

    .gl-activity__day:hover {
        transform: none;
    }
}