/* ============================================
БАЗОВЫЙ КАРКАС ПРОЕКТА
Версия: 1.2
============================================ */



* {
    touch-action: manipulation;
}

body {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    margin: 0 auto;
    padding: var(--spacing-sm);
    font-family: 'Lato', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--text-primary);
    background-color: var(--bg-page);
}
main {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    align-items: stretch;
}

/* ---------- АДАПТАЦИЯ ---------- */
@media (max-width: 1280px) {
    body {
        font-size: 0.8rem;
    }
}




/* ---------- БАЗОВЫЕ КОНТЕЙНЕРЫ ---------- */
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.column {
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.page-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
}


/* Адаптивные модификаторы (md:row и md:column)*/
@media (min-width: 768px) {
    .md\:row {
        flex-direction: row;
        flex-wrap: wrap;
    }
}



/* Слоенный контейнер */

.first-box-tabs {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    justify-content: flex-start;
    padding-left: 80px;
}

.first-box-content {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    z-index: 1; 
}

.second-contaner {
    margin-top: var(--spacing-sm);
}
.second-box-tabs {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    justify-content: flex-start;
    padding-left: 100px;
}
.second-box-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--spacing-md);
    z-index: 1;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.contaner-title {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0px var(--spacing-sm);
}


.container-for-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-md);
    border-radius: var(--radius-md);
    background-color: var(--bg-light);
}


/* ---------- РАЗДЕЛИТЕЛЬ ---------- */
.divider {
    height: 0.0625rem;
    width: 60%;
    margin: var(--spacing-xs) auto;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        var(--gray-500) 20%, 
        var(--gray-500) 80%, 
        transparent 100%
    );
    box-shadow: 0 0 10px rgba(196, 78, 78, 0.3);
}








/* ---------- ПОДЛОЖКА (УНИВЕРСАЛЬНЫЙ БЛОК) ---------- */

.block {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    background-color: var(--white);
    box-shadow: var(--shadow-out);
    min-width: 250px;
    max-width: 250px;
    align-items: center;
    justify-content: space-between;
    flex: 0 1 250px;
    position: relative;
    padding: var(--spacing-md) 0px;
}
.block-second {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md) var(--spacing-sm);
    border-radius: var(--radius-md);
    background-color: var(--white);
    box-shadow: var(--shadow-out);
    min-width: 250px;
    max-width: 250px;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--spacing-xs);
    font-size: 0.7rem;
}
.block-wraper {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
.block-second p {
    font-size: 0.8rem;
    font-weight: 600;
}


.block-info-box {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    font-size: 0.75rem;
    margin-top: var(--spacing-sm);
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm);
    position: relative;
}
/* Вертикальная линия посередине */
.block-info-box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background-color: var(--color-block-dark);
    transform: translateX(-50%);
}
.block-info-box > div:nth-child(even) {
    padding-left: 16px;
}


.block-info-box-2 {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    font-size: 0.75rem;
    gap: var(--spacing-xs);
    width: 100%;
}
.block-info-box-row {
    display: flex; 
    justify-content: space-between;
    gap: var(--spacing-xs);
}
.block-info-note {
    font-size: 0.7rem; 
    color: var(--color-text-2); 
    margin-top: 5px;
}






.block-free {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    background-color: var(--white);
    box-shadow: var(--shadow-out);
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: var(--spacing-md);
}




.block-gray {
    display: flex;
    flex-direction: row;
    border-radius: var(--radius-md);
    background-color: var(--gray-300);
    box-shadow: var(--shadow-out);
    padding: var(--spacing-sm);
}
.block-white {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    background-color: var(--white);
    box-shadow: var(--shadow-out);
    padding: var(--spacing-md) var(--spacing-sm);
    min-width: 340px;
    gap: var(--spacing-xs);
}


/* ЛИНИЯ ----------- */


.line-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: var(--spacing-sm) 0;
    gap: var(--spacing-xs);
}
.line-container p {
    font-size: 0.6rem;
}

.all-company-card-line {
    height: 6px; 
    background: #e9ecef; 
    overflow: hidden;
    border-radius: var(--radius-md);
}

.line-dote {
    display: flex; 
    justify-content: space-between; 
    margin-top: 5px; 
    padding-top: 10px; 
    border-top: 1px dashed #dee2e6; 
    font-size: 12px; 
    color: #666;
}








/* ИКОНКИ -------- */

