/* =========================================================
   VJ SIDEBAR — CONTEXT-BLOCK EXTENSION SYSTEM
========================================================= */

.page-row {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

/* =========================================================
   SIDEBAR BASE (MATCH context-block LANGUAGE)
========================================================= */

#sidebar {
    flex: 0 0 280px;
    width: 280px;
    position: relative;
    padding: 16px;
    overflow-y: auto;
    /* SAME SURFACE SYSTEM */
    background: var(--surface-card);
    border-right: 1px solid rgba(214, 177, 113, 0.12);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset -1px 0 0 rgba(255,255,255,0.03);
    transition: width .28s ease, padding .28s ease, transform .28s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto
}

    /* =========================================================
   GOLD FRAME (IDENTICAL TO context-block)
========================================================= */

    #sidebar::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1.5px;
        pointer-events: none;
        border-radius: inherit;
        background: var(--gold-frame);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.55;
    }

    /* =========================================================
   SIDEBAR SECTIONS (IMPORTANT: MAKE IT FEEL LIKE CARDS)
========================================================= */

    #sidebar fieldset {
        position: relative;
        margin-bottom: 14px;
        padding: 16px;
        border-radius: 24px 24px 24px 54px;
        background: var(--surface);
        border: 1px solid rgba(214, 177, 113, 0.12);
        box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
        transition: transform 180ms ease, box-shadow 180ms ease;
    }

        #sidebar fieldset:hover {
            transform: translateY(-2px);
            box-shadow: 0 26px 55px rgba(0,0,0,0.55), 0 0 0 1px rgba(240,216,154,0.10), inset 0 1px 0 rgba(255,255,255,0.04);
        }

    /* =========================================================
   LEGEND = context-block TITLE SYSTEM
========================================================= */

    #sidebar legend {
        float: none;
        margin: 0;
        padding: 0 6px;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(240,216,154,0.82);
    }

    /* =========================================================
   INPUTS (INSTRUMENT PANEL STYLE)
========================================================= */

 /*   #sidebar input,*/
    #sidebar textarea,
    #sidebar .form-select {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255,255,255,0.03);
        color: var(--text-soft);
        border: 1px solid rgba(214, 177, 113, 0.14);
        border-radius: 14px;
        padding: 12px 14px;
        font-size: 14px;
    }

        #sidebar input:focus,
        #sidebar textarea:focus,
        #sidebar .form-select:focus {
            outline: none;
            border-color: rgba(240,216,154,0.55);
            box-shadow: 0 0 0 3px rgba(240,216,154,0.12);
        }

        /* =========================================================
   RANGE SLIDER
========================================================= */

        #sidebar input[type="range"] {
            -webkit-appearance: none;
            height: 4px;
            border-radius: 999px;
            background: rgba(214, 177, 113, 0.18);
        }

            #sidebar input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: var(--gold-3);
                box-shadow: 0 0 12px rgba(240,216,154,0.35);
            }

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

#content {
    flex: 1;
    min-width: 0;
}


#sidebar fieldset,
.vj-sidebar fieldset {
    position: relative;
    margin-bottom: 14px;
    padding: 18px 18px 20px;
    /* SAME SURFACE AS context-block */
    background: var(--surface-card);
    border: 1px solid rgba(214, 177, 113, 0.14);
    border-radius: 24px 24px 24px 54px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

 
#sidebar fieldset::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: var(--gold-frame);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.70;
    pointer-events: none;
}
 
#sidebar fieldset:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 55px rgba(0,0,0,0.55), 0 0 0 1px rgba(240,216,154,0.10), inset 0 1px 0 rgba(255,255,255,0.04);
}

 

#sidebar legend {
    float: none;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240,216,154,0.82);
    padding: 0 8px;
}

#sidebar fieldset,
.vj-sidebar fieldset {
    border: none !important;
    outline: none !important;
}
 

#sidebar fieldset {
    position: relative;
    background: var(--surface);
    border-radius: 24px 24px 24px 54px;
    /* THIS is now your real border */
    border: 1px solid rgba(214, 177, 113, 0.22);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
}
 

#sidebar fieldset::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    /* THIS is the visible gold signature */
    box-shadow: inset 0 0 0 1px rgba(240,216,154,0.18), inset 0 0 18px rgba(240,216,154,0.06);
}