/* ============================================================
   IT CSO DASHBOARD
   EXECUTIVE POLISH V4
   Header / Account / Toolbar / KPI refinements
   ============================================================ */


/* ============================================================
   REMOVE OLD/DUPLICATE PRESENTATION
   ============================================================ */

body.executive-v3 .modern-kpi-subtext {

    display:
        none !important;

}


body.executive-v3 #loadStatus {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0,0,0,0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;

}


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

body.executive-v3 .topbar {

    min-height:
        88px;

    padding:
        17px 26px;

}


body.executive-v3 .topbar h1 {

    font-size:
        24px;

    font-weight:
        800;

    letter-spacing:
        -.03em;

}


body.executive-v3 .topbar p {

    margin-top:
        3px;

    color:
        #94a3b8;

    font-size:
        12px;

}


/* ============================================================
   HIDE ORIGINAL ACCOUNT CONTROLS
   We still keep them in DOM for existing JS.
   ============================================================ */

.v4-original-control {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0,0,0,0) !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;

}


/* ============================================================
   NEW ACCOUNT AREA
   ============================================================ */

.v4-account-tools {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

}


.v4-theme-control {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #e2e8f0;

    font-size:
        11px;

    font-weight:
        650;

    white-space:
        nowrap;

}


.v4-theme-icon {

    width:
        17px;

    height:
        17px;

    display:
        grid;

    place-items:
        center;

    color:
        #cbd5e1;

}


.v4-theme-icon svg {

    width:
        16px;

    height:
        16px;

}


.v4-theme-switch {

    position:
        relative;

    width:
        42px;

    height:
        23px;

    padding:
        0;

    border:
        1px solid
        rgba(255,255,255,.17);

    border-radius:
        999px;

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

    cursor:
        pointer;

    transition:
        background .18s ease,
        border-color .18s ease;

}


.v4-theme-switch::after {

    content:
        "";

    position:
        absolute;

    width:
        17px;

    height:
        17px;

    left:
        3px;

    top:
        2px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.30);

    transition:
        transform .18s ease;

}


.v4-theme-switch[aria-checked="true"] {

    background:
        #2563eb;

    border-color:
        #3b82f6;

    box-shadow:
        0 0 14px
        rgba(37,99,235,.28);

}


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

    transform:
        translateX(18px);

}


/* separator */

.v4-account-divider {

    width:
        1px;

    height:
        32px;

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

}


/* ============================================================
   USER PROFILE CHIP
   ============================================================ */

.v4-user-wrap {

    position:
        relative;

}


.v4-user-chip {

    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        4px 7px 4px 4px;

    border:
        0;

    border-radius:
        11px;

    background:
        transparent;

    color:
        white;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        background .16s ease;

}


.v4-user-chip:hover {

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

}


.v4-avatar {

    width:
        37px;

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 37px;

    border-radius:
        50%;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

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

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .02em;

}


.v4-user-copy {

    min-width:
        88px;

}


.v4-user-name {

    display:
        block;

    color:
        #f8fafc;

    font-size:
        11px;

    font-weight:
        750;

    line-height:
        1.2;

}


.v4-user-role {

    display:
        block;

    margin-top:
        3px;

    color:
        #94a3b8;

    font-size:
        9px;

    font-weight:
        500;

}


.v4-chevron {

    color:
        #94a3b8;

    font-size:
        14px;

    transition:
        transform .16s ease;

}


.v4-user-wrap.open
.v4-chevron {

    transform:
        rotate(180deg);

}


/* ============================================================
   USER DROPDOWN
   ============================================================ */

.v4-user-menu {

    position:
        absolute;

    right:
        0;

    top:
        calc(100% + 8px);

    width:
        180px;

    padding:
        7px;

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

    border-radius:
        11px;

    background:
        #0b1a2c;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.35);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-5px);

    transition:
        .16s ease;

    z-index:
        1500;

}


.v4-user-wrap.open
.v4-user-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.v4-user-menu button {

    width:
        100%;

    min-height:
        36px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 10px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #e2e8f0;

    font-size:
        10px;

    font-weight:
        650;

    cursor:
        pointer;

}


.v4-user-menu button:hover {

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

    color:
        #fca5a5;

}


/* ============================================================
   TOOLBAR
   ============================================================ */

body.executive-v3 .toolbar {

    min-height:
        50px;

    margin-bottom:
        14px;

}


.v4-toolbar-status {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.v4-live {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        4px 9px;

    border-radius:
        999px;

    color:
        #4ade80;

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

    font-size:
        9px;

    font-weight:
        800;

}


.v4-live-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 4px
        rgba(34,197,94,.08);

}


