/* ============================================================
   VEBKO ONLINE HELP
   LEGACY SHELL RECONSTRUCTION
   Source of truth: legacy index.html final unified patch
============================================================ */

:root {
    --vbk-bg: #f4f7fb;
    --vbk-surface: rgba(255, 255, 255, .84);
    --vbk-surface-strong: #ffffff;
    --vbk-text: #152235;
    --vbk-muted: #6b7a90;
    --vbk-line: rgba(17, 24, 39, .08);
    --vbk-line-strong: rgba(17, 24, 39, .14);
    --vbk-brand: #16b3ac;
    --vbk-brand-2: #11968f;
    --vbk-brand-soft: rgba(77, 153, 150, .15);
    --vbk-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --vbk-shadow-lg: 0 22px 60px rgba(15, 23, 42, .12);
    --vbk-radius-xl: 24px;
    --vbk-radius-lg: 18px;
    --vbk-radius-md: 14px;
    --vbk-radius-sm: 10px;
    --vbk-sidebar-w: 470px;
    --vbk-nav-h: 60px;
    --vbk-transition: .28s ease;
}


html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}


body.help-body {
    margin: 0;
    overflow: hidden;
    color: var(--vbk-text);

    background:
        radial-gradient(
            circle at top left,
            rgba(22, 179, 172, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at right top,
            rgba(59, 130, 246, .08),
            transparent 24%
        ),
        var(--vbk-bg) !important;

    font-family:
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


.NavbarCustomeHelp {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* ============================================================
   NAVBAR
============================================================ */

.menu-help {
    flex: 0 0 auto;

    min-height: var(--vbk-nav-h);

    margin: 0 !important;
    padding: 10px 14px !important;

    display: flex !important;
    align-items: center;
    gap: 10px;

    list-style: none;

    background:
        rgb(30 109 117 / 21%) !important;

    border:
        1px solid rgba(255, 255, 255, .75) !important;

    border-radius: 20px !important;

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

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    position: relative;
    z-index: 3000;
}


.menu-help_li {
    display: flex;
    align-items: center;
    margin: 0 !important;
}


.menu-Button {
    width: 38px !important;
    height: 38px !important;

    padding: 0 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 14px !important;

    border:
        1px solid rgba(255, 255, 255, .70) !important;

    background:
        rgba(255, 255, 255, .88) !important;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, .07);

    cursor: pointer;

    transition:
        transform var(--vbk-transition),
        box-shadow var(--vbk-transition),
        border-color var(--vbk-transition);
}


.menu-Button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 12px 24px rgba(15, 23, 42, .10);

    border-color:
        rgba(22, 179, 172, .24) !important;
}


.menu-Button img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
}


.lang_div {
    min-width: 170px;
    height: 38px;

    display: flex !important;
    align-items: center;
    gap: 8px;

    border-radius: 14px;

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

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

    box-shadow:
        0 8px 20px rgba(15, 23, 42, .07);

    overflow: hidden;
}


.lang_icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.lang_icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
}


.select-style {
    width: 100%;
    height: 30px;

    border-radius: 10px !important;

    border:
        1px solid rgb(255 255 255 / 42%) !important;

    background:
        rgba(255, 255, 255, .24) !important;

    color:
        var(--vbk-text) !important;

    padding:
        0 40px !important;

    outline: none !important;
    box-shadow: none !important;

    font-size: 13px !important;

    text-align: center !important;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #6b7280 50%
        ),
        linear-gradient(
            135deg,
            #6b7280 50%,
            transparent 50%
        ) !important;

    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px) !important;

    background-size:
        6px 6px,
        6px 6px !important;

    background-repeat:
        no-repeat !important;
}


.select-style:focus,
.input-serach:focus {
    border-color:
        rgba(22, 179, 172, .55) !important;

    box-shadow:
        0 0 0 4px rgba(22, 179, 172, .12) !important;
}


.lang_div .select-style {
    height: 38px;

    border: 0 !important;

    background-color:
        transparent !important;

    min-width: 120px;

    padding-inline-start: 5px !important;
}


