/* Base Styles */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

html, body {
    height: 100%;
}

/* Header Styles */
header{
    background:#022950;
    padding:1rem;
    display:flex;
    align-items:center;      /* вертикальная центровка */
    justify-content:space-between;
}
.header-title{
    color:#fff;
    font-size:calc(1rem + 2vw);
    margin-left:1rem;
}
.header-datetime{
    color:#fff;
    margin-left:auto;
    font-size:calc(1rem + 2vw);
}


header img {
    height: 80px;
    margin-right: 1rem;
}


text {
    font-size: calc(1rem + 2vw);
    color: #ffffff;
    margin-left: 1rem;
}

/* Main Container Layout */
.container {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 180px); /* Adjust this if needed */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* Left Sidebar - Keep its own scrollbar */

.left_side {

    width: 260px;

    min-width: 260px;

    padding: 1rem;

    background: #f5f5f5;

    overflow-y: auto;

    box-sizing: border-box;

    height: 100%;

    

    /* Different colored scrollbar to distinguish */

    scrollbar-width: thin;

    scrollbar-color: #666 #f1f1f1;

}



.left_side::-webkit-scrollbar-thumb {

    background-color: #666;

}



.footer-info {

    margin-top: 2rem;

    font-size: 0.85rem;

    color: #333;

}



.menu {

    background: #C9C9C9;

    border-radius: 4px;

    margin-bottom: 1rem;

}



.menu-left {

    padding: 0;

    margin: 0;

    list-style: none;

}



.menu-left li {

    padding: 0.8rem 1rem;

    font-size: 0.9rem;

    transition: all 0.3s ease;

}



.menu-left li:hover {

    background: #022950;

}



.menu-left li:hover a {

    color: #ffffff;

}



.menu-left a {

    color: #000000;

    text-decoration: none;

    display: block;

}



/* Right Content Area */

.right_side {

    flex: 1 1 0;

    padding: 1rem;

    flex-direction: column;

    min-width: 0; /* Allows content to shrink */

    box-sizing: border-box;

    overflow-y:auto;


    /* Custom scrollbar */

    scrollbar-width: thin; /* For Firefox */

    scrollbar-color: #022950 #f1f1f1; /* For Firefox */

    height:calc(100vh - 140px); /* 140px ? высота header + наружные отступы;
                                   подберите, чтобы точно попадало */
}



.right_side::-webkit-scrollbar{
    width:10px;
}



.right_side::-webkit-scrollbar-track {

    background: #f1f1f1; /* Color of the tracking area */

    border-radius: 5px;

}



.right_side::-webkit-scrollbar-thumb {

    background-color: #022950; /* Color of the scroll thumb */

    border-radius: 5px; /* Roundness of the scroll thumb */

    border: 2px solid #f1f1f1; /* Creates padding around scroll thumb */

}



.right_side::-webkit-scrollbar-thumb:hover {

    background-color: #011a38; /* Darker color on hover */

}

/* --- Обёртка для диаграммы + фона --- */
.canvas-container {
    position: relative;
    z-index: 1;
}

.right-bg{
    /* вместо высоты 100% делаем "авто", но ограничиваем: */
    height: 650px;
    position:relative;
    overflow:auto;            /* если видео выше - появится собственный скролл */
    display:flex;
    flex-direction:column;
    align-items:center;       /* центр по горизонтали для .sw */
}
.bg-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;       /* ПОЛНОСТЬЮ видно целиком, без обрезки */
    z-index:0;
    pointer-events:none;
}
/* всё, что поверх видео */
.right-bg>*:not(.bg-video){
    position:relative;
    z-index:1;
}

/* ---------- КНОПКИ sw ---------- */

.sw{
    background: rgba(255, 255, 255, .6);
    border: 1px solid #000;
    border-radius: 4px;
    margin: .5rem 1% 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;

    width: 800px;    /* для единообразия */
}
.sw:hover{background:rgba(255,255,255,.8);}
.sw.active{
    background:rgba(255,255,255,.9);
    box-shadow:0 0 10px rgba(0,0,0,.4);
    font-weight:bold;
}
.sw-box {
    margin-top: auto;      /* прижать вниз */
    width: 100%;
    display: flex;
    flex-direction: column; /* столбик */
    align-items: center;    /* по центру горизонтали */
    gap: 0.5rem;            /* расстояние между кнопками */
    padding-bottom: 0.5rem; /* отступ снизу */
}


.canvas {

    flex: 1;

    min-width: 250px;

}

.canvas-holder{
    display:flex;
    justify-content:center;  /* по центру по ширине */
    margin-bottom:1rem;
}

.canvas-holder,
.canvas{
    background:transparent;
}

.chart {
    width: 100%;
    height: auto;
    max-height: 200px;
}

.chart text {
    font-family: Times New Roman;
    font-size: 6px !important;
}

.info-text{
    flex:2 1 250px;          /* растягивается, но не меньше 250?px */
    padding:1rem;
    border-radius:4px;

    /* фон убираем, чтобы просвечивалось видео */
    background:transparent;

    /* выравнивание по центру */
    display:flex;
    flex-direction:column;
    align-items:center;      /* по горизонтали */
    justify-content:center;  /* по вертикали */
    text-align:center;
}
.info-text p{
    font-size:1.1rem;
    margin:.3rem 0;
}