.card-icon-svg {
    color: var(--white);
    width: 20px;
    height: auto;
}



.all-company-card-icon {
    position: absolute; 
    top: -5px; 
    right: -5px; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px;
}











.analitics-all-efficiency-line {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-white); 
    font-size: 0.7rem; 
    border-radius: var(--radius-xs);
}

.analitics-all-stroke {
    display: flex; 
    justify-content: space-between;
    font-size: 0.8rem;
}
.analitics-all-stroke-line {
    display: flex; 
    justify-content: space-between;
    border-top: 1px solid #dee2e6; 
    margin-top: 6px; 
    padding-top: 8px;
}



.analitics-all-card-inside {
    margin-top: 10px; 
    margin-bottom: 10px;
    padding: 12px 10px; 
    background: var(--color-blue-light); 
    font-size: 0.8rem;
    text-align: center;
}






.grafic-container {
    margin-top: var(--spacing-sm);
    background: var(--white); 
    border-radius: var(--radius-md); 
    padding: var(--spacing-md); 
    border: var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}





/* Быстрая статистика */
.quick-stats-container {
    grid-column: 1 / -1;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.quick-stats {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    background-color: var(--white);
    box-shadow: var(--shadow-out);
    min-width: 150px;
    max-width: 250px;
    align-items: center;
    justify-content: space-between;
    flex: 0 1 250px;
    position: relative;
    padding: var(--spacing-md) var(--spacing-xs);
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--color-success);
}
.stat-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}







/* ---------- БЕЙДЖ ---------- */
.badge {
    position: absolute;
    top: -0.625rem;
    left: 1.25rem;
    display: inline-block;
    padding: 0.5rem 0.625rem;
    border-radius: 1.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--white);
    z-index: 100;
}

/* Цвета */
.badge--success {
    background: var(--color-success);
}
.badge--danger {
    background: var(--color-danger);
}
.badge--warning {
    background: var(--color-warning);
}
.badge--info {
    background: var(--color-info);
}

/* Позиции */
.badge--right {
    left: auto;
    right: 1.25rem;
}
.badge--bottom {
    top: auto;
    bottom: -0.625rem;
}

/* Размеры */
.badge--sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.5rem;
}
.badge--lg {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
}





/* ============================================
КОМПОНЕНТ: СЕТКА И УТИЛИТЫ
Версия: 1.1
============================================ */

.flex { display: flex; }

/* ---------- ВЫРАВНИВАНИЕ ---------- */
.just-start { justify-content: flex-start; }
.just-center { justify-content: center; }
.just-end { justify-content: flex-end; }
.just-between { justify-content: space-between; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

.center {justify-content: center; align-items: center;}


/* ---------- ОТСТУПЫ MARGIN ---------- */
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

/* ---------- ОТСТУПЫ PADDING ---------- */
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

.p-lr { padding: 0px var(--spacing-sm); }

/* ---------- GAP ---------- */
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }

/* ---------- ТЕКСТ ---------- */
.text-color-base { color: var(--text-primary); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.nowrap {white-space: nowrap;}

/* ---------- ШИРИНА ---------- */
.w-full {min-width: 100%; max-width: 100%; width: 100%;}
.w-text {min-width: 200px; max-width: 840px; width: 100%;}
.w-40 { width: 2.5rem; }  /* 40px */
.flex-1 { flex: 1; }


.block-sm {max-width: 240px; min-width: 240px;}
.block-md {max-width: 340px; min-width: 340px;}
.block-lg {max-width: 380px; min-width: 380px;}

/* ---------- ВЫСОТА ---------- */
.h-full { height: 100vh; }

.h-sm { max-height: 17.5rem; }      /* 280px */
.h-md { max-height: 26.25rem; }     /* 420px */
.h-lg { max-height: 40rem; }        /* 640px */
.h-au { max-height: auto; }  

.scrol { overflow-y: auto; overflow-x: hidden; }

/* ---------- ПОЗИЦИЯ ---------- */
.relative { position: relative; }
.z-index { z-index: 50; }

/* ---------- ИКОНКИ---------- */
.icon-xs { width: 16px; height: auto; }
.icon-sm { width: 24px; height: auto; }
.icon-md { width: 30px; height: auto; }
.icon-lg { width: 40px; height: auto; }



@media (max-width: 768px) {

    /* ----------СКРЫТЬ БЛОК НА МОБИЛЬНОМ---------- */
    .hide-mobile { display: none; }
}