.v4-toolbar-actions {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


body.executive-v3
.v4-toolbar-actions
button {

    height:
        39px;

    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        8px 14px;

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

    border-radius:
        8px;

    background:
        var(--v3-card);

    color:
        var(--v3-text);

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .16s ease;

}


body.executive-v3
.v4-toolbar-actions
button:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(37,99,235,.55);

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

}


.v4-action-icon {

    width:
        15px;

    height:
        15px;

    color:
        #3b82f6;

}


.v4-action-icon svg {

    width:
        15px;

    height:
        15px;

}


#v4MoreBtn {

    width:
        39px;

    padding:
        0;

}


/* ============================================================
   MORE MENU
   ============================================================ */

.v4-more-wrap {

    position:
        relative;

}


.v4-more-menu {

    position:
        absolute;

    right:
        0;

    top:
        calc(100% + 7px);

    width:
        165px;

    padding:
        6px;

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

    border-radius:
        10px;

    background:
        var(--v3-card);

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

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-4px);

    transition:
        .15s ease;

    z-index:
        1000;

}


.v4-more-wrap.open
.v4-more-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.v4-more-menu button {

    width:
        100% !important;

    height:
        34px !important;

    min-height:
        34px !important;

    justify-content:
        flex-start !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    background:
        transparent !important;

}


.v4-more-menu button:hover {

    transform:
        none !important;

    background:
        rgba(37,99,235,.08) !important;

}


/* ============================================================
   KPI CARD REFINEMENT
   ============================================================ */

body.executive-v3 .kpi {

    min-height:
        126px;

    padding:
        20px 102px 16px 72px;

    border-width:
        1px;

}


body.executive-v3
.kpi[data-kpi="all"] {

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

}


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

    border-color:
        rgba(34,197,94,.42);

}


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

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

}


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

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

}


/* subtle glow */

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

    box-shadow:

        inset 0 0 34px
        rgba(34,197,94,.025),

        var(--v3-shadow);

}


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

    box-shadow:

        inset 0 0 34px
        rgba(59,130,246,.035),

        var(--v3-shadow);

}


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

    box-shadow:

        inset 0 0 34px
        rgba(245,158,11,.025),

        var(--v3-shadow);

}


/* KPI icon glow */

body.executive-v3
.v3-kpi-icon {

    width:
        43px;

    height:
        43px;

    left:
        17px;

    top:
        20px;

    border-radius:
        50%;

}


body.executive-v3
.kpi[data-kpi="all"]
.v3-kpi-icon {

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

}


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

    box-shadow:
        0 0 24px
        rgba(34,197,94,.28);

}


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

    box-shadow:
        0 0 24px
        rgba(59,130,246,.30);

}


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

    box-shadow:
        0 0 24px
        rgba(245,158,11,.28);

}


body.executive-v3
.kpi strong {

    font-size:
        29px;

}


body.executive-v3
.kpi[data-kpi="all"]
strong {

    font-size:
        25px;

    letter-spacing:
        -.025em;

}


.v4-latest-meta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

}


.v4-latest-dot {

    width:
        6px;

    height:
        6px;

    display:
        inline-block;

    border-radius:
        50%;

    background:
        #3b82f6;

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

}


/* remove old duplicate latest text */

.kpi[data-kpi="all"]
.modern-kpi-subtext {

    display:
        none !important;

}


/* better percentage */

body.executive-v3
.v3-kpi-meta {

    color:
        var(--v3-muted);

    font-size:
        9px;

    font-weight:
        600;

}


/* slightly larger sparkline */

body.executive-v3
.v3-sparkline {

    width:
        91px;

    height:
        42px;

    right:
        15px;

    bottom:
        21px;

}


/* ============================================================
   DARK MODE
   ============================================================ */

body.dark-mode
.v4-user-menu {

    background:
        #0b1a2c;

}


body:not(.dark-mode)
.v4-user-menu {

    background:
        #ffffff;

    border-color:
        #e5e7eb;

}


body:not(.dark-mode)
.v4-user-menu button {

    color:
        #172033;

}


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

@media (max-width: 800px) {

    .v4-user-copy,
    .v4-theme-control > span {

        display:
            none;

    }


    .v4-account-divider {

        display:
            none;

    }


    body.executive-v3
    .kpi {

        padding-right:
            75px;

    }


    .v4-toolbar-actions {

        gap:
            6px;

    }

}