/* ==========================================================================
   Statistics v2 - UI improvements pass

   Loaded only by front/statistics/v2.blade.php, which HomeController::STATISTICS_V2
   selects. The old page keeps its own markup, its own js and none of these rules, so
   setting that flag to false reverts the page cleanly.

   Palette, radii and shadow are the same as css/rewards/v2.css, css/investments/v2.css
   and css/opportunities/v2.css so the pages read as one product. Guests reach the page as
   well as members, so nothing here depends on which shell ($set_layout_path) drew it.
   ========================================================================== */

.st-v2 {
    --st-line: #e6e8ec;
    --st-line-soft: #f0f1f4;
    --st-bg: #f6f6f6; /* bg-white-smoke, which carries !important and so beats section.faq-section */
    --st-muted: #6b7280;
    --st-faint: #9aa1ad;
    --st-ink: #1a1a1a;
    --st-ink-2: #3f4550;
    --st-brand: #ffcc2a;
    --st-brand-dark: #e6b415;
    --st-radius: 10px;
    --st-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);

    /* section.faq-section around this is a background colour and nothing else - it
       carries no padding of its own - so the page would otherwise start against the
       header and end against the footer. The old page got its top gap from the mt-4
       on its title block and its bottom gap from the mb-4 on the button; this puts
       both on the one element instead. */
    padding: 26px 0 40px;
}

/* --------------------------------------------------------------------------
   Page heading
   -------------------------------------------------------------------------- */
.st-v2 .st-page-head {
    margin-bottom: 22px;
}

.st-v2 .st-page-title {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--st-ink);
}

.st-v2 .st-page-sub {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--st-muted);
}

/* --------------------------------------------------------------------------
   Sections

   No card around each chart. The old page put the charts straight on the page
   under their own Highcharts titles, and this keeps that: six boxes would draw
   six frames around six things a heading already separates. What the heading
   gains is a hairline under it, and room for a filter on the same line.
   -------------------------------------------------------------------------- */
.st-v2 .st-sec {
    margin-bottom: 30px;
}

/* min-height so a heading with a filter beside it and one without still sit on
   the same line when two sections are side by side */
.st-v2 .st-sec-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 42px;
    padding-bottom: 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--st-line);
}

.st-v2 .st-sec-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--st-ink);
}

.st-v2 .st-push {
    margin-left: auto;
}

.st-v2 .st-select {
    width: auto;
    height: 33px;
    min-height: auto;
    padding: 4px 10px;
    border: 1px solid var(--st-line);
    border-radius: 7px;
    background: #fff;
    font-size: 12.5px;
    color: var(--st-ink);
    cursor: pointer;
}

.st-v2 .st-select:focus {
    outline: 2px solid #ffe89a;
    outline-offset: -1px;
    border-color: var(--st-brand-dark);
    box-shadow: none;
}

.st-v2 .st-chart {
    padding: 10px 0 4px;
}

/* the last doughnut has a full-width row to itself, so it is centred in it
   rather than left in the corner of a very wide empty band */
.st-v2 .st-chart.is-centre {
    max-width: 660px;
    margin: 0 auto;
}

.st-v2 .st-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 26px;
}

/* The counter band between the first two charts is the old one - .invested_wrapper
   and .stats-card, styled by css/custom.css, which both shells load. Nothing for
   it here on purpose: the page keeps that section exactly as it was. */

/* --------------------------------------------------------------------------
   Circular charts, and the legend beside them

   Highcharts draws the pie and the two doughnuts as it always did; what
   changed is that its own legend is off and the list beside the chart is
   drawn from the same points instead - see js/modules/statistics_v2.js.
   Slice labels crowd a chart with leader lines, and a list can carry each
   slice's share of the total next to its name, which the old legend could not.
   -------------------------------------------------------------------------- */
