/* ==========================================================
   IT CSO DASHBOARD
   INTERACTIVE ANALYTICS V10
   ========================================================== */


/* ==========================================================
   OLD RECENT TICKETS
   ========================================================== */

body.executive-v3
.tickets-panel {

    display:
        none !important;

}


/* ==========================================================
   DONUT + FILTER LAYOUT
   ========================================================== */

body.executive-v3
#v3InsightsRow {

    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        14px !important;

    margin-bottom:
        16px;

}


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

    display:
        grid !important;

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

    gap:
        14px !important;

    width:
        100%;

    margin:
        0 !important;

}


/* ==========================================================
   PERIOD CARDS
   ========================================================== */

body.executive-v3
.digital-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        255px;

    overflow:
        hidden;

    padding:
        16px;

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

    border-radius:
        14px;

    background:

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

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

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

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

}


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

    position:
        relative;

    z-index:
        4;

}


body.executive-v3
.digital-title {

    display:
        block;

    color:
        var(--v3-text);

    font-size:
        13px;

    font-weight:
        820;

}


body.executive-v3
.digital-period {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--v3-muted);

    font-size:
        8px;

}


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

    min-height:
        180px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

}


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

body.executive-v3
.digital-donut {

    position:
        relative;

    width:
        145px !important;

    height:
        145px !important;

    min-width:
        145px !important;

    flex:
        0 0 145px !important;

    border-radius:
        50%;

    background:
        transparent !important;

    box-shadow:
        none !important;

}


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

    display:
        none !important;

}


.v10-donut-svg {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        2;

    overflow:
        visible;

}


.v10-donut-track {

    fill:
        none;

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

    stroke-width:
        15;

}


.v10-donut-segment {

    fill:
        none;

    stroke-width:
        15;

    stroke-linecap:
        round;

    cursor:
        pointer;

    transition:
        stroke-width .16s ease,
        opacity .16s ease,
        filter .16s ease;

}


.v10-donut-segment:hover {

    stroke-width:
        18;

    filter:
        drop-shadow(
            0 0 7px
            currentColor
        );

}


.v10-donut-inner {

    fill:
        none;

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

    stroke-width:
        1;

    stroke-dasharray:
        2 4;

}


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

    content:
        "";

    position:
        absolute;

    inset:
        -6px;

    z-index:
        0;

    border-radius:
        50%;

    background:

        repeating-conic-gradient(
            from -90deg,
            rgba(96,165,250,.25)
            0deg 1deg,
            transparent
            1deg 8deg
        );

    -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)
        );

}


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

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        82px !important;

    height:
        82px !important;

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

    z-index:
        3;

    border-radius:
        50%;

    background:

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

        var(--v3-card);

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

    box-shadow:

        inset 0 0 19px
        rgba(37,99,235,.07),

        0 8px 22px
        rgba(0,0,0,.19);

}


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

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

}


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

    color:
        var(--v3-text);

    font-size:
        26px;

    font-weight:
        880;

    line-height:
        1;

}


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

    margin-top:
        5px;

    color:
        var(--v3-muted);

    font-size:
        7px;

    font-weight:
        850;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


/* ==========================================================
   CLICKABLE STATUS LEGEND
   ========================================================== */

.v10-status-list {

    min-width:
        180px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

}


.v10-status-row {

    width:
        100%;

    min-height:
        29px;

    display:
        grid;

    grid-template-columns:
        9px 1fr auto;

    align-items:
        center;

    gap:
        7px;

    padding:
        5px 7px;

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

    border-radius:
        7px;

    color:
        var(--v3-text);

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

    font-size:
        8px;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        .15s ease;

}


.v10-status-row:hover {

    transform:
        translateX(2px);

    border-color:
        rgba(59,130,246,.40);

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

}


.v10-status-row.selected {

    border-color:
        rgba(59,130,246,.70);

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

    box-shadow:
        0 0 0 2px
        rgba(37,99,235,.07);

}


.v10-status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        2px;

}


.v10-status-label {

    color:
        var(--v3-muted);

}


.v10-status-count {

    color:
        var(--v3-text);

    font-weight:
        800;

    white-space:
        nowrap;

}


.v10-click-hint {

    margin-top:
        2px;

    color:
        var(--v3-muted);

    font-size:
        7px;

}