.log-in-menu {
    margin-inline-start: auto !important;

    min-width: 0;

    display: flex !important;
    align-items: center !important;
}


.help-legacy-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}


.image_log {
    max-height: 36px !important;

    width: auto !important;

    max-width:
        min(180px, 40vw);

    object-fit:
        contain !important;

    filter:
        drop-shadow(
            0 3px 10px rgba(0, 0, 0, .08)
        );
}


/* ============================================================
   MAIN LAYOUT
============================================================ */

.panel-container {
    flex: 1 1 0;

    min-height: 0;

    display: flex !important;
    align-items: stretch;

    gap: 0;

    padding:
        10px 14px 14px;

    background-color:
        transparent !important;

    overflow: hidden;
}


.panel-left,
.panel-right {
    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box;
}


.panel-left {
    position: relative;

    width:
        var(--vbk-sidebar-w);

    min-width: 320px;

    max-width: 700px;

    flex:
        0 0 var(--vbk-sidebar-w);

    display: flex;
    flex-direction: column;

    background:
        rgb(39 133 129);

    border:
        1px solid rgb(40, 108, 110);

    border-radius: 16px;

    overflow: hidden !important;

    z-index: 20;
}


.panel-right {
    flex: 1 1 auto;

    min-width: 0;

    display: flex;
    flex-direction: column;

    position: relative;

    background:
        rgb(39 133 129);

    border:
        1px solid rgb(40, 108, 110);

    border-radius: 16px;

    overflow: hidden;
}


.panel-right::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .32),
            transparent 120px
        );

    border-radius: inherit;

    z-index: 0;
}


.panel-right #content {
    flex: 1 1 0;

    width: 100%;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    position: relative;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .76),
            rgba(255, 255, 255, .95)
        );

    box-sizing: border-box;
}


/*
 * Keep the existing Razor Topic / Home content usable
 * during Stage 1. Topic styling will be reconstructed
 * from the legacy HTM files in the next stage.
 */
.panel-right .help-main {
    padding:
        28px clamp(18px, 4vw, 52px);
}


/* ============================================================
   SPLITTER
============================================================ */

.splitter {
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;

    flex: 0 0 10px !important;

    position: relative;

    background:
        transparent !important;

    cursor: col-resize !important;

    z-index: 25;
}


.splitter::before {
    content: "";

    position: absolute;

    top: 16px;
    bottom: 16px;
    left: 50%;

    width: 4px;

    transform:
        translateX(-50%);

    border-radius: 999px;

    background:
        rgba(22, 179, 172, .20);

    transition:
        .2s ease;
}


.splitter:hover::before,
.splitter.is-dragging::before {
    background:
        rgba(22, 179, 172, .42);

    box-shadow:
        0 0 0 6px
        rgba(22, 179, 172, .10);
}


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

.serach-div {
    flex: 0 0 auto;

    display: flex !important;
    align-items: center;

    gap: 8px;

    padding:
        14px 14px 8px !important;

    background:
        rgb(39 133 129);

    color: #d1d1d1;
}


.sarech_label {
    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .24) !important;

    border:
        1px solid
        rgb(255 255 255 / 42%) !important;

    margin: 0 !important;
}


.sarech_label img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
}


.input-serach {
    width: 100%;
    height: 42px;

    border-radius: 10px !important;

    border:
        1px solid
        rgb(255 255 255 / 42%) !important;

    background:
        rgba(255, 255, 255, .24) !important;

    color:
        #d1d1d1 !important;

    padding:
        0 12px !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    font-size:
        13px !important;

    text-align:
        center !important;
}


.input-serach::placeholder {
    color:
        #dbdbdb !important;

    opacity: 1;
}


.hr-sidebar {
    flex: 0 0 auto;

    margin:
        0 4px 2px !important;

    border:
        none !important;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(17, 24, 39, .10),
            transparent
        );
}


.categury_div {
    flex: 0 0 auto;

    padding:
        0 14px 12px !important;

    display:
        grid !important;

    gap:
        8px !important;
}


