/* ============================================================
   IT CSO DASHBOARD
   EXECUTIVE VISUAL POLISH V5
   ============================================================ */


/* ============================================================
   1. SIDEBAR / COLLAPSE LAYOUT FIX
   ============================================================ */

body.executive-v3.v3-authenticated .topbar,
body.executive-v3.v3-authenticated main {

    width:
        calc(100% - var(--v3-sidebar)) !important;

    max-width:
        none !important;

    margin-left:
        var(--v3-sidebar) !important;

    margin-right:
        0 !important;

    box-sizing:
        border-box !important;

}


body.executive-v3.v3-authenticated main {

    padding-left:
        27px;

    padding-right:
        18px;

}


body.executive-v3.v3-sidebar-collapsed {

    --v3-sidebar:
        58px !important;

}


body.executive-v3
#executiveSidebar {

    width:
        var(--v3-sidebar) !important;

}


/* Smaller footer / collapse control */

body.executive-v3
.v3-sidebar-footer {

    min-height:
        52px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        9px 7px;

}


body.executive-v3
#v3CollapseBtn {

    width:
        94px;

    height:
        30px;

    min-height:
        30px;

    padding:
        0 9px;

    margin:
        0 auto;

    justify-content:
        center;

    gap:
        6px;

    border-radius:
        8px;

    font-size:
        9px;

}


body.executive-v3
#v3CollapseBtn svg {

    width:
        14px;

    height:
        14px;

}


body.executive-v3.v3-sidebar-collapsed
#v3CollapseBtn {

    width:
        29px;

    height:
        29px;

    min-height:
        29px;

    padding:
        0;

    border-radius:
        8px;

}


body.executive-v3.v3-sidebar-collapsed
#v3CollapseBtn svg {

    width:
        13px;

    height:
        13px;

}


/* Smaller collapsed navigation */

body.executive-v3.v3-sidebar-collapsed
.v3-nav-btn {

    width:
        39px;

    height:
        39px;

    min-height:
        39px;

    padding:
        0;

    margin:
        3px auto;

    border-radius:
        9px;

}


body.executive-v3.v3-sidebar-collapsed
.v3-logo {

    width:
        35px;

    height:
        35px;

    min-width:
        35px;

}


/* ============================================================
   2. DARK MODE TOGGLE - COMPACT
   ============================================================ */

body.executive-v3
.v4-theme-control {

    gap:
        6px;

}


body.executive-v3
.v4-theme-icon {

    width:
        14px;

    height:
        14px;

}


body.executive-v3
.v4-theme-icon svg {

    width:
        13px;

    height:
        13px;

}


body.executive-v3
.v4-theme-switch {

    width:
        35px !important;

    min-width:
        35px !important;

    height:
        19px !important;

    min-height:
        19px !important;

    padding:
        0 !important;

    border-radius:
        999px !important;

}


body.executive-v3
.v4-theme-switch::after {

    width:
        15px !important;

    height:
        15px !important;

    left:
        1px !important;

    top:
        1px !important;

}


body.executive-v3
.v4-theme-switch[aria-checked="true"]::after {

    transform:
        translateX(16px) !important;

}


/* ============================================================
   3. TOOLBAR ORDER
   Refresh -> Export -> More
   ============================================================ */

body.executive-v3
#v4ToolbarActions {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


body.executive-v3
#refreshBtn {

    order:
        1;

}


body.executive-v3
#exportUnassignedBtn {

    order:
        2;

}


body.executive-v3
#v4MoreWrap {

    order:
        3;

}


/* ============================================================
   4. ADVANCED KPI MINI CHARTS
   ============================================================ */

body.executive-v3
.v3-sparkline {

    display:
        none !important;

}


body.executive-v3
.v5-sparkline {

    position:
        absolute;

    right:
        14px;

    bottom:
        18px;

    width:
        102px;

    height:
        47px;

    overflow:
        visible;

    pointer-events:
        none;

}


body.executive-v3
.v5-spark-grid {

    stroke:
        currentColor;

    stroke-width:
        .6;

    stroke-dasharray:
        2 4;

    opacity:
        .08;

}


body.executive-v3
.v5-spark-area {

    opacity:
        .23;

}