.v10-click-hint::before {

    content:
        "i";

    width:
        13px;

    height:
        13px;

    margin-right:
        5px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    font-size:
        7px;

    font-weight:
        800;

}


/* ==========================================================
   FILTER CARD
   ========================================================== */

body.executive-v3
#v3InsightsRow
.filters {

    width:
        100%;

    min-height:
        auto;

    margin:
        0 !important;

    padding:
        15px;

    display:
        grid !important;

    grid-template-columns:
        minmax(220px,1.5fr)
        repeat(4,minmax(120px,.7fr))
        minmax(260px,1.3fr)
        auto auto !important;

    gap:
        9px;

    align-items:
        end;

}


body.executive-v3
.filters::before {

    grid-column:
        1 / -1;

    margin-bottom:
        0;

}


body.executive-v3
.filters input:not([type="date"]) {

    grid-column:
        auto !important;

}


/* ==========================================================
   CUSTOM DATE FILTER
   ========================================================== */

#v10DateRange {

    display:
        grid;

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

    gap:
        7px;

}


.v10-date-field {

    min-width:
        0;

}


.v10-date-field label {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--v3-muted);

    font-size:
        7px;

    font-weight:
        750;

}


.v10-date-title {

    grid-column:
        1 / -1;

    color:
        var(--v3-muted);

    font-size:
        8px;

    font-weight:
        750;

}


body.executive-v3
#v10DateRange
input[type="date"] {

    width:
        100%;

    height:
        39px;

    padding:
        7px 8px;

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

    border-radius:
        8px;

    outline:
        0;

    color:
        var(--v3-text);

    background:
        var(--v3-card-soft);

    font-size:
        8px;

    color-scheme:
        dark;

}


body:not(.dark-mode)
#v10DateRange
input[type="date"] {

    color-scheme:
        light;

}


body.executive-v3
#v10DateRange
input[type="date"]:focus {

    border-color:
        rgba(59,130,246,.60);

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.08);

}


/* ==========================================================
   MONTHLY TREND
   ========================================================== */

#v10MonthlyTrend {

    scroll-margin-top:
        105px;

    margin-bottom:
        16px;

    padding:
        17px 18px 13px;

    overflow:
        hidden;

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

    border-radius:
        14px;

    background:

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

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

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

}


.v10-trend-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        10px;

}


.v10-trend-title {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.v10-trend-icon {

    color:
        #60a5fa;

    font-size:
        18px;

}


.v10-trend-title h3 {

    margin:
        0;

    color:
        var(--v3-text);

    font-size:
        13px;

    font-weight:
        820;

}


.v10-trend-title p {

    margin:
        3px 0 0;

    color:
        var(--v3-muted);

    font-size:
        8px;

}


#v10TrendYear {

    min-width:
        85px;

    height:
        32px;

    padding:
        5px 8px;

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

    border-radius:
        7px;

    color:
        var(--v3-text);

    background:
        var(--v3-card-soft);

    font-size:
        8px;

}


#v10TrendSvg {

    width:
        100%;

    height:
        auto;

    display:
        block;

    overflow:
        visible;

}


.v10-grid-line {

    stroke:
        rgba(148,163,184,.10);

    stroke-width:
        1;

}


.v10-axis-text {

    fill:
        var(--v3-muted);

    font-size:
        10px;

}


.v10-month-text {

    fill:
        var(--v3-muted);

    font-size:
        10px;

    text-anchor:
        middle;

}


.v10-point-label {

    fill:
        var(--v3-text);

    font-size:
        9px;

    font-weight:
        700;

    text-anchor:
        middle;

}


.v10-trend-line {

    fill:
        none;

    stroke:
        url(#v10TrendLineGradient);

    stroke-width:
        3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    filter:
        url(#v10TrendGlow);

}


.v10-trend-area {

    fill:
        url(#v10TrendAreaGradient);

}


.v10-trend-point {

    fill:
        #ffffff;

    stroke:
        #3b82f6;

    stroke-width:
        3;

    cursor:
        pointer;

    filter:
        url(#v10TrendGlow);

    transition:
        r .15s ease;

}


.v10-trend-point:hover {

    r:
        7;

}


/* ==========================================================
   RIGHT DRAWER
   ========================================================== */

#v10DrawerBackdrop {

    position:
        fixed;

    inset:
        0;

    z-index:
        1998;

    display:
        none;

    background:
        rgba(0,0,0,.28);

    backdrop-filter:
        blur(1px);

}


#v10DrawerBackdrop.open {

    display:
        block;

}


#v10TicketDrawer {

    position:
        fixed;

    top:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        1999;

    width:
        min(520px,94vw);

    display:
        flex;

    flex-direction:
        column;

    transform:
        translateX(105%);

    transition:
        transform .22s ease;

    background:

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

        #071629;

    border-left:
        1px solid
        rgba(96,165,250,.18);

    box-shadow:
        -15px 0 50px
        rgba(0,0,0,.35);

}


#v10TicketDrawer.open {

    transform:
        translateX(0);

}


