/*==================================================
    DOCUMENTS
==================================================*/
.documents-section{
    background:linear-gradient(180deg,#f8f9fc 0%,#f4f6fa 100%);
    padding:28px 18px 40px;
}

/*==================================================
    Контейнер
==================================================*/
:root{
    --header-height:100px;
}

.container2{
    max-width:1820px;
    width:100%;
    padding:0 20px;
    margin:var(--header-height) auto 0;

    display:grid;

    grid-template-columns:210px minmax(0,1fr);

    gap:18px;

    min-height:calc(100vh - var(--header-height));
}


/*==================================================
    Левая панель
==================================================*/
.left{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    overflow-y:auto;
    background:#ffffff;
    border:1px solid #e8edf3;
    border-radius:18px;
    box-shadow:
        0 10px 28px rgba(22,34,60,.06);
}

/*==================================================
    Правая панель
==================================================*/
.right{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #e8edf3;
    border-radius:18px;
    box-shadow:
        0 10px 28px rgba(22,34,60,.06);
}

/*==================================================
    Заголовок панели
==================================================*/
.documents-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 18px 16px;
    font-size:18px;
    font-weight:700;
    color:#17365d;
    background:#fbfcfe;
    border-bottom:1px solid #edf2f7;
    position:sticky;
    top:0;
    z-index:5;
}

/*==================================================
    Заголовки разделов
==================================================*/
.section-title{
    margin:18px 18px 10px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:#9aa8bc;
}

/*==================================================
    Разделитель
==================================================*/
.menu-divider{
    height:1px;
    margin:12px 18px;
    background:#edf2f6;
}

/*==================================================
    Скролл
==================================================*/
.left::-webkit-scrollbar{
    width:8px;
}

.left::-webkit-scrollbar-track{
    background:transparent;
}

.left::-webkit-scrollbar-thumb{
    background:#c8d2df;
    border-radius:20px;
}

.left::-webkit-scrollbar-thumb:hover{
    background:#aebccc;
}

/*==================================================
    MENU
==================================================*/
.menu-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    margin:4px 10px;
    padding:11px 14px 11px 18px;
    min-height:46px;
    border-radius:10px;
    background:transparent;
    border:none;
    color:#314564;
    font-size:15px;
    font-weight:500;
    line-height:1.35;
    cursor:pointer;
    user-select:none;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

/*==================================================
    Золотая полоса
==================================================*/
.menu-item::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    bottom:9px;
    width:3px;
    border-radius:20px;
    background:transparent;
    transition:.25s;
}

/*==================================================
    Hover
==================================================*/
.menu-item:hover{
    background:#f7f9fc;
    color:#17365d;
    transform:translateX(3px);
}

.menu-item:hover::before{
    background:#c79b43;
}

/*==================================================
    Active
==================================================*/
.menu-item.active{
    background:#eef5ff;
    color:#17365d;
    font-weight:600;
}

.menu-item.active::before{
    background:#c79b43;
}

/*==================================================
    Иконки
==================================================*/
.menu-item svg{
    width:17px;
    height:17px;
    flex-shrink:0;
    opacity:.8;
    transition:.25s;
}

.menu-item:hover svg{
    opacity:1;
    transform:scale(1.08);
}

.menu-item.active svg{
    opacity:1;
}

/*==================================================
    Текст
==================================================*/
.menu-item span{
    flex:1;
}

/*==================================================
    Маленькое описание
==================================================*/
.menu-small{
    display:block;
    margin-top:2px;
    font-size:12px;
    color:#8b97aa;
    line-height:1.3;
}

.menu-item.active .menu-small{
    color:#6883a6;
}

/*==================================================
    Разделы
==================================================*/
.section-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin:18px 16px 8px;
    padding-bottom:6px;
    border-bottom:1px solid #edf2f7;
}

/*==================================================
    Последний пункт
==================================================*/
.menu-item:last-child{
    margin-bottom:16px;
}

/*==================================================
    Анимация появления
==================================================*/
.menu-item{
    animation:menuFade .35s ease both;
}

@keyframes menuFade{
    from{
        opacity:0;
        transform:translateY(6px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/*==================================================
    PDF Viewer
==================================================*/
#pdfFrame{
    flex:1;
    width:100%;
    height:100%;
    border:none;
    background:#ffffff;
    border-radius:16px;
    transition:opacity .3s ease;
}

/*==================================================
    Правая панель
==================================================*/
.right{
    min-height:700px;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #e8edf3;
    border-radius:18px;
    box-shadow:
        0 10px 28px rgba(22,34,60,.06);
}

/*==================================================
    Hover панели
==================================================*/
.left:hover,
.right:hover{
    box-shadow:
        0 14px 36px rgba(22,34,60,.09);
}

/*==================================================
    Focus
==================================================*/
.left:focus-within,
.right:focus-within{
    border-color:#d6b36b;
    box-shadow:
        0 0 0 4px rgba(199,155,67,.08),
        0 14px 36px rgba(22,34,60,.10);
}

/*==================================================
    Fade
==================================================*/
.right{
    animation:fadeIn .45s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/*==================================================
    Tablet
==================================================*/
@media (max-width:1200px){
    .container2{
        grid-template-columns:220px minmax(0,1fr);
        gap:18px;
    }
}

/*==================================================
    iPad
==================================================*/
@media (max-width:992px){
    .container2{
        grid-template-columns:1fr;
        gap:18px;
    }
    .left{
        max-height:320px;
    }
    .right{
        min-height:70vh;
    }
}

/*==================================================
    Mobile
==================================================*/
@media (max-width:768px){

    .documents-section{
        padding:18px 12px 28px;
    }

    .documents-title{
        font-size:17px;
        padding:16px;
    }

    .section-title{
        margin:14px 14px 6px;
        font-size:11px;
    }

    .menu-item{
        margin:3px 8px;
        padding:10px 12px 10px 16px;
        font-size:14px;
        min-height:42px;
    }

    .right{
        min-height:65vh;
    }
}

/*==================================================
    Small Mobile
==================================================*/
@media (max-width:480px){

    .container2{
        gap:14px;
    }

    .left{
        border-radius:14px;
    }

    .right{
        border-radius:14px;
    }

    .menu-item{
        font-size:13px;
        min-height:40px;
    }
}

/*==================================================
    Scrollbar
==================================================*/

.left{
    scrollbar-width:thin;
    scrollbar-color:#c5cedb transparent;
}

/*==================================================
    Selection
==================================================*/
.menu-item::selection{
    background:#d6b36b;
    color:#ffffff;
}

/*==================================================
    Reduced Motion
==================================================*/
@media (prefers-reduced-motion:reduce){
    *{
        animation:none !important;
        transition:none !important;
    }
}