/* No top margin here anymore -- spacing/separation from whatever
       embeds this view is handled by the parent (e.g. .scopus-subsection
       in metrics.php), so this widget doesn't add its own on top of it. */
    .scopus-overview {
        margin-top: 0;
    }

    .kpi-strip {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
        margin-bottom: 12px;
    }

    .kpi-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border: 1px solid #e9edf2;
        border-radius: 12px;
        padding: 16px 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .kpi-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 17px;
    }

    .kpi-icon-blue {
        background: linear-gradient(135deg, #64B5F6, #42A5F5);
    }

    .kpi-icon-purple {
        background: linear-gradient(135deg, #BA68C8, #AB47BC);
    }

    .kpi-icon-green {
        background: linear-gradient(135deg, #81C784, #66BB6A);
    }

    .kpi-icon-orange {
        background: linear-gradient(135deg, #FFB74D, #FB8C00);
    }

    .kpi-icon-teal {
        background: linear-gradient(135deg, #4DD0E1, #26C6DA);
    }

    .kpi-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .kpi-body strong {
        font-size: 19px;
        font-weight: 700;
        color: #222;
        line-height: 1.2;
    }

    .kpi-body span {
        font-size: 12px;
        color: #90a4ae;
    }

    .overview-subline {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #78909c;
        margin-bottom: 18px;
        padding: 0 2px;
    }

    .overview-subline i {
        color: #42A5F5;
    }

    .overview-panels-row {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        width: 100%;
        box-sizing: border-box;
    }

    .overview-panel-col {
        flex: 1 1 320px;
        display: flex;
        min-width: 0;
    }

    .overview-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #fff;
        border: 1px solid #e9edf2;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
        overflow: hidden;
    }

    .metric-list-fill,
    .range-metric-list-fill {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .panel-title {
        padding: 18px 22px;
        font-size: 17px;
        font-weight: 600;
        color: #2b2f36;
        background: #fafbfc;
        border-bottom: 1px solid #edf1f5;
    }

    .panel-title i {
        margin-right: 10px;
        color: #4e73df;
    }

    .metric-list {
        padding: 10px 0;
    }

    .metric-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 22px;
        border-bottom: 1px solid #f2f4f7;
    }

    .metric-item:last-child {
        border-bottom: none;
    }

    .metric-item-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 9px;
        background: #eef4ff;
        color: #4e73df;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    .metric-item-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        min-width: 0;
    }

    .metric-item-body span {
        color: #7a8089;
        font-size: 14px;
    }

    .metric-item-body strong {
        font-size: 17px;
        font-weight: 700;
        color: #222;
    }

    .metric-item:hover {
        background: #fafcff;
    }

    .range-metric-list {
        padding: 18px 22px;
    }

    .range-metric {
        padding: 12px 0 18px;
        border-bottom: 1px solid #f2f4f7;
    }

    .range-metric:last-child {
        border-bottom: none;
        padding-bottom: 4px;
    }

    .range-metric-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 10px;
    }

    .range-metric-head span {
        font-size: 14px;
        color: #7a8089;
    }

    .range-metric-head strong {
        font-size: 17px;
        font-weight: 700;
        color: #222;
    }

    .range-track {
        position: relative;
        height: 6px;
        background: #eef1f4;
        border-radius: 999px;
        margin-bottom: 8px;
    }

    /* Keep the bar's internal left/width math in a fixed coordinate space,
       then mirror the whole track visually for RTL. This avoids relying on
       logical CSS properties (inset-inline-start etc.), which can get
       overridden by a global "direction: ltr" reset some admin themes apply
       to protect chart/canvas elements. */
    [dir="rtl"] .range-track {
        transform: scaleX(-1);
    }

    .range-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(90deg, #64B5F6, #42A5F5);
        border-radius: 999px;
    }

    .range-dot {
        position: absolute;
        top: 50%;
        width: 12px;
        height: 12px;
        background: #fff;
        border: 3px solid #1E88E5;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    }

    .range-bounds {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #b0bec5;
    }

    @media (max-width:992px) {

        .kpi-strip {
            grid-template-columns: repeat(3, 1fr);
        }

    }

    @media (max-width:768px) {

        .kpi-strip {
            grid-template-columns: repeat(2, 1fr);
        }

        .overview-panels-row {
            gap: 16px;
        }

        .overview-panel-col {
            flex: 1 1 100%;
        }

        .metric-item {
            padding: 14px 16px;
        }

    }

    @media (max-width:480px) {

        .kpi-strip {
            grid-template-columns: 1fr;
        }

    }

    /* Collapsible header (impact-style) */
    .scopus-collapse-header {
        display: flex;
        align-items: center;
        gap: 14px;
        background: #fff;
        border: 1px solid #e9edf2;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
        padding: 18px 22px;
        margin-bottom: 18px;
        cursor: pointer;
        user-select: none;
        transition: border-radius .2s ease;
    }

    .scopus-collapse-header:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(66, 165, 245, .25);
    }

    .scopus-collapse-header.collapsed {
        margin-bottom: 0;
        border-radius: 12px;
    }

    .scopus-collapse-header-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
        background: linear-gradient(135deg, #607D8B, #546E7A);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
    }

    .scopus-collapse-header-text {
        flex: 1;
        min-width: 0;
    }

    .scopus-collapse-header-text h3 {
        margin: 0 0 4px;
        font-size: 19px;
        font-weight: 600;
        color: #263238;
    }

    .scopus-collapse-header-text p {
        margin: 0;
        font-size: 13px;
        color: #90a4ae;
    }

    .scopus-collapse-header-toggle {
        color: #90a4ae;
        font-size: 16px;
    }

    .scopus-collapse-chevron {
        display: inline-block;
        transition: transform .25s ease;
    }

    .scopus-collapse-header.collapsed .scopus-collapse-chevron {
        transform: rotate(-90deg);
    }

    .scopus-collapse-body {
        margin-top: -4px;
    }

    @media (max-width: 600px) {
        .scopus-collapse-header {
            padding: 16px;
        }
    }