.v10-drawer-header {

    padding:
        18px;

    border-bottom:
        1px solid
        rgba(148,163,184,.12);

}


.v10-drawer-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}


.v10-drawer-title {

    margin:
        0;

    color:
        #f8fafc;

    font-size:
        16px;

    font-weight:
        820;

}


#v10DrawerClose {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border:
        0;

    border-radius:
        7px;

    color:
        #94a3b8;

    background:
        transparent;

    cursor:
        pointer;

    font-size:
        18px;

}


#v10DrawerClose:hover {

    color:
        white;

    background:
        rgba(255,255,255,.06);

}


.v10-drawer-meta {

    margin-top:
        7px;

    color:
        #94a3b8;

    font-size:
        9px;

}


#v10DrawerFilter {

    display:
        inline-flex;

    margin-top:
        9px;

    padding:
        5px 8px;

    border-radius:
        999px;

    color:
        #93c5fd;

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

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

    font-size:
        8px;

    font-weight:
        700;

}


.v10-drawer-table-wrap {

    flex:
        1;

    overflow:
        auto;

}


.v10-drawer-table {

    width:
        100%;

    min-width:
        680px;

    border-collapse:
        collapse;

}


.v10-drawer-table th {

    position:
        sticky;

    top:
        0;

    z-index:
        3;

    padding:
        10px;

    color:
        #94a3b8;

    background:
        #09192d;

    border-bottom:
        1px solid
        rgba(148,163,184,.12);

    font-size:
        7px;

    font-weight:
        800;

    text-align:
        left;

    text-transform:
        uppercase;

}


.v10-drawer-table td {

    padding:
        10px;

    color:
        #e2e8f0;

    border-bottom:
        1px solid
        rgba(148,163,184,.10);

    font-size:
        8px;

    vertical-align:
        middle;

}


.v10-drawer-table tbody tr:hover td {

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

}


.v10-ticket-link {

    color:
        #60a5fa;

    font-weight:
        800;

}


.v10-pill {

    display:
        inline-flex;

    padding:
        4px 7px;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        800;

    white-space:
        nowrap;

}


.v10-pill.resolved {

    color:
        #86efac;

    background:
        rgba(34,197,94,.13);

}


.v10-pill.progress {

    color:
        #93c5fd;

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

}


.v10-pill.unassigned {

    color:
        #fbbf24;

    background:
        rgba(245,158,11,.13);

}


.v10-pill.nostatus {

    color:
        #cbd5e1;

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

}


.v10-drawer-footer {

    min-height:
        57px;

    padding:
        10px 15px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    border-top:
        1px solid
        rgba(148,163,184,.12);

}


.v10-pagination {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


.v10-page-btn {

    min-width:
        28px;

    height:
        28px;

    padding:
        0 6px;

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

    border-radius:
        6px;

    color:
        #cbd5e1;

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

    cursor:
        pointer;

    font-size:
        8px;

}


.v10-page-btn.active {

    color:
        white;

    border-color:
        #2563eb;

    background:
        #2563eb;

}


.v10-page-btn:disabled {

    opacity:
        .35;

    cursor:
        default;

}


.v10-empty {

    padding:
        50px 20px !important;

    color:
        #94a3b8 !important;

    text-align:
        center;

}


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

@media (max-width: 1300px) {

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

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

    }


    body.executive-v3
    #v3InsightsRow
    .filters {

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

    }


    body.executive-v3
    #v3InsightsRow
    .filters::before {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 850px) {

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

        grid-template-columns:
            1fr !important;

    }


    body.executive-v3
    #v3InsightsRow
    .filters {

        grid-template-columns:
            1fr 1fr !important;

    }

}