.st-v2 .st-donut {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.st-v2 .st-donut-chart {
    flex: none;
    width: 260px;
    max-width: 100%;
}

/* investment status has a row to itself rather than half of one, so it is drawn at
   something close to the size the old page gave it - see stStatusHeight in the js */
.st-v2 .st-donut-chart.is-lg {
    width: 340px;
}

/* Only so the fade a hovered legend row puts on the other slices arrives smoothly - the
   opacity itself is set from the js, see stHighlightSlice. */
.st-v2 .st-donut-chart .highcharts-series-group * {
    transition: opacity .12s ease;
}

/* A chart with more slices than the chart is tall - company-wise already has eleven - used to
   run its list past the bottom of the chart beside it. The list scrolls instead, capped to the
   height of its own chart so the two stay one block.

   Two things say so without a word: a scrollbar that is always drawn rather than the overlay
   one the system hides until you touch it, and a shadow at whichever edge has more rows behind
   it. The shadow is four backgrounds - two the colour of the page that scroll with the rows and
   cover the two that do not - so it appears only when there is something to scroll to, and goes
   at the ends of the list. Hence --st-bg: it has to match what is behind the list, which is the
   grey the page sits on, the same under either shell. */
.st-v2 .st-legend {
    flex: 1;
    min-width: 190px;
    max-height: 260px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background:
        linear-gradient(var(--st-bg) 35%, rgba(246, 246, 246, 0)) top / 100% 22px no-repeat local,
        linear-gradient(rgba(246, 246, 246, 0), var(--st-bg) 65%) bottom / 100% 22px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0)) top / 100% 9px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0)) bottom / 100% 9px no-repeat scroll;
    scrollbar-width: thin;
    scrollbar-color: #cfd4dc transparent;
}

.st-v2 .st-legend::-webkit-scrollbar {
    width: 6px;
}

.st-v2 .st-legend::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #cfd4dc;
}

.st-v2 .st-legend::-webkit-scrollbar-track {
    background: transparent;
}

/* chrome draws a step arrow at each end of a scrollbar once it is styled at all */
.st-v2 .st-legend::-webkit-scrollbar-button {
    display: none;
}

/* investment status is drawn taller than the other two, so its list is given the same room */
.st-v2 .st-donut-chart.is-lg + .st-legend {
    max-height: 340px;
}

.st-v2 .st-legend li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    border-bottom: 1px solid var(--st-line-soft);
    font-size: 12.5px;
}

.st-v2 .st-legend li:last-child {
    border-bottom: 0;
}

.st-v2 .st-legend i {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 2px;
}

.st-v2 .st-legend-name {
    flex: 1;
    min-width: 0;
    color: var(--st-ink-2);
}

.st-v2 .st-legend-pct {
    font-weight: 700;
    white-space: nowrap;
    color: var(--st-ink);
}

/* A row switches its slice off and back on, as clicking Highcharts' own legend did. The
   switched-off row stays in the list, greyed, so it can be clicked again to bring the slice
   back - and its share reads as a dash, since it is no longer part of what adds to 100%. */
.st-v2 .st-legend-item {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.st-v2 .st-legend-item:hover .st-legend-name {
    color: var(--st-ink);
}

.st-v2 .st-legend-item:focus-visible {
    outline: 2px solid #ffe89a;
    outline-offset: 1px;
}

.st-v2 .st-legend-item.is-off {
    opacity: .45;
}

.st-v2 .st-legend-item.is-off .st-legend-name {
    text-decoration: line-through;
}

/* a filter can leave a chart with nothing in it, and an empty box beside a
   "No data available" chart reads as something having failed */
.st-v2 .st-legend-empty {
    padding: 5px 0;
    font-size: 12.5px;
    color: var(--st-faint);
}

/* --------------------------------------------------------------------------
   Closing call to action, where the old page had it
   -------------------------------------------------------------------------- */
.st-v2 .st-cta {
    display: flex;
    justify-content: center;
    padding: 6px 0 8px;
}

.st-v2 .st-btn {
    display: inline-block;
    padding: 10px 26px;
    border: 1px solid var(--st-brand-dark);
    border-radius: 8px;
    background: var(--st-brand);
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--st-ink);
    text-align: center;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease;
}

.st-v2 .st-btn:hover,
.st-v2 .st-btn:focus {
    background: var(--st-brand-dark);
    color: var(--st-ink);
    text-decoration: none;
}

.st-v2 .st-btn:focus {
    outline: 2px solid #ffe89a;
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .st-v2 .st-two {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 767px) {
    .st-v2 .st-donut {
        gap: 10px;
    }

    .st-v2 .st-donut-chart,
    .st-v2 .st-donut-chart.is-lg {
        width: 100%;
    }

    /* stacked under its chart rather than beside it, a list has the page to run down, and a
       small scrolling box inside a scrolling page is worse than a long list */
    .st-v2 .st-legend,
    .st-v2 .st-donut-chart.is-lg + .st-legend {
        max-height: none;
    }
}