body.executive-v3
.v5-spark-line {

    fill:
        none;

    stroke-width:
        2.2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


body.executive-v3
.v5-spark-end {

    stroke:
        rgba(255,255,255,.85);

    stroke-width:
        1.5;

}


body.executive-v3
.kpi[data-kpi="resolved"]
.v5-sparkline {

    color:
        #22c55e;

}


body.executive-v3
.kpi[data-kpi="progress"]
.v5-sparkline {

    color:
        #4f7cff;

}


body.executive-v3
.kpi[data-kpi="unassigned"]
.v5-sparkline {

    color:
        #f59e0b;

}


/* little glow behind advanced chart */

body.executive-v3
.v5-sparkline {

    filter:
        drop-shadow(
            0 3px 7px
            rgba(37,99,235,.16)
        );

}


/* ============================================================
   5. ADVANCED DIGITAL DONUT
   ============================================================ */

body.executive-v3
.digital-donut {

    position:
        relative;

    width:
        158px !important;

    height:
        158px !important;

    min-width:
        158px !important;

    flex-basis:
        158px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    isolation:
        isolate;

}


/* Outer technical tick ring */

body.executive-v3
.digital-donut::before {

    content:
        "";

    position:
        absolute;

    inset:
        -7px;

    border-radius:
        50%;

    background:

        repeating-conic-gradient(
            from -90deg,
            rgba(96,165,250,.34)
            0deg 1deg,

            transparent
            1deg 7deg
        );

    -webkit-mask:

        radial-gradient(
            farthest-side,
            transparent
            calc(100% - 2px),
            #000
            calc(100% - 2px)
        );

    mask:

        radial-gradient(
            farthest-side,
            transparent
            calc(100% - 2px),
            #000
            calc(100% - 2px)
        );

    opacity:
        .40;

    pointer-events:
        none;

    z-index:
        0;

}


/* Glass center */

body.executive-v3
.digital-donut::after {

    width:
        92px !important;

    height:
        92px !important;

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(59,130,246,.10),
            transparent 38%
        ),

        var(--v3-card) !important;

    border:
        1px solid
        rgba(96,165,250,.20) !important;

    box-shadow:

        inset 0 0 20px
        rgba(37,99,235,.05),

        0 8px 26px
        rgba(0,0,0,.18) !important;

}


/* SVG ring */

body.executive-v3
.v5-donut-svg {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        0;

    overflow:
        visible;

    animation:
        v5DonutAppear
        .55s ease both;

}


@keyframes v5DonutAppear {

    from {

        opacity:
            0;

        transform:
            scale(.92)
            rotate(-5deg);

    }

    to {

        opacity:
            1;

        transform:
            scale(1)
            rotate(0deg);

    }

}


body.executive-v3
.v5-donut-track {

    fill:
        none;

    stroke:
        rgba(100,116,139,.16);

    stroke-width:
        15;

}


body.executive-v3
.v5-donut-segment {

    fill:
        none;

    stroke-width:
        15;

    stroke-linecap:
        round;

    transition:
        stroke-dasharray
        .35s ease,

        stroke-dashoffset
        .35s ease;

}


body.executive-v3
.v5-donut-inner-ring {

    fill:
        none;

    stroke:
        rgba(96,165,250,.11);

    stroke-width:
        1;

    stroke-dasharray:
        2 4;

}


body.executive-v3
.digital-donut-center strong {

    font-size:
        29px;

    font-weight:
        850;

    text-shadow:
        0 3px 16px
        rgba(37,99,235,.17);

}


body.executive-v3
.digital-donut-center span {

    margin-top:
        5px;

    font-size:
        8px;

    letter-spacing:
        .14em;

}


/* ============================================================
   6. ADVANCED DONUT LEGEND
   ============================================================ */

body.executive-v3
.digital-legend {

    min-width:
        192px;

    gap:
        6px;

}


body.executive-v3
.digital-legend-row {

    min-height:
        29px;

    padding:
        5px 7px;

    border:
        1px solid
        rgba(148,163,184,.08);

    border-radius:
        7px;

    background:
        rgba(148,163,184,.025);

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;

}


body.executive-v3
.digital-legend-row:hover {

    transform:
        translateX(2px);

    background:
        rgba(59,130,246,.045);

    border-color:
        rgba(96,165,250,.16);

}


body.executive-v3
.digital-legend-name {

    font-size:
        9px;

}


body.executive-v3
.digital-legend-row strong {

    font-size:
        9px;

    font-variant-numeric:
        tabular-nums;

}


body.executive-v3
.legend-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        2px;

    box-shadow:
        0 0 8px
        currentColor;

}


/* Trend is now a compact pill */

body.executive-v3
.v3-donut-trend {

    margin-top:
        6px;

    padding:
        7px 8px;

    border:
        1px solid
        rgba(148,163,184,.08);

    border-radius:
        7px;

    background:
        rgba(148,163,184,.025);

    font-size:
        8px;

}


/* ============================================================
   7. DONUT CARD DEPTH
   ============================================================ */

body.executive-v3
.digital-card {

    position:
        relative;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 12% 110%,
            rgba(37,99,235,.07),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            var(--v3-card),
            var(--v3-card-soft)
        );

}


body.executive-v3
.digital-card::after {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -80px;

    top:
        -90px;

    border-radius:
        50%;

    background:
        rgba(37,99,235,.035);

    pointer-events:
        none;

}


/* ============================================================
   8. FILTER CARD SMALL POLISH
   ============================================================ */

body.executive-v3
.filters {

    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(37,99,235,.05),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            var(--v3-card),
            var(--v3-card-soft)
        );

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 850px) {

    body.executive-v3.v3-authenticated
    .topbar,

    body.executive-v3.v3-authenticated
    main {

        width:
            100% !important;

        margin-left:
            0 !important;

    }

}


@media (max-width: 600px) {

    body.executive-v3
    .v5-sparkline {

        width:
            78px;

        height:
            40px;

    }


    body.executive-v3
    .digital-donut {

        width:
            145px !important;

        height:
            145px !important;

        min-width:
            145px !important;

        flex-basis:
            145px !important;

    }

}