/* --- ATHLETEMANAGEMENT PLOTLY CHART OVERRIDES --- */

/* 1. Global Font & Text Rendering */
.js-plotly-plot .plotly text {
    /* Force brand font to match the theme */
    font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
    /* Softer text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Axis Labels (Ticks) */
.js-plotly-plot .xtick text,
.js-plotly-plot .ytick text {
    fill: var(--color-accent, #5a564d) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* 3. Axis Titles (if present) */
.js-plotly-plot .g-xtitle text,
.js-plotly-plot .g-ytitle text {
    fill: var(--color-ink, #14130f) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* 4. Grid Lines - Make softer */
.js-plotly-plot .gridlayer path {
    stroke: var(--color-paper-3, #e0dacb) !important;
    stroke-width: 1px !important;
}

/* 5. Zero Line */
.js-plotly-plot .zerolinelayer path {
    stroke: var(--color-rule, #c9c3b3) !important;
    stroke-width: 1px !important;
}

/* 6. Hover Labels (Tooltip Design) */
/* Tooltip background */
.js-plotly-plot .hoverlayer path {
    fill: var(--color-paper-2, #ebe7dd) !important;
    stroke: var(--color-rule, #c9c3b3) !important;
    stroke-width: 1px !important;
    fill-opacity: 0.95 !important;
}

/* Text inside tooltip */
.js-plotly-plot .hoverlayer text {
    fill: var(--color-ink, #14130f) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* The line indicating hover position (Spike Line) */
.js-plotly-plot .spikeline {
    stroke: var(--color-rust, #a44a3f) !important;
    stroke-dasharray: 2px !important;
    stroke-width: 1px !important;
}

/* 7. Bar Hover Effect (Transitions) */
.js-plotly-plot .barlayer path {
    transition: opacity 0.2s ease;
}

.js-plotly-plot .barlayer path:hover {
    opacity: 0.8 !important;
}

@keyframes amFadeInChart {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Chart skeleton / loading state ───────────────────────────────────── */

/* Container while loading */
.athlete-chart-container.athlete-chart-loading {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border-radius: 2px;
    background: transparent;
    width: 100%;
}

/* Skeleton wrapper fills the container */
.athlete-chart-skeleton {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: flex;
    align-items: flex-end;
    padding: 20px 10px 30px;
    box-sizing: border-box;
}

/* Individual skeleton bars */
.athlete-skeleton-bar {
    position: absolute;
    bottom: 30px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg,
    var(--color-paper-3, #e0dacb) 25%,
    var(--color-paper-2, #ebe7dd) 50%,
    var(--color-paper-3, #e0dacb) 75%);
    background-size: 200% 100%;
    animation: amSkeletonShimmer 1.4s ease-in-out infinite;
}

/* Stagger shimmer between bars for a wave effect */
.athlete-skeleton-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.athlete-skeleton-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.athlete-skeleton-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.athlete-skeleton-bar:nth-child(5) {
    animation-delay: 0.4s;
}

.athlete-skeleton-bar:nth-child(6) {
    animation-delay: 0.5s;
}

@keyframes amSkeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Fade-in for the rendered Plotly chart (replaces skeleton) */
.js-plotly-plot {
    animation: amFadeInChart 0.4s ease-out forwards;
}

/* Error message styling */
.athlete-chart-error {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 80px;
    color: var(--color-accent, #5a564d);
    font-size: 13px;
    font-style: italic;
    font-family: var(--font-sans, "Inter Tight", sans-serif);
}

/* ── Horizontal bar skeleton (avg_dept_time) ───────────────────────────── */
.athlete-chart-skeleton--hbar {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 15px 10px 25px 50px; /* left pad = simulated y-axis label space */
    box-sizing: border-box;
}

.athlete-skeleton-hbar {
    position: absolute;
    left: 50px;    /* align with padding offset */
    height: 10%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(
            90deg,
            var(--color-paper-3, #e0dacb) 25%,
            var(--color-paper-2, #ebe7dd) 50%,
            var(--color-paper-3, #e0dacb) 75%
    );
    background-size: 200% 100%;
    animation: amSkeletonShimmer 1.4s ease-in-out infinite;
}

.athlete-skeleton-hbar:nth-child(2) { animation-delay: 0.1s; }
.athlete-skeleton-hbar:nth-child(3) { animation-delay: 0.2s; }
.athlete-skeleton-hbar:nth-child(4) { animation-delay: 0.3s; }
.athlete-skeleton-hbar:nth-child(5) { animation-delay: 0.4s; }
.athlete-skeleton-hbar:nth-child(6) { animation-delay: 0.5s; }

/* ── Scatter / line skeleton (daily_completed_cases) ───────────────────── */
.athlete-chart-skeleton--scatter {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 15px 10px 30px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Faint baseline / x-axis line at the bottom of the scatter skeleton */
.athlete-skeleton-line {
    position: absolute;
    bottom: 30px;
    left: 10px;
    right: 10px;
    height: 1px;
    background: var(--color-rule, #c9c3b3);
}

/* Scatter dots */
.athlete-skeleton-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    background: linear-gradient(
            90deg,
            var(--color-paper-3, #e0dacb) 25%,
            var(--color-paper-2, #ebe7dd) 50%,
            var(--color-paper-3, #e0dacb) 75%
    );
    background-size: 400% 100%;
    animation: amSkeletonShimmer 1.4s ease-in-out infinite;
}

.athlete-skeleton-dot:nth-child(2) { animation-delay: 0.08s; }
.athlete-skeleton-dot:nth-child(3) { animation-delay: 0.16s; }
.athlete-skeleton-dot:nth-child(4) { animation-delay: 0.24s; }
.athlete-skeleton-dot:nth-child(5) { animation-delay: 0.32s; }
.athlete-skeleton-dot:nth-child(6) { animation-delay: 0.40s; }
.athlete-skeleton-dot:nth-child(7) { animation-delay: 0.48s; }
.athlete-skeleton-dot:nth-child(8) { animation-delay: 0.56s; }
.athlete-skeleton-dot:nth-child(9) { animation-delay: 0.64s; }