/*
 * Vehoo Client Workspace UI v2
 * Companion to portal.workspace.v1.css.
 *
 * Scope:
 * - authenticated workspace hierarchy
 * - navigation treatment
 * - API-rendered KPI presentation
 * - quick-access navigation
 * - sign-in assurance
 *
 * No operational or data behaviour.
 */

.portal .vh-sidebar-link,
.portal .vh-signout{
    display:flex;
    align-items:center;
    gap:10px;
}

.portal .vh-nav-icon{
    display:grid;
    place-items:center;
    flex:0 0 18px;
    width:18px;
    height:18px;
    color:#7b909c;
}

.portal .vh-nav-icon svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.portal .portal-sidebar
.vh-sidebar-link[aria-current]
.vh-nav-icon{
    color:#007e78;
}

.portal .vh-nav-label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

.portal .vh-workspace-context{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:34px;
    margin-bottom:13px;
}

.portal .vh-workspace-path{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    color:#80919c;
    font-size:.67rem;
    font-weight:650;
}

.portal .vh-workspace-path strong{
    min-width:0;
    overflow:hidden;
    color:#516978;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.portal .vh-workspace-separator{
    color:#b5c1c7;
}

.portal .vh-workspace-assurance{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    color:#58746f;
    font-size:.67rem;
    font-weight:700;
}

.portal .vh-context-icon{
    display:grid;
    place-items:center;
    width:17px;
    height:17px;
    color:#168274;
}

.portal .vh-context-icon svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.portal .vh-kpi-card{
    padding-right:56px;
}

.portal .vh-kpi-icon{
    position:absolute;
    right:18px;
    top:20px;
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border:1px solid #d9e9e7;
    border-radius:9px;
    background:#f2f8f7;
    color:#007e78;
}

.portal .vh-kpi-icon svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.portal .vh-quick-actions{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:12px;
    margin:0 0 22px;
}

.portal .vh-quick-action{
    position:relative;
    min-height:151px;
    padding:18px 19px 20px;
    overflow:hidden;
    border:1px solid #dce7e9;
    border-radius:13px;
    background:#fff;
    box-shadow:
        0 7px 19px
        rgba(18,47,69,.035);
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.portal .vh-quick-action:hover{
    border-color:#a9cbc7;
    box-shadow:
        0 12px 28px
        rgba(18,47,69,.065);
    transform:translateY(-2px);
}

.portal .vh-quick-action-top{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:17px;
}

.portal .vh-quick-icon{
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    border-radius:8px;
    background:#edf7f5;
    color:#007b74;
}

.portal .vh-quick-icon svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.portal .vh-quick-kicker{
    color:#718591;
    font-size:.62rem;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.portal .vh-quick-action>strong{
    display:block;
    margin-bottom:7px;
    color:#17384d;
    font-size:.87rem;
    font-weight:650;
}

.portal .vh-quick-copy{
    display:block;
    max-width:245px;
    padding-right:24px;
    color:#71838e;
    font-size:.7rem;
    line-height:1.55;
}

.portal .vh-quick-arrow{
    position:absolute;
    right:16px;
    bottom:16px;
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    color:#19877d;
    transition:transform .15s ease;
}

.portal .vh-quick-action:hover
.vh-quick-arrow{
    transform:translateX(2px);
}

.portal .vh-quick-arrow svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.portal .vh-workspace-card{
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.portal .vh-auth-assurance{
    display:flex;
    align-items:center;
    gap:9px;
    margin:-4px 0 22px;
    padding:10px 12px;
    border:1px solid #dce9e6;
    border-radius:8px;
    background:#f5faf9;
    color:#607873;
    font-size:.69rem;
    line-height:1.45;
}

.portal .vh-auth-icon{
    display:grid;
    place-items:center;
    flex:0 0 19px;
    width:19px;
    height:19px;
    color:#178174;
}

.portal .vh-auth-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media(max-width:1180px){

    .portal .vh-quick-actions{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:750px){

    .portal .vh-workspace-context{
        margin-bottom:10px;
    }

    .portal .vh-workspace-assurance{
        display:none;
    }

    .portal .vh-nav-icon{
        width:16px;
        height:16px;
    }

    .portal .vh-nav-icon svg{
        width:15px;
        height:15px;
    }

    .portal .vh-quick-actions{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .portal .vh-quick-action{
        min-height:142px;
        padding:15px;
    }

    .portal .vh-quick-copy{
        padding-right:14px;
    }
}

@media(max-width:500px){

    .portal .vh-workspace-path{
        font-size:.63rem;
    }

    .portal .vh-quick-actions{
        grid-template-columns:1fr;
    }

    .portal .vh-quick-action{
        min-height:0;
        padding:16px 50px 16px 16px;
    }

    .portal .vh-quick-action-top{
        margin-bottom:8px;
    }

    .portal .vh-quick-copy{
        max-width:none;
        padding-right:0;
    }

    .portal .vh-quick-arrow{
        right:17px;
        top:50%;
        bottom:auto;
        transform:translateY(-50%);
    }

    .portal .vh-quick-action:hover
    .vh-quick-arrow{
        transform:
            translate(2px,-50%);
    }
}

@media(prefers-reduced-motion:reduce){

    .portal .vh-quick-action,
    .portal .vh-quick-arrow,
    .portal .vh-workspace-card{
        transition:none!important;
    }
}