/* ============================================================
   IT CSO TICKET DASHBOARD
   FINAL NAVIGATION + DONUT UI V7
   ============================================================ */


/* ============================================================
   FULL WIDTH 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;

}


body.executive-v3.v3-authenticated main {

    padding-left:
        26px;

    padding-right:
        18px;

}


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

    --v3-sidebar:
        58px !important;

}


/* ============================================================
   SIDEBAR
   ============================================================ */

.v7-nav-section {

    padding:
        11px 11px 7px;

    color:
        #64748b;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}


.v7-nav-btn {

    width:
        100%;

    min-height:
        42px;

    margin-bottom:
        4px;

    padding:
        10px 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        #cbd5e1;

    font-size:
        11px;

    font-weight:
        650;

    cursor:
        pointer;

    text-align:
        left;

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

}


.v7-nav-btn svg {

    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

}


.v7-nav-btn:hover {

    color:
        #ffffff;

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

    transform:
        translateX(2px);

}


.v7-nav-btn.active {

    color:
        white;

    background:

        linear-gradient(
            90deg,
            rgba(37,99,235,.78),
            rgba(67,56,202,.42)
        );

    box-shadow:
        0 7px 20px
        rgba(37,99,235,.19);

}


body.v3-sidebar-collapsed
.v7-nav-section,

body.v3-sidebar-collapsed
.v7-nav-btn span {

    display:
        none;

}


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

    width:
        38px;

    min-height:
        38px;

    height:
        38px;

    padding:
        0;

    margin:
        4px auto;

    justify-content:
        center;

    border-radius:
        9px;

}


/* Smaller collapse */

body.executive-v3
#v3CollapseBtn {

    width:
        90px;

    min-height:
        29px;

    height:
        29px;

    padding:
        0 8px;

    justify-content:
        center;

    font-size:
        9px;

}


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

    width:
        29px;

    min-height:
        29px;

    height:
        29px;

    padding:
        0;

}


/* ============================================================
   SCROLL DESTINATIONS
   ============================================================ */

#v7DashboardSection,
#v7AnalyticsSection,
#v7ReportsSection,
#v7TicketsSection,
#v7DepartmentSection {

    scroll-margin-top:
        110px;

}


.v7-target-flash {

    animation:
        v7TargetFlash
        .75s ease;

}


@keyframes v7TargetFlash {

    0% {

        box-shadow:
            0 0 0 0
            rgba(59,130,246,.55);

    }

    50% {

        box-shadow:
            0 0 0 3px
            rgba(59,130,246,.18),
            0 0 28px
            rgba(59,130,246,.14);

    }

    100% {

        box-shadow:
            var(--v3-shadow);

    }

}


/* ============================================================
   INSIGHT ROW
   ============================================================ */

body.executive-v3
#v3InsightsRow {

    display:
        grid !important;

    grid-template-columns:
        minmax(0,2fr)
        minmax(330px,1fr) !important;

    gap:
        15px;

    align-items:
        stretch;

    margin-bottom:
        16px;

}


/* ============================================================
   DONUT GRID
   ============================================================ */

body.executive-v3
#v3InsightsRow
.digital-donuts {

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    gap:
        15px;

    margin:
        0 !important;

}


/* ============================================================
   DONUT CARD
   ============================================================ */

body.executive-v3
.digital-card {

    position:
        relative;

    min-height:
        252px;

    overflow:
        hidden;

    padding:
        18px;

    border:
        1px solid
        var(--v3-border);

    border-radius:
        var(--v3-radius);

    background:

        radial-gradient(
            circle at 10% 110%,
            rgba(37,99,235,.08),
            transparent 36%
        ),

        radial-gradient(
            circle at 100% -20%,
            rgba(59,130,246,.04),
            transparent 33%
        ),

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

    box-shadow:
        var(--v3-shadow);

}


body.executive-v3
.digital-title {

    display:
        block;

    color:
        var(--v3-text);

    font-size:
        14px;

    font-weight:
        800;

}


body.executive-v3
.digital-period {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--v3-muted);

    font-size:
        9px;

}


body.executive-v3
.digital-card-content {

    min-height:
        182px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        26px;

}


/* ============================================================
   ADVANCED DONUT
   ============================================================ */

body.executive-v3
.digital-donut {

    position:
        relative;

    width:
        158px !important;

    height:
        158px !important;

    min-width:
        158px !important;

    flex:
        0 0 158px !important;

    border-radius:
        50%;

    background:
        transparent !important;

    box-shadow:
        none !important;

    isolation:
        isolate;

}


