/* Absolute YouTube Studio Theme Alignment */
    .studio-bg { background-color: #f9f9f9; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
    .studio-card { background: #ffffff; border: 1px solid #e3e3e3; border-radius: 12px; padding: 24px; margin-bottom: 10px; }
    .studio-title { font-size: 24px; font-weight: 700; color: #0d0d0d; letter-spacing: -0.2px; }
    
    /* Interactive Pills */
    .studio-pill { border: none; background: #f2f2f2; color: #0f0f0f; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; transition: all 0.15s; margin-right: 6px; }
    .studio-pill:hover { background: #e5e5e5; }
    .studio-pill.active { background: #0f0f0f; color: #ffffff; }



    /* Performance Multi-Tabs Layout */
    .studio-tabs-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #e3e3e3; border-radius: 8px; background: #ffffff; overflow: hidden; }
    .studio-tab { border: none; background: transparent; padding: 16px; text-align: left; border-right: 1px solid #e3e3e3; border-bottom: 4px solid transparent; transition: all 0.2s; }
    .studio-tab:last-child { border-right: none; }
    .studio-tab:hover { background-color: #f6f6f6; }
    .studio-tab.active { border-bottom-color: #47b2e4; background-color: #ffffff; } /* Matching the purple line trend from your image */
    
    .tab-label { font-size: 12px; color: #606060; font-weight: 500; margin-bottom: 4px; display: block; }
    .tab-value { font-size: 22px; font-weight: 700; color: #0d0d0d; line-height: 1.2; }
    .tab-subtext { font-size: 11px; color: #606060; margin-top: 2px; }

    /* Custom Row Analytics Panel */
    .bar-track { height: 8px; background-color: #eeeeee; border-radius: 4px; overflow: hidden; display: inline-block; width: 100px; }
    .bar-fill { height: 100%; background-color: #47b2e4; border-radius: 4px; }

    /* Stat Card Top Tile */
    .stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; }
    .stat-tile .stat-tile-value { font-size: 20px; font-weight: 700; color: #0d0d0d; line-height: 1.2; }
    .stat-tile .stat-tile-label { font-size: 12px; color: #606060; font-weight: 500; }
    .stat-tile .stat-tile-trend { font-size: 11px; font-weight: 600; }

    /* Donut Chart SVG Centering */
    .donut-wrap { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
    .donut-wrap.is-stack { flex-direction: column; gap: 8px; }
    .donut-center-label { text-align: left; }
    .donut-center-label .donut-h { font-size: 26px; font-weight: 700; color: #0d0d0d; line-height: 1; }
    .donut-center-label .donut-s { font-size: 12px; color: #606060; margin-top: 4px; display: block; }

    /* Working Patterns breakdown rows use the shared `.card-rowitem` format
       so this card matches the visual language of Staff Groups / Locations /
       Contract Types. The donut above has its own SVG styling. */

    /* Legend dots */
    .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }

    /* Tiny pill filter row used inside each card */
    .pill-row .studio-pill { margin-right: 6px; margin-bottom: 6px; padding: 5px 10px; font-size: 12px; }
    .pill-row .studio-pill.active { background: #0f0f0f; color: #ffffff; }

    /* Sticky trend filter card (slim: just tabs + date range) */
    .trend-filter-sticky {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 14px 24px;
    }
    @media (max-width: 767.98px) {
        .trend-filter-sticky {
            top: 0;
        }
    }

    /* Anchor scroll offset for card headings so the sticky card
       doesn't hide them when navigated from the footer. */
    [id^="heading"] { scroll-margin-top: 80px; }

    /* Two-tone bar with secondary bar (used in combined metrics) */
    .dual-bar-track { height: 6px; background-color: #eeeeee; border-radius: 4px; overflow: hidden; width: 120px; display: inline-block; }
    .dual-bar-fill { display: flex; height: 100%; }

    /* Subtle entity grouping card */
    .card-rowitem { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
    .card-rowitem:last-child { border-bottom: none; }

    /* 3-column Pay Bands table (Band | Percentage | Vacancies) */
    .pay-band-table { border-top: 1px solid #f0f0f0; padding-top: 4px; }
    .pay-band-table > .pay-band-header,
    .pay-band-table > .pay-band-row {
        display: grid;
        grid-template-columns: 1fr 80px 80px;
        column-gap: 16px;
        align-items: center;
        padding: 10px 0;
    }
    .pay-band-table > .pay-band-header {
        font-size: 11px;
        color: #606060;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #e3e3e3;
        padding: 6px 0 8px;
    }
    .pay-band-table > .pay-band-row {
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
    }
    .pay-band-table > .pay-band-row:last-child { border-bottom: none; }
    .pay-band-table .pay-band-cell-percent { text-align: end; color: #0d0d0d; font-weight: 600; }
    .pay-band-table .pay-band-cell-vacancies { text-align: end; color: #0d0d0d; font-weight: 700; }

    /* Empty state placeholder. Renders inside every AJAX-driven card body
       (Pay Bands, Staff Groups, Working Patterns, Contract Types, Locations)
       until the AJAX endpoint replaces it with real rows. Matches the muted
       YouTube Studio "no rows" tone so the visual contrast between loading
       and loaded states stays gentle. */
    .empty-state {
        padding: 32px 12px;
        text-align: center;
        color: #909090;
        font-size: 13px;
        font-weight: 500;
        /* Min-height + flex centering so when the donut SVG is hidden on
           the Working Patterns / Locations cards, the empty-state message
           occupies roughly the same vertical footprint (160px) where the
           donut would have rendered, instead of collapsing to a single line
           at the top of the breakdown container. */
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Color tokens */
    .c-purple-deep { background-color: #47b2e4; }
    .c-purple { background-color: #47b2e4; }

    /* Date range dropdown (YouTube Studio style) */
    /* Trigger button — clean pill, subtle border, opens a small floating menu. */
    .trend-range-btn {
        background: transparent;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 500;
        color: #0f0f0f;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .trend-range-btn:hover { background: #f7f7f7; }
    .trend-range-btn:focus-visible {
        outline: 2px solid #47b2e4;
        outline-offset: 2px;
    }
    .trend-range-btn-chevron {
        font-size: 12px;
        color: #606060;
        transition: transform 0.15s ease;
    }
    .trend-range-btn[aria-expanded="true"] .trend-range-btn-chevron {
        transform: rotate(180deg);
    }

    /* Floating menu */
    .trend-range-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 220px;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
        padding: 6px 0;
        z-index: 50;
        animation: trendRangeOpen 0.12s ease-out;
    }
    /* Drop-up variant for bottom-anchored trigger (mobile footer) */
    .trend-range-dropdown-up {
        top: auto;
        bottom: calc(100% + 6px);
        animation-name: trendRangeOpenUp;
    }
    @keyframes trendRangeOpenUp {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes trendRangeOpen {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .trend-range-dropdown-header {
        padding: 8px 16px 4px;
        font-size: 11px;
        font-weight: 600;
        color: #606060;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    /* Menu rows */
    .trend-range-option {
        background: transparent;
        border: none;
        width: 100%;
        text-align: left;
        padding: 8px 16px;
        font-size: 14px;
        color: #0d0d0d;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: background 0.12s ease;
    }
    .trend-range-option:hover { background: #f6f6f6; }
    .trend-range-option:focus-visible {
        background: #e0f4ff;
        outline: none;
    }
    .trend-range-option-check {
        color: #0f0f0f;
        font-size: 16px;
        visibility: hidden;
        line-height: 1;
        width: 20px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .trend-range-option.active .trend-range-option-check {
        visibility: visible;
    }
    .trend-range-option > span { flex: 1; display: block; }
    .c-purple-soft { background-color: #bfa6ff; }
    .c-blue { background-color: #3a8dde; }
    .c-teal { background-color: #2bb6a3; }
    .c-orange { background-color: #f4801a; }
    .c-pink { background-color: #d6536f; }
    .c-green { background-color: #2ea043; }
    .c-amber-light { background-color: #fbcd6c; }
    .c-amber { background-color: #f5b800; }
    .c-amber-deep { background-color: #e09511; }
    .c-yellow { background-color: #ffd83d; }
    .c-cyan { background-color: #00bcd4; }
    .c-indigo { background-color: #5b6bcf; }
    .c-violet { background-color: #a855f7; }
    .c-red { background-color: #d24a4a; }
    .c-coral { background-color: #ff8a65; }
    .c-mint { background-color: #7ec7a8; }
    .c-emerald { background-color: #0e8a5f; }
    .c-gray { background-color: #9aa0a6; }

    /* Separate metric stat cards (replaces studio-tabs-grid) */
    .metric-card {
        background: #ffffff;
        border: 1px solid #e3e3e3;
        border-radius: 12px;
        padding: 20px 24px;
        cursor: pointer;
        /* Inactive default: soft purple-tinted bottom border (#f0eaff matches the .mobile-nav-btn.active bg already in this stylesheet) so all 3 cards subtly belong to the same brand family as the active card. Hover and .active escalate the purple intensity. */
        border-bottom: 4px solid #e0f4ff;
        transition: border-color 0.15s ease, background 0.15s ease;
    }
    .metric-card:hover {
        background: #fafafa;
        border-bottom-color: #8fd4f0;
    }
    .metric-card.active {
        border-bottom-color: #47b2e4;
        background: #ffffff;
    }
    .metric-card .tab-label { font-size: 12px; color: #606060; font-weight: 500; margin-bottom: 4px; display: block; }
    .metric-card .tab-value { font-size: 22px; font-weight: 700; color: #0d0d0d; line-height: 1.2; }
    .metric-card .tab-subtext { font-size: 11px; color: #606060; margin-top: 2px; }
    .mini-chart-wrap { margin-top: 12px; height: 60px; }

    /* Metric carousel arrows + dots (mobile only) */
    .carousel-arrow {
        position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
        width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e3e3e3;
        background: #ffffff; color: #606060; display: flex; align-items: center;
        justify-content: center; cursor: pointer; transition: all 0.15s;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .carousel-arrow:hover { background: #f6f6f6; color: #0d0d0d; }
    .carousel-arrow-prev { left: 4px; }
    .carousel-arrow-next { right: 4px; }
    .carousel-dots { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 0 16px; }
    .carousel-dot {
        width: 8px; height: 8px; border-radius: 50%; background: #d0d0d0;
        transition: all 0.25s ease; cursor: pointer;
    }
    .carousel-dot.active { background: #47b2e4; width: 24px; border-radius: 4px; }

    /* Mobile carousel: horizontal snap-scroll for metric cards */
    @media (max-width: 767.98px) {
        .metric-carousel {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            scroll-snap-type: x mandatory !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 12px !important;
            margin: 0 !important;
            scrollbar-width: none;
        }
        .metric-carousel::-webkit-scrollbar { display: none; }
        .metric-carousel > .metric-carousel-cell {
            flex: 0 0 85vw !important;
            scroll-snap-align: start !important;
            padding: 0 !important;
            max-width: none !important;
        }
        .metric-carousel .metric-card {
            height: 100%;
        }
        .metric-carousel .mini-chart-wrap {
            margin-top: 8px;
            height: 50px;
        }
    }

    /* ============================================================
       Mobile Quick-Jump Nav (bottom of #mobileResultBar).
       Two rows of 3 cells — Vacancies, Pay Bands, Staff Groups
       on the first row, Patterns, Contracts, Locations on the second.
       ============================================================ */
    #mobileBarNav {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }
    .mobile-nav-cell {
        flex: 0 0 33.333%;
        min-width: 0;
    }
    /* Base styling for every cell (both the date-chip button and
       the anchor jump links share this layout). */
    .mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 10px;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: #606060;
        font-size: 10px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        line-height: 1.1;
        cursor: pointer;
        transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    .mobile-nav-btn i {
        font-size: 18px;
        line-height: 1;
        display: block;
    }
    .mobile-nav-btn:hover,
    .mobile-nav-btn:focus-visible {
        color: #0d0d0d;
        background: #f6f6f6;
        outline: none;
    }
    .mobile-nav-btn:active {
        transform: scale(0.94);
    }
    /* Active state: switched on by the scroll-spy in script.js as
       the user scrolls through the analytics cards. The purple-deep +
       soft background mirrors the .studio-tab.active palette used
       on the desktop trend panel, keeping the design language
       consistent across viewports. */
    .mobile-nav-btn.active {
        color: #47b2e4;
        background: #e0f4ff;
    }

    /* ============================================================
       Section 1 — Full-width date chip.
       Replaces the prior Net Annual / Breakdown row in the user's
       latest redesign. Tall, full-width pill that mirrors the live
       range selected in the trend dropdown (js:sync Chip update).
       ============================================================ */
    .mobile-date-chip {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 10px 12px;
        background: #f6f6f6;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        color: #0d0d0d;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        gap: 8px;
        transition: background 0.15s ease, border-color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-date-chip:hover {
        background: #ededed;
        border-color: #d0d0d0;
    }
    .mobile-date-chip:focus-visible {
        outline: 2px solid #47b2e4;
        outline-offset: 2px;
    }
    .mobile-date-chip .chip-arrow {
        margin-left: auto;
        color: #606060;
        font-size: 12px;
    }
    .mobile-date-chip i.bi-calendar3 {
        color: #47b2e4;
        font-size: 16px;
    }

    /* ============================================================
       Trend-panel swipe-forward chevron.
       Top-right of the trend chart canvas. Currently a static
       affordance indicating the user can navigate forward / swipe
       right on the timeline. Wire to a future "next 28 days" or
       live-scrub handler in a later iteration.
       ============================================================ */
    .trend-panel-next-arrow {
        position: absolute;
        top: 8px;
        right: 12px;
        width: 32px;
        height: 32px;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        background: #ffffff;
        color: #606060;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
        z-index: 2;
    }
    .trend-panel-next-arrow:hover {
        background: #f6f6f6;
        color: #0d0d0d;
        border-color: #d0d0d0;
    }
    .trend-panel-next-arrow:focus-visible {
        outline: 2px solid #47b2e4;
        outline-offset: 2px;
    }

    /* Mobile bottom bar: keep page content above the fixed bar so the
        last card's "See more" button is not clipped, and reserve room
        for the iOS home indicator inside the bar itself. */
    @media (max-width: 767.98px) {
        body { padding-bottom: 110px; }

        /* Bottom sheet anchored above the trigger button */
        .trend-range-dropdown-up {
            position: fixed !important;
            bottom: 175px !important;
            left: 12px !important;
            right: 12px !important;
            top: auto !important;
            transform: none !important;
            min-width: auto !important;
            width: auto !important;
            max-width: none !important;
            box-shadow: 0 -2px 20px rgba(0,0,0,0.1) !important;
            border-radius: 14px !important;
            padding: 6px 0 10px !important;
            z-index: 1060 !important;
            border: none !important;
            animation: sheetUp 0.25s ease-out !important;
        }
        /* Drag handle */
        .trend-range-dropdown-up .sheet-handle {
            display: block;
            width: 32px;
            height: 4px;
            background: #d0d0d0;
            border-radius: 2px;
            margin: 0 auto 6px;
        }
        @keyframes sheetUp {
            from { transform: translateY(100%); opacity: 0; }
            to   { transform: translateY(0); opacity: 1; }
        }
        .trend-range-dropdown-up .trend-range-dropdown-header {
            padding: 10px 16px 6px 20px;
            font-size: 12px;
        }
        .trend-range-dropdown-up .trend-range-option {
            padding: 14px 20px;
            font-size: 16px;
        }
        .trend-range-dropdown-up .close-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 22px;
            color: #606060;
            background: none;
            border: none;
            cursor: pointer;
            margin: -6px -4px;
        }
        .trend-range-dropdown-up .close-btn:hover {
            background: #f6f6f6;
        }
    }
    #mobileResultBar {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px));
    }

    /* Mobile metric filter pills in bottom bar */
    .mobile-filter-pill {
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 6px;
        border: none;
        background: #f2f2f2;
        color: #0f0f0f;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .mobile-filter-pill:hover { background: #e5e5e5; }
    .mobile-filter-pill.active { background: #0f0f0f; color: #ffffff; }
    .mobile-up-arrow {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #e3e3e3;
        background: #ffffff;
        color: #606060;
        cursor: pointer;
        transition: all 0.15s;
        flex-shrink: 0;
    }
    .mobile-up-arrow:hover {
        background: #f6f6f6;
        color: #0d0d0d;
        border-color: #d0d0d0;
    }