/* ============================================================
   IT CSO DASHBOARD
   ACTIONABLE ALERTS V9
   ============================================================ */


/* ============================================================
   SIDEBAR ALERT BUTTON
   ============================================================ */

.v9-alert-nav {

    position:
        relative;

}


.v9-alert-badge {

    margin-left:
        auto;

    min-width:
        22px;

    height:
        19px;

    padding:
        0 6px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    color:
        #ffffff;

    background:
        #ef4444;

    box-shadow:
        0 0 12px
        rgba(239,68,68,.28);

    font-size:
        8px;

    font-weight:
        850;

    font-variant-numeric:
        tabular-nums;

}


body.v3-sidebar-collapsed
.v9-alert-badge {

    position:
        absolute;

    right:
        -3px;

    top:
        -3px;

    min-width:
        15px;

    width:
        15px;

    height:
        15px;

    padding:
        0;

    font-size:
        0;

}


body.v3-sidebar-collapsed
.v9-alert-badge::after {

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        white;

}


/* ============================================================
   ALERT SECTION
   ============================================================ */

#v9AlertsSection {

    scroll-margin-top:
        110px;

    margin-bottom:
        16px;

    overflow:
        hidden;

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

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

    background:

        radial-gradient(
            circle at 94% -5%,
            rgba(239,68,68,.065),
            transparent 32%
        ),

        radial-gradient(
            circle at 4% 120%,
            rgba(245,158,11,.04),
            transparent 30%
        ),

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

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

}


/* ============================================================
   HEADER
   ============================================================ */

.v9-alert-header {

    padding:
        17px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

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

}


.v9-alert-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.v9-alert-heading-icon {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 36px;

    border-radius:
        10px;

    color:
        #f87171;

    background:
        rgba(239,68,68,.11);

    box-shadow:
        0 0 18px
        rgba(239,68,68,.10);

}


.v9-alert-heading-icon svg {

    width:
        19px;

    height:
        19px;

}


.v9-alert-title {

    margin:
        0;

    color:
        var(--v3-text);

    font-size:
        14px;

    font-weight:
        820;

}


.v9-alert-subtitle {

    margin:
        3px 0 0;

    color:
        var(--v3-muted);

    font-size:
        9px;

}


.v9-alert-total {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        6px 10px;

    border:
        1px solid
        rgba(239,68,68,.18);

    border-radius:
        999px;

    color:
        #f87171;

    background:
        rgba(239,68,68,.07);

    font-size:
        9px;

    font-weight:
        800;

}


.v9-alert-total-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #ef4444;

    box-shadow:
        0 0 0 4px
        rgba(239,68,68,.08);

}


/* ============================================================
   ALERT CARDS
   ============================================================ */

.v9-alert-cards {

    display:
        grid;

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

    gap:
        12px;

    padding:
        16px 18px 8px;

}


.v9-alert-card {

    position:
        relative;

    min-height:
        105px;

    padding:
        15px;

    overflow:
        hidden;

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

    border-radius:
        11px;

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

    color:
        var(--v3-text);

    cursor:
        pointer;

    text-align:
        left;

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

}


.v9-alert-card:hover {

    transform:
        translateY(-2px);

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

}


.v9-alert-card.active {

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

    box-shadow:
        0 0 0 2px
        rgba(59,130,246,.08);

}


.v9-alert-card.unassigned {

    border-color:
        rgba(245,158,11,.20);

}


.v9-alert-card.aged {

    border-color:
        rgba(239,68,68,.22);

}


.v9-alert-card.nostatus {

    border-color:
        rgba(148,163,184,.20);

}


.v9-alert-card-icon {

    position:
        absolute;

    right:
        14px;

    top:
        14px;

    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

}


.v9-alert-card-icon svg {

    width:
        17px;

    height:
        17px;

}


.unassigned
.v9-alert-card-icon {

    color:
        #f59e0b;

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

}


.aged
.v9-alert-card-icon {

    color:
        #ef4444;

    background:
        rgba(239,68,68,.10);

}