/* ============================================================
   NAVIGATION TREE
============================================================ */

#tabfigure,
.tabBlock {
    flex: 1 1 0;

    height: auto !important;
    min-height: 0 !important;

    margin:
        0 !important;

    padding:
        0 0 10px !important;

    border:
        none !important;

    background:
        transparent !important;

    overflow:
        hidden !important;
}


#tabBlock-content,
.tabBlock-content {
    height: 100%;

    padding:
        0 8px 12px 8px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    border:
        0 !important;

    background-color:
        #278581;

    -webkit-overflow-scrolling:
        touch;
}


.tabBlock-pane {
    width: 100%;

    min-height: 100%;

    position: relative;

    background-color:
        #278581;

    font-size:
        10px;
}


#tabBlock-content ul,
#tabBlock-content ol,
#tabBlock-content li {
    list-style:
        none !important;
}


#tabBlock-content .sub-menu {
    margin:
        4px 0 !important;

    border:
        1px solid
        rgba(17, 24, 39, .06);

    background:
        rgb(223 247 246);

    border-radius:
        14px;

    overflow:
        hidden;

    box-shadow:
        0 5px 16px
        rgba(15, 23, 42, .03);

    transition:
        box-shadow var(--vbk-transition),
        border-color var(--vbk-transition);
}


#tabBlock-content .sub-menu:hover {
    border-color:
        rgba(22, 179, 172, .20);

    box-shadow:
        0 10px 24px
        rgba(15, 23, 42, .07);
}


#tabBlock-content .sub-menu > a {
    min-height:
        44px !important;

    display:
        flex !important;

    align-items:
        center;

    gap:
        9px;

    padding:
        9px 12px !important;

    color:
        var(--vbk-text) !important;

    text-decoration:
        none !important;

    font-weight:
        700;

    font-size:
        13px !important;

    line-height:
        1.4;

    position:
        relative;
}


#tabBlock-content .sub-menu > a > img {
    width:
        25px !important;

    height:
        25px !important;

    flex:
        0 0 25px;

    object-fit:
        contain;
}


#tabBlock-content .sub-menu > a > span {
    flex:
        1 1 auto;

    min-width:
        0;

    word-break:
        break-word;
}


#tabBlock-content .sub-menu:not(.help-direct-topic)
    > a::after {

    content:
        "";

    width:
        8px;

    height:
        8px;

    border-right:
        2px solid #738197;

    border-bottom:
        2px solid #738197;

    transform:
        rotate(45deg);

    transition:
        transform var(--vbk-transition);

    margin-inline-start:
        6px;

    flex:
        0 0 8px;
}


#tabBlock-content .sub-menu.open
    > a::after {

    transform:
        rotate(-135deg);
}


#tabBlock-content .sub-menu
    > ul.sub {

    display:
        none;

    margin:
        0 !important;

    padding:
        0 7px 7px 7px !important;
}


#tabBlock-content .sub-menu.open
    > ul.sub {

    display:
        block;
}


#tabBlock-content .sub-menu
    > ul.sub
    > li {

    margin-top:
        6px !important;
}


#tabBlock-content .sub-menu
    > ul.sub
    > li
    > a {

    display:
        flex !important;

    align-items:
        flex-start;

    gap:
        8px;

    padding:
        9px 10px !important;

    border-radius:
        11px !important;

    text-decoration:
        none !important;

    background:
        rgb(255, 255, 255);

    border:
        1px solid
        rgba(95, 151, 167, .459);

    color:
        var(--vbk-text);

    font-size:
        12px !important;

    font-weight:
        600;

    line-height:
        1.35 !important;

    word-break:
        break-word;

    transition:
        background var(--vbk-transition),
        border-color var(--vbk-transition),
        transform var(--vbk-transition),
        box-shadow var(--vbk-transition);
}


#tabBlock-content .sub-menu
    > ul.sub
    > li
    > a:hover {

    background:
        #dfdfdf !important;

    border-color:
        rgb(62, 102, 117) !important;

    transform:
        translateX(2px);

    box-shadow:
        0 8px 18px
        rgba(15, 23, 42, .06);

    color:
        black;
}


