/* =====================================================================================
   chart-tooltips.css: the hover boxes of the charts (RadarTooltip, PickTooltip and the plain ApexCharts tooltip).
   Loaded on every page (App.razor), so the classic page and /app look the same here.
   Only the hover box changes; chart data and colors are untouched.
   ===================================================================================== */

/* The ApexCharts box around our own tooltip: no white/grey frame, our card draws itself */
.apexcharts-tooltip:has(.ptt) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ptt {
    min-width: 190px;
    max-width: 280px;
    padding: 10px 12px 9px;
    border-radius: 10px;
    background: rgba(20, 15, 38, 0.97);
    border: 1px solid #4a3f7a;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(166, 120, 255, .12), 0 0 18px rgba(166, 120, 255, .18);
    color: #e9e5fb;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
}
.ptt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ptt-sub { color: #a49cc4; font-size: 11.5px; }
.ptt-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; padding-top: 6px; border-top: 1px dashed #3a3066; color: #a49cc4; font-size: 11px; }

/* radar */
.ptt-cat {
    font-weight: 800; font-size: 13px; letter-spacing: .5px; color: #0c0818;
    background: linear-gradient(90deg, #2ee59d, #62f0bd); padding: 1px 8px; border-radius: 999px;
}
.ptt-big { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.ptt-unit { font-size: 12px; font-weight: 600; color: #a49cc4; letter-spacing: 0; }
.ptt-bar { height: 5px; border-radius: 3px; background: #2d2550; margin: 6px 0 2px; overflow: hidden; }
.ptt-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #a678ff, #3fb6ff 60%, #2ee59d); }
.ptt-raw { margin-top: 6px; font-size: 14px; font-weight: 700; color: #3fb6ff; }

/* heat map pick */
.ptt-chip { font-weight: 800; font-size: 11.5px; color: #0c0818; padding: 1px 7px; border-radius: 6px; min-width: 22px; text-align: center; }
.ptt-player { font-weight: 800; font-size: 14.5px; color: #fff; }
.ptt-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.ptt-grid span { color: #a49cc4; }
.ptt-grid b { color: #fff; font-weight: 700; }
.ptt-money { color: #2ee59d !important; }
.ptt-miss { opacity: .92; border-style: dashed; }
.ptt-miss .ptt-player { color: #cfc8ec; }

/* plain ApexCharts tooltips (bars, lines, areas): readable dark box instead of the light default */
.apexcharts-tooltip.apexcharts-theme-light:not(:has(.ptt)) {
    background: rgba(20, 15, 38, 0.96) !important;
    border: 1px solid #4a3f7a !important;
    color: #e9e5fb !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important;
}
.apexcharts-tooltip.apexcharts-theme-light:not(:has(.ptt)) .apexcharts-tooltip-title {
    background: rgba(166, 120, 255, .16) !important;
    border-bottom: 1px solid #3a3066 !important;
    color: #fff !important;
    font-weight: 700;
}