/* =========================================================
   SINGLE CHART PAGE
   ========================================================= */

.single-chart-page {
    min-height: calc(100vh - 160px);
    background: radial-gradient( circle at top left, rgba(103, 189, 80, .12), transparent 28% ), linear-gradient( 180deg, #f7faf9 0%, #eef4f8 100% );
    padding: 2rem 0 4rem;
}


/* =========================================================
   HERO
   ========================================================= */

.chart-focus-hero {
    background: radial-gradient( circle at top right, rgba(103, 189, 80, .28), transparent 32% ), linear-gradient( 135deg, #022166, #0a3b8f );
    border-radius: 30px;
    padding: 2rem;
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: end;
    box-shadow: 0 24px 55px rgba(2, 33, 102, .20);
    margin-bottom: 2rem;
}

.chart-back-link {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    transition: color .2s ease, transform .2s ease;
}

    .chart-back-link:hover {
        color: #fff;
        transform: translateX(-3px);
    }

.chart-focus-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.chart-focus-hero h1 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 900;
    max-width: 900px;
    margin-bottom: .75rem;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.chart-focus-hero p {
    max-width: 780px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.8;
}


/* =========================================================
   HERO META
   ========================================================= */

.chart-focus-meta {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 24px;
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .chart-focus-meta > div {
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

        .chart-focus-meta > div:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .chart-focus-meta small {
        display: block;
        color: rgba(255, 255, 255, .65);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: .25rem;
    }

    .chart-focus-meta strong {
        display: block;
        font-size: 1rem;
        overflow-wrap: anywhere;
    }


/* =========================================================
   CHART CARD
   ========================================================= */

.single-chart-shell {
    width: 100%;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(2, 33, 102, .08);
    box-shadow: 0 18px 45px rgba(2, 33, 102, .08);
}


/* =========================================================
   CHART TOOLBAR
   ========================================================= */

.single-chart-toolbar {
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid rgba(2, 33, 102, .08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: linear-gradient( 180deg, #ffffff, #fbfdff );
}

    .single-chart-toolbar h4 {
        color: #022166;
        font-weight: 900;
        margin-bottom: .25rem;
    }

    .single-chart-toolbar span {
        color: #6c757d;
        font-weight: 600;
    }


/* =========================================================
   CHART BODY
   ========================================================= */

.single-chart-body {
    width: 100%;
    padding: 1.5rem;
    min-width: 0;
}


/* =========================================================
   SCROLL HINT
   ========================================================= */

.chart-scroll-hint {
    display: none;
    align-items: center;
    gap: .5rem;
    margin-bottom: .8rem;
    padding: .65rem .85rem;
    border-radius: 10px;
    background: rgba(2, 33, 102, .05);
    color: #667085;
    font-size: .78rem;
    font-weight: 700;
}

    .chart-scroll-hint i {
        color: #022166;
        font-size: 1rem;
    }


/* =========================================================
   CHART SCROLL VIEWPORT

   Desktop:
       chart fits normally.

   Tablet / Mobile:
       chart remains almost same height,
       but becomes wider so only part of it is visible.
   ========================================================= */

.single-chart-scroll {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #aeb9c5 #eef2f6;
    overscroll-behavior-x: contain;
    padding-bottom: .5rem;
}


    /* =========================================================
   CUSTOM HORIZONTAL SCROLLBAR
   ========================================================= */

    .single-chart-scroll::-webkit-scrollbar {
        height: 11px;
    }

    .single-chart-scroll::-webkit-scrollbar-track {
        background: #eef2f6;
        border-radius: 999px;
    }

    .single-chart-scroll::-webkit-scrollbar-thumb {
        background: #aeb9c5;
        border-radius: 999px;
        border: 2px solid #eef2f6;
    }

        .single-chart-scroll::-webkit-scrollbar-thumb:hover {
            background: #8998a8;
        }


/* =========================================================
   DESKTOP CHART

   Height remains the reference height.
   ========================================================= */

.single-chart-container {
    position: relative;
    width: 100%;
    min-width: 100%;
    height: 620px;
    min-height: 620px;
}


/* =========================================================
   LARGE DESKTOP
   >= 1200px

   Full chart is shown normally.
   20 / 30 categories can use the available screen width.
   ========================================================= */

@media (min-width: 1200px) {

    .single-chart-scroll {
        overflow-x: visible;
    }

    .single-chart-container {
        width: 100%;
        min-width: 100%;
        height: 620px;
        min-height: 620px;
    }
}


/* =========================================================
   MEDIUM SCREEN / TABLET LANDSCAPE
   992px - 1199px

   Roughly 6-7 categories visible at a time.
   Remaining categories scroll horizontally.
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .single-chart-page {
        padding-top: 1.5rem;
    }

    .chart-focus-hero {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 1.4rem;
        padding: 1.6rem;
    }

    .chart-scroll-hint {
        display: flex;
    }

    .single-chart-scroll {
        overflow-x: auto;
        overflow-y: hidden;
    }

    /*
     * Keep height almost identical to desktop.
     *
     * Width is deliberately large so only
     * around 6-7 data points are visible at once.
     */
    .single-chart-container {
        width: 1800px;
        min-width: 1800px;
        height: 610px;
        min-height: 610px;
    }
}


/* =========================================================
   TABLET PORTRAIT
   576px - 991px

   Roughly 5-7 categories visible.
   ========================================================= */

@media (min-width: 576px) and (max-width: 991.98px) {

    .single-chart-page {
        padding: 1rem 0 2.5rem;
    }

        .single-chart-page .container-fluid {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }


    /* Hero */

    .chart-focus-hero {
        grid-template-columns: 1fr;
        padding: 1.4rem;
        border-radius: 22px;
        gap: 1.4rem;
        margin-bottom: 1.25rem;
    }

        .chart-focus-hero h1 {
            font-size: clamp( 1.75rem, 6vw, 2.45rem );
        }

        .chart-focus-hero p {
            font-size: .95rem;
            line-height: 1.65;
        }


    /* Meta */

    .chart-focus-meta {
        grid-template-columns: repeat( 3, minmax(0, 1fr) );
        padding: 1rem;
    }

        .chart-focus-meta > div {
            padding-bottom: 0;
            padding-right: 1rem;
            border-bottom: 0;
            border-right: 1px solid rgba(255, 255, 255, .15);
        }

            .chart-focus-meta > div:last-child {
                border-right: 0;
                padding-right: 0;
            }


    /* Chart */

    .single-chart-shell {
        border-radius: 22px;
    }

    .single-chart-toolbar {
        padding: 1.1rem 1.2rem;
        flex-direction: column;
        align-items: flex-start;
    }

        .single-chart-toolbar .d-flex {
            width: 100%;
        }

        .single-chart-toolbar .btn {
            flex: 1 1 auto;
        }

    .single-chart-body {
        padding: 1rem;
    }

    .chart-scroll-hint {
        display: flex;
    }

    .single-chart-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /*
     * Height remains almost unchanged.
     *
     * Large width means the tablet only
     * exposes several categories at once.
     */
    .single-chart-container {
        width: 1600px;
        min-width: 1600px;
        height: 600px;
        min-height: 600px;
    }
}


/* =========================================================
   MOBILE
   <= 575px

   Approximately 5 categories visible at a time.
   Remaining categories are horizontally scrollable.
   ========================================================= */

@media (max-width: 575.98px) {

    .single-chart-page {
        padding: .75rem 0 2rem;
    }

        .single-chart-page .container-fluid {
            padding-left: .75rem !important;
            padding-right: .75rem !important;
        }


    /* Hero */

    .chart-focus-hero {
        padding: 1.15rem;
        border-radius: 18px;
        gap: 1.1rem;
    }

    .chart-back-link {
        font-size: .85rem;
    }

    .chart-focus-badge {
        font-size: .72rem;
        padding: .4rem .7rem;
    }

    .chart-focus-hero h1 {
        font-size: 1.65rem;
        line-height: 1.2;
    }

    .chart-focus-hero p {
        font-size: .88rem;
        line-height: 1.6;
    }


    /* Meta */

    .chart-focus-meta {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

        .chart-focus-meta > div {
            padding-right: 0;
            padding-bottom: .75rem;
            border-right: 0;
            border-bottom: 1px solid rgba(255, 255, 255, .15);
        }

            .chart-focus-meta > div:last-child {
                border-bottom: 0;
                padding-bottom: 0;
            }


    /* Chart card */

    .single-chart-shell {
        border-radius: 18px;
    }

    .single-chart-toolbar {
        padding: 1rem;
    }

        .single-chart-toolbar h4 {
            font-size: 1rem;
            line-height: 1.35;
        }

        .single-chart-toolbar span {
            font-size: .78rem;
        }


        /* Toolbar buttons */

        .single-chart-toolbar .d-flex {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: .5rem !important;
        }

        .single-chart-toolbar .btn {
            width: 100%;
            font-size: .8rem;
            padding: .55rem .7rem;
        }


    /* Chart body */

    .single-chart-body {
        padding: .75rem;
    }


    /* Scroll hint */

    .chart-scroll-hint {
        display: flex;
        font-size: .72rem;
        line-height: 1.4;
        margin-bottom: .6rem;
        padding: .55rem .65rem;
    }


    /* Scroll area */

    .single-chart-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }


    /*
     * IMPORTANT
     *
     * Height remains close to desktop.
     *
     * Chart width is much larger than the phone.
     * This makes about 5 categories visible
     * depending on phone width.
     */
    .single-chart-container {
        width: 1400px;
        min-width: 1400px;
        height: 580px;
        min-height: 580px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

    .single-chart-container {
        width: 1300px;
        min-width: 1300px;
        height: 560px;
        min-height: 560px;
    }

    .single-chart-toolbar .d-flex {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .dbn-header,
    .footer,
    .chart-back-link,
    .single-chart-toolbar .btn,
    .chart-scroll-hint {
        display: none !important;
    }

    .single-chart-page {
        background: #fff;
        padding: 0;
    }

    .chart-focus-hero,
    .single-chart-shell {
        box-shadow: none;
    }

    .single-chart-scroll {
        overflow: visible !important;
    }

    .single-chart-container {
        width: 100% !important;
        min-width: 100% !important;
        height: 620px !important;
        min-height: 620px !important;
    }
}