/* old SVGs hidden */

.v5-donut-svg,
.v6-donut-svg {

    display:
        none !important;

}


/* technical outer 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,.38)
            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:
        .38;

}


/* glass center */

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

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        92px !important;

    height:
        92px !important;

    transform:
        translate(-50%,-50%);

    z-index:
        3;

    border-radius:
        50%;

    background:

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

        var(--v3-card) !important;

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

    box-shadow:

        inset 0 0 22px
        rgba(37,99,235,.06),

        0 8px 25px
        rgba(0,0,0,.20);

}


.v7-donut-svg {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        2;

    overflow:
        visible;

    filter:
        drop-shadow(
            0 4px 10px
            rgba(37,99,235,.14)
        );

}


.v7-donut-track {

    fill:
        none;

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

    stroke-width:
        15;

}


.v7-donut-segment {

    fill:
        none;

    stroke-width:
        15;

    stroke-linecap:
        round;

}


.v7-donut-inner {

    fill:
        none;

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

    stroke-width:
        1;

    stroke-dasharray:
        2 4;

}


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

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    pointer-events:
        none;

}


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

    color:
        var(--v3-text);

    font-size:
        29px;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        -.04em;

}


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

    margin-top:
        6px;

    color:
        var(--v3-muted);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


/* ============================================================
   DONUT LEGEND
   ============================================================ */

body.executive-v3
.digital-legend {

    min-width:
        190px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

}


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

    min-height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        5px 7px;

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

    border-radius:
        7px;

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

}


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

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--v3-muted);

    font-size:
        9px;

}


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

    color:
        var(--v3-text);

    font-size:
        9px;

    font-weight:
        780;

}


.legend-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        2px;

}


.active-dot {

    background:
        #3b82f6;

}


.resolved-dot {

    background:
        #22c55e;

}


.unassigned-dot {

    background:
        #f59e0b;

}


.no-status-dot {

    background:
        #94a3b8;

}


.v7-donut-trend {

    margin-top:
        5px;

    padding:
        7px 8px;

    border-radius:
        7px;

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

    color:
        var(--v3-muted);

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

    font-size:
        8px;

}


.v7-up {

    color:
        #22c55e;

    font-weight:
        800;

}


.v7-down {

    color:
        #ef4444;

    font-weight:
        800;

}


/* ============================================================
   REPORTS WINDOW
   ============================================================ */

.v7-report-section {

    margin-bottom:
        16px;

    padding:
        18px;

    border:
        1px solid
        var(--v3-border);

    border-radius:
        var(--v3-radius);

    background:

        radial-gradient(
            circle at 94% 0%,
            rgba(37,99,235,.06),
            transparent 28%
        ),

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

    box-shadow:
        var(--v3-shadow);

}


.v7-report-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        15px;

}


.v7-report-heading h3 {

    margin:
        0;

    color:
        var(--v3-text);

    font-size:
        14px;

    font-weight:
        800;

}


.v7-report-heading p {

    margin:
        3px 0 0;

    color:
        var(--v3-muted);

    font-size:
        9px;

}


.v7-report-badge {

    padding:
        5px 9px;

    border-radius:
        999px;

    color:
        #60a5fa;

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

    border:
        1px solid
        rgba(59,130,246,.16);

    font-size:
        8px;

    font-weight:
        800;

}


.v7-report-grid {

    display:
        grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:
        10px;

}


.v7-report-card {

    min-height:
        78px;

    padding:
        12px;

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

    border-radius:
        9px;

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

}


.v7-report-card span {

    display:
        block;

    color:
        var(--v3-muted);

    font-size:
        8px;

    font-weight:
        700;

}


.v7-report-card strong {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--v3-text);

    font-size:
        19px;

    font-weight:
        850;

    font-variant-numeric:
        tabular-nums;

}


.v7-report-card.green strong {

    color:
        #22c55e;

}


.v7-report-card.blue strong {

    color:
        #60a5fa;

}


.v7-report-card.orange strong {

    color:
        #f59e0b;

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    .v7-report-grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));

    }

}


@media (max-width: 1100px) {

    body.executive-v3
    #v3InsightsRow {

        grid-template-columns:
            1fr !important;

    }

}


@media (max-width: 760px) {

    body.executive-v3
    #v3InsightsRow
    .digital-donuts {

        grid-template-columns:
            1fr !important;

    }


    .v7-report-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}


@media (max-width: 850px) {

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

        width:
            100% !important;

        margin-left:
            0 !important;

    }

}