html[dir="rtl"]
#tabBlock-content .sub-menu
    > ul.sub
    > li
    > a:hover {

    transform:
        translateX(-2px);
}


#tabBlock-content .sub-menu
    > ul.sub
    > li
    > a
    > img {

    width:
        24px !important;

    height:
        24px !important;

    flex:
        0 0 24px !important;

    margin-top:
        1px !important;
}


#tabBlock-content
.newpage.li_select {

    background:
        linear-gradient(
            180deg,
            rgba(157, 196, 193, .815),
            rgba(157, 196, 193, .815)
        ) !important;

    color:
        #000 !important;

    border-color:
        rgb(62, 102, 117) !important;

    box-shadow:
        0 8px 18px
        rgba(15, 23, 42, .06);
}


/* LinkedIn/direct topic cards do not need an extra submenu. */

#tabBlock-content
.help-direct-topic
> a {

    background:
        rgb(223 247 246);

    cursor:
        pointer;
}


#tabBlock-content
.help-direct-topic
> a:hover {

    background:
        rgb(207 238 237) !important;
}


#tabBlock-content
.help-direct-topic
> a.li_select {

    background:
        linear-gradient(
            180deg,
            rgba(157, 196, 193, .815),
            rgba(157, 196, 193, .815)
        ) !important;
}


.none-display {
    display:
        none !important;
}


[hidden] {
    display:
        none !important;
}


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

#tabBlock-content,
.tabBlock-content,
#content {
    scrollbar-width:
        thin;

    scrollbar-color:
        rgb(140, 191, 189)
        transparent;
}


#tabBlock-content::-webkit-scrollbar,
#content::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}


#tabBlock-content::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb {
    background:
        rgb(140, 191, 189);

    border-radius:
        10px;
}


/* ============================================================
   DESKTOP SIDEBAR COLLAPSE
============================================================ */

@media (min-width: 769px) {

    body.sidebar-collapsed
    .panel-left {

        display:
            none !important;
    }


    body.sidebar-collapsed
    .splitter {

        display:
            none !important;
    }


    body.sidebar-collapsed
    .panel-right {

        width:
            100% !important;

        max-width:
            100% !important;

        flex:
            1 1 100% !important;
    }
}


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

@media (max-width: 768px) {

    :root {
        --vbk-nav-h:
            60px;
    }


    .menu-help {
        border-radius:
            0 0 18px 18px !important;

        padding:
            10px !important;
    }


    .lang_div {
        min-width:
            145px;
    }


    .image_log {
        max-width:
            120px;
    }


    .panel-container {
        padding:
            0 !important;
    }


    .splitter {
        display:
            none !important;
    }


    .panel-right {
        width:
            100vw !important;

        max-width:
            100vw !important;

        flex:
            1 1 100% !important;

        border:
            0;

        border-radius:
            0;
    }


    .panel-right .help-main {
        padding:
            18px 12px 30px;
    }


    .panel-left {
        position:
            fixed !important;

        top:
            calc(
                var(--vbk-nav-h) + 14px
            ) !important;

        left:
            0 !important;

        right:
            0 !important;

        bottom:
            0 !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        height:
            auto !important;

        z-index:
            4000 !important;

        margin:
            0 !important;

        border-radius:
            18px !important;

        display:
            flex !important;

        transform:
            translateX(0);

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transition:
            transform .25s ease,
            opacity .25s ease,
            visibility .25s ease;
    }


    body.sidebar-collapsed
    .panel-left {

        transform:
            translateX(
                calc(-100% - 20px)
            ) !important;

        opacity:
            0 !important;

        visibility:
            hidden !important;

        pointer-events:
            none !important;
    }


    html[dir="rtl"]
    body.sidebar-collapsed
    .panel-left {

        transform:
            translateX(
                calc(100% + 20px)
            ) !important;
    }


    body:not(.sidebar-collapsed)
    .panel-left {

        transform:
            translateX(0) !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;
    }
}