.nostatus
.v9-alert-card-icon {

    color:
        #94a3b8;

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

}


.v9-alert-card-label {

    color:
        var(--v3-muted);

    font-size:
        9px;

    font-weight:
        750;

}


.v9-alert-card-value {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--v3-text);

    font-size:
        27px;

    font-weight:
        850;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;

}


.unassigned
.v9-alert-card-value {

    color:
        #f59e0b;

}


.aged
.v9-alert-card-value {

    color:
        #f87171;

}


.v9-alert-card-note {

    display:
        block;

    margin-top:
        8px;

    color:
        var(--v3-muted);

    font-size:
        8px;

}


.v9-critical-count {

    color:
        #ef4444;

    font-weight:
        800;

}


/* ============================================================
   ALERT TABLE TOOLBAR
   ============================================================ */

.v9-alert-table-toolbar {

    padding:
        11px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}


.v9-alert-table-copy h4 {

    margin:
        0;

    color:
        var(--v3-text);

    font-size:
        11px;

    font-weight:
        800;

}


.v9-alert-table-copy p {

    margin:
        3px 0 0;

    color:
        var(--v3-muted);

    font-size:
        8px;

}


#v9ShowAllAlerts {

    min-height:
        31px;

    padding:
        7px 11px;

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

    border-radius:
        7px;

    color:
        var(--v3-text);

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

    font-size:
        8px;

    font-weight:
        750;

    cursor:
        pointer;

}


#v9ShowAllAlerts.active {

    color:
        #ffffff;

    border-color:
        #2563eb;

    background:
        #2563eb;

}


/* ============================================================
   TABLE
   ============================================================ */

.v9-alert-table-wrap {

    max-height:
        390px;

    overflow:
        auto;

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

}


.v9-alert-table {

    width:
        100%;

    border-collapse:
        collapse;

}


.v9-alert-table thead {

    position:
        sticky;

    top:
        0;

    z-index:
        3;

}


.v9-alert-table th {

    padding:
        10px 12px;

    color:
        var(--v3-muted);

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

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

    font-size:
        8px;

    font-weight:
        800;

    text-align:
        left;

    text-transform:
        uppercase;

    letter-spacing:
        .035em;

}


.v9-alert-table td {

    padding:
        10px 12px;

    color:
        var(--v3-text);

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

    font-size:
        8px;

    vertical-align:
        middle;

}


.v9-alert-table tbody tr:hover td {

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

}


.v9-alert-ticket-id {

    color:
        #60a5fa;

    font-weight:
        800;

}


.v9-reason-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        4px;

}


.v9-reason {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        19px;

    padding:
        3px 6px;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        800;

}


.v9-reason.unassigned {

    color:
        #fbbf24;

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

}


.v9-reason.aged {

    color:
        #f87171;

    background:
        rgba(239,68,68,.10);

}


.v9-reason.nostatus {

    color:
        #cbd5e1;

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

}


.v9-age {

    display:
        inline-flex;

    padding:
        3px 6px;

    border-radius:
        999px;

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

    color:
        #93c5fd;

    font-size:
        7px;

    font-weight:
        800;

}


.v9-age.critical {

    color:
        #f87171;

    background:
        rgba(239,68,68,.10);

}


.v9-empty {

    padding:
        35px;

    color:
        var(--v3-muted);

    text-align:
        center;

    font-size:
        10px;

}


/* ============================================================
   SCROLLBAR
   ============================================================ */

.v9-alert-table-wrap::-webkit-scrollbar {

    width:
        7px;

}


.v9-alert-table-wrap::-webkit-scrollbar-track {

    background:
        transparent;

}


.v9-alert-table-wrap::-webkit-scrollbar-thumb {

    border-radius:
        999px;

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

}


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

@media (max-width: 900px) {

    .v9-alert-cards {

        grid-template-columns:
            1fr;

    }


    .v9-alert-table-wrap {

        overflow-x:
            auto;

    }


    .v9-alert-table {

        min-width:
            900px;

    }

}