.window {

    margin: 0.5rem 0;

    border: 1px solid #022950;

    border-radius: 4px;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.tab-container {

    display: flex;

    flex-direction: column;

    height: 100%;

}



/* Prevent horizontal scroll on tabs */

.tab-header::-webkit-scrollbar {

    display: none; /* Hide scrollbar */

}



.tab-header {

    display: flex;

    background: #f3f3f3;

    border-bottom: 1px solid #ddd;

    padding-left: 4px;

    overflow-x: auto; /* Allow horizontal scroll only when needed */

    scrollbar-width: none; /* Hide scrollbar */

}



.tab {

    padding: 8px 16px;

    margin-right: 2px;

    border: 1px solid #ddd;

    border-bottom: none;

    border-radius: 4px 4px 0 0;

    background-color: #C9C9C9;

    cursor: pointer;

    font-size: 13px;

    height: 36px;

    display: flex;

    align-items: center;

    margin-top: 4px;

    transition: all 0.2s ease;

}



.tab-content-container {

    flex: 1;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.tab-content {

    flex: 1;

    width: 100%;

    height: 100%;

    box-sizing: border-box;

    padding: 1rem;

    overflow: auto;

    display: none;

}



.tab-content.active {

    display: block;

}



* Tab Content Scrollbar - More subtle */

.tab-content::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



.tab-content::-webkit-scrollbar-thumb {

    background-color: rgba(2, 41, 80, 0.5);

}



.tab-content table {

    width: 100%;

    min-width: 600px; /* Minimum table width before scrolling */

    border-collapse: collapse;

}



.tab-content .table-container {

    width: 100%;

    overflow-x: auto;

    margin-bottom: 1rem;

    -webkit-overflow-scrolling: touch;

    max-height: calc(100% - 2rem); /* Account for padding */

}



.tab-content.active {

    display: block;

}



/* Table Styles */

.table-container {

    width: 100%;

    overflow-x: auto;

    margin-bottom: 1rem;

    -webkit-overflow-scrolling: touch;

}



table {

    width: 100%;

    border-collapse: collapse;

    font-size: 14px;

}



th, td {

    padding: 10px 12px;

    border: 1px solid #ddd;

    text-align: left;

}



th {

    background-color: #022950;

    color: white;

    position: sticky;

    top: 0;

}



tr:nth-child(even) {

    background-color: #f9f9f9;

}



.fp {

    margin: 5px 0;

}



/* Loading States */

.loading {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    font-size: 1.2rem;

    color: #666;

}



.error {

    color: red;

    padding: 1rem;

}



/* Scrollbar Styling */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-thumb {

    background: #022950;

    border-radius: 4px;

}



::-webkit-scrollbar-track {

    background: #f1f1f1;

}



/* ———  <=1024?px  ——— */
@media (max-width: 1024px){
    .left_side{
        flex:0 0 220px;           /* Slightly narrower sidebar */
    }
}

/* ———  <=992?px  ——— */
@media (max-width: 992px){
    .container{
        flex-direction:column;
        height:auto;
        overflow:visible;
    }

    .left_side,
    .right_side{
        width:100%;
        height:auto;
        overflow-y:visible;
        scrollbar-width:auto;
    }
    .right_side::-webkit-scrollbar,
    .left_side::-webkit-scrollbar{
        width:8px;
        height:8px;
    }

    .left_side{
        min-width:100%;
        order:1;
    }
    .right_side{
        order:2;
    }

    .window{min-height:400px;}

    .tab-header{
        flex-wrap:wrap;
        overflow-x:hidden;
    }
}

/* ———  <=768?px  ——— */
@media (max-width: 768px){
    .container{
        flex-direction:column;
        height:auto;
    }

    /* ЛЕВАЯ КОЛОНКА становится flex?контейнером,
       а footer-info уйдёт в самый низ */
    .left_side{
        position:static;
        width:100%;
        flex:none;
        order:2;                  /* ниже правой колонки */
        padding:0.5rem;

        display:flex;             /*   < ДОБАВЛЕНО  */
        flex-direction:column;    /*   < ДОБАВЛЕНО  */
    }
    .footer-info{
        margin-top:auto;          /* прибили к низу */
    }

    .right_side{
        order:1;
        padding:0.5rem;
    }

    header{
        flex-direction:column;
        text-align:center;
        padding:0.5rem;
    }
    header img{
        margin:0 auto 0.5rem;
        height:60px;
    }
    text{
        margin-left:0;
        font-size:calc(1rem + 1.5vw);
    }

    .tab-header{
        flex-direction:column;
        flex-wrap:wrap;           /* Allow tabs to wrap on small screens */
        white-space:normal;
        padding-left:0;
    }
    .tab{
        flex:1 0 120px;
        min-width:120px;
        width:100%;
        margin-right:0;
        margin-top:0;
        border-radius:0;
        border-left:none;
        border-right:none;
    }
    .window{min-height:200px;}

    .info-text p{font-size:0.9rem;}
}

.sw.active {
    background-color: #d0e4ff; /* нежно-синий или выбери свой */
    color: #000000;
    font-weight: bold;
}
.tab.active{
    background:#004080;
    color:#fff;
    font-weight:bold;
}