/* =========================================================
   ADAPTIVE COMMAND PANEL
   DOES NOT CONTROL THEME
   INHERITS SITE COLORS AUTOMATICALLY
========================================================= */

.vcp-wrapper{

    width:100%;
    height:100%;

    display:flex;

    overflow:hidden;

    border-radius:18px;

    /* INHERIT SITE COLORS */
    background:var(--bg-body);

    /*color:var(--bs-body-color, var(--text-color, #111));*/

    border:1px solid
        color-mix(
            in srgb,
            currentColor 10%,
            transparent
        );

    font-family:inherit;
}

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

.vcp-sidebar{

    width:300px;
    min-width:300px;

    display:flex;
    flex-direction:column;

    background:
        color-mix(
            in srgb,
            currentColor 3%,
            transparent
        );

    border-right:1px solid
        color-mix(
            in srgb,
            currentColor 10%,
            transparent
        );
}

.vcp-header{

    padding:22px;

    font-size:20px;
    font-weight:700;

    border-bottom:1px solid
        color-mix(
            in srgb,
            currentColor 10%,
            transparent
        );
}

.vcp-command-list{
    padding:12px;
    overflow-y:auto;
}

/* =========================================================
   COMMAND ITEM
========================================================= */

.vcp-command{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    padding:14px;

    margin-bottom:8px;

    border-radius:14px;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .15s ease;
}

.vcp-command:hover{

    background:
        color-mix(
            in srgb,
            currentColor 6%,
            transparent
        );
}

.vcp-command.active{

    background:
        var(--bs-primary, #2563eb);

    color:#fff;
}

.vcp-command-left{

    display:flex;
    align-items:flex-start;

    gap:14px;
}

.vcp-command-left i{
    margin-top:3px;
    font-size:14px;
}

.vcp-command-title{

    font-size:14px;
    font-weight:600;

    line-height:1.2;
}

.vcp-command-desc{

    margin-top:4px;

    font-size:12px;
    line-height:1.4;

    opacity:.7;
}

/* =========================================================
   CONTENT
========================================================= */

.vcp-content{
    flex:1;
    overflow-y:auto;
}

.vcp-content-inner{
    padding:24px;
}

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

.vcp-content-card{

    border-radius:18px;

    padding:24px;

    background:
        color-mix(
            in srgb,
            currentColor 2%,
            transparent
        );

    border:1px solid
        color-mix(
            in srgb,
            currentColor 10%,
            transparent
        );
}

.vcp-content-title{

    font-size:24px;
    font-weight:700;

    margin-bottom:8px;
}

.vcp-content-subtitle{

    opacity:.7;

    margin-bottom:28px;

    font-size:14px;
}

/* =========================================================
   FORM
========================================================= */

.vcp-form-group{
    margin-bottom:20px;
}

.vcp-form-label{

    display:block;

    margin-bottom:8px;

    font-size:13px;
    font-weight:600;
}

.vcp-input,
.vcp-select,
.vcp-textarea{

    width:100%;

    border:none;
    outline:none;

    border-radius:12px;

    background:
        color-mix(
            in srgb,
            currentColor 6%,
            transparent
        );

    color:inherit;

    transition:all .2s ease;
}

.vcp-input,
.vcp-select{

    height:48px;

    padding:0 14px;
}

.vcp-textarea{

    min-height:120px;

    padding:14px;

    resize:vertical;
}

.vcp-input:focus,
.vcp-select:focus,
.vcp-textarea:focus{

    outline:2px solid
        var(--bs-primary, #2563eb);
}

/* =========================================================
   BUTTON
========================================================= */

.vcp-button{

    height:48px;

    padding:0 22px;

    border:none;

    border-radius:12px;

    background:
        var(--bs-primary, #2563eb);

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:all .2s ease;
}

.vcp-button:hover{
    opacity:.92;
}

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

@media (max-width: 900px){

    .vcp-wrapper{
        flex-direction:column;
    }

    .vcp-sidebar{

        width:100%;
        min-width:100%;

        border-right:none;

        border-bottom:1px solid
            color-mix(
                in srgb,
                currentColor 10%,
                transparent
            );
    }

    .vcp-content-inner{
        padding:16px;
    }

    .vcp-content-card{
        padding:18px;
    }
}