/* ===== СТИЛИ ДЛЯ ВЕРСИИ 2 (TAILWIND CSS) ===== */


/* Основные стили */
html {
    scroll-behavior: smooth;
}

/* Safari-specific fixes для Tailwind классов */
@supports (-webkit-appearance: none) {
    /* Автоматически добавит webkit-префиксы к Tailwind классам */
    /* Эти стили будут заменены Autoprefixer'ом */
}

/* Убираем глобальные стили body, чтобы не конфликтовать с Tailwind */

/* Предотвращение CLS - фиксированные размеры для критических элементов */
/* Убираем глобальные стили заголовков, чтобы не конфликтовать с Tailwind */

/* Предотвращение CLS для изображений и иконок */
img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Контейнер для блоков - такая же ширина как у основного контейнера */
#blocks-container {
    max-width: 56rem; /* max-w-4xl */
    margin: 0 auto;
    /* Убираем padding, так как он уже есть у родительского контейнера */
}

/* DISC Test Block - фиксированная ширина и центрирование */
.disc-test-block {
    width: 550px;
    max-width: 550px;
    margin: 0 auto;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
    .disc-test-block {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 16px;
    }
}

/* Уменьшенный gap для маленьких экранов */
@media (max-width: 640px) {
    .disc-test-block .disc-test-grid {
        gap: 1rem !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Уменьшенный gap для очень маленьких экранов */
@media (max-width: 435px) {
    .disc-test-block .disc-test-grid {
        gap: 1rem !important;
        grid-template-columns: 1fr 1fr !important;
    }
}
.disc-test-block {
    padding: 0;
}

/* Перенос слов в кнопках для узких экранов */
@media (max-width: 640px) {
    .disc-test-block button {
        min-width: 170px;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
        font-size: 0.875rem !important; /* 14px вместо 16px */
    }
    
    /* Фиксированная ширина для кнопки управления */
    .disc-test-block button[data-role="next-block"] {
        width: 140px !important;
        min-width: 140px !important;
    }
    
    /* Уменьшение шрифта заголовков h4 на маленьких экранах */
    .disc-test-block h4 {
        font-size: 0.875rem !important; /* 14px вместо 18px */
        line-height: 1.25;
    }
    
    /* Выравнивание кнопок по правому краю во втором блоке */
    .disc-test-block .disc-test-grid > div:nth-child(2) .space-y-4 {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    
    /* Отступы для контейнера блоков */
    #blocks-container > div > div > div > div > div {
        padding: 12px !important;
    }

    /* Уменьшение gap между столбцами */
    #blocks-container > div > div > div > div > div > div {
        gap: 0.5rem !important;
    }
}

@media (max-width: 430px) {
    /* Дополнительные стили только для очень маленьких экранов */
    .disc-test-block button {
        min-width: 150px; /* Еще меньше для очень маленьких экранов */
    }
    
    /* Фиксированная ширина для кнопки управления на очень маленьких экранах */
    .disc-test-block button[data-role="next-block"] {
        width: 120px !important;
        min-width: 120px !important;
    }
}
@media (max-width: 395px) {
    .disc-test-block button {
        font-size: 0.8125rem !important; /* 13px для очень маленьких экранов */
    }
}

/* Контроль размера кнопки Telegram decode */
/* На больших экранах (640px+) - ограничиваем размер */
@media (min-width: 640px) {
    #telegram-decode-btn {
        min-width: 120px;
        max-width: 200px;
    }
}
/* Стили для блоков с прилагательными - теперь управляются через Tailwind */
/* См. web/css/tailwind.css для .word-block, .word-item, .selected-more, .selected-less */

/* Таблица результатов - теперь управляется через Tailwind */
/* См. web/css/tailwind.css для .disc-results-table */

/* Стили для графиков DISC */
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.custom-label {
    font-size: 12px;
}

.axis-title {
    font-size: 14px;
    font-weight: bold;
    text-anchor: middle;
}

.dashed-line {
    stroke: black;
    stroke-dasharray: 5, 5;
}

.blue-line {
    fill: none;
    stroke: var(--color-chart-1);
    stroke-width: 2.5;
}


/* .point-circle - теперь управляется через Tailwind */
/* См. web/css/tailwind.css для .point-circle */

/* Контейнеры графиков */
.chart-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.chart-wrapper {
    flex: 1;
    min-width: 0;
    max-width: 300px;
}

.chart-wrapper svg {
    width: 100%;
    height: auto;
    aspect-ratio: 0.6;
}

/* Адаптивность для графиков DISC - масштабирование на узких экранах */
@media (max-width: 1279px) {
    /* Контейнер графиков остается в одну линию */
    #discGraph > div {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    /* Масштабирование wrapper'ов графиков */
    .chart-wrapper {
        flex: 1;
        min-width: 0;
        max-width: 200px;
        transform: scale(0.9);
        transform-origin: center;
    }
    
    /* Уменьшение отступов для экономии места */
    .chart-wrapper {
        padding: 0.5rem !important;
    }
    
    /* Уменьшение gap между графиками */
    #discGraph > div {
        gap: 0.1rem !important;
    }
}

@media (max-width: 768px) {
    /* Дополнительное масштабирование для мобильных */
    .chart-wrapper {
        transform: scale(0.9);
    }
    
    .chart-wrapper h4 {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Уменьшение расстояния между графиками на маленьких экранах */
    #discGraph > div {
        gap: 0.05rem !important;
    }
    
    .chart-wrapper {
        padding: 0.25rem !important;
    }
}

@media (max-width: 600px) {
    /* Дополнительное уменьшение расстояния для средних мобильных экранов */
    #discGraph > div {
        gap: 0.025rem !important;
    }
    
    .chart-wrapper {
        padding: 0.125rem !important;
    }
}

@media (max-width: 480px) {
    /* Максимальное сжатие для очень маленьких экранов */
 
    
    .chart-wrapper h4 {
        font-size: 0.625rem !important;
    }
    
    /* Минимальное расстояние между графиками */
    #discGraph > div {
        gap: 0 !important;
    }
    
    .chart-wrapper {
        padding: 0.125rem !important;
    }
}

/* Адаптивность */
@media screen and (max-width: 950px) {
    .word-block {
        padding: 15px;
        min-height: 80px;
    }
    
    .word-item {
        padding: 8px;
        min-height: 36px;
    }
    
    .disc-results-table th,
    .disc-results-table td {
        padding: 12px 8px;
        font-size: 14px;
        min-height: 44px;
    }
}

@media screen and (max-width: 640px) {
    .disc-results-table {
        font-size: 13px;
    }
    
    .disc-results-table th,
    .disc-results-table td {
        padding: 10px 5px;
        min-height: 40px;
    }
    
    .disc-results-table th {
        font-size: 12px;
    }
}

@media screen and (max-width: 360px) {
    .disc-results-table th,
    .disc-results-table td {
        padding: 8px 4px;
        font-size: 12px;
        min-height: 36px;
    }
}

/* ===== СТИЛИ ДЛЯ АНАЛИЗА DISC-ПРОФИЛЯ ===== */

/* Основной контейнер анализа */
.analysis-container {
    max-width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #374151;
}

/* Заголовок анализа */
.analysis-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 2rem 0;
    text-align: center;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 1rem;
}

/* Секции анализа */
.analysis-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Текст анализа */
.analysis-section p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #4b5563;
}

.analysis-section p:last-child {
    margin-bottom: 0;
}

/* Выделение факторов */
.factor-name {
    font-weight: 700;
}

.factor-highlight {
    color: #1d4ed8;
    font-weight: 700;
    background: #dbeafe;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Списки факторов */
.factor-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.factor-list li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.factor-list li:last-child {
    margin-bottom: 0;
}


/* Блоки выводов */
.conclusion-box {
    background: #f8fafc;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
}

.conclusion-box p {
    margin: 0;
    font-weight: 500;
    color: #374151;
}

/* Списки рекомендаций */
.recommendations-list,
.development-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommendations-list li,
.development-list li {
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.recommendations-list li:last-child,
.development-list li:last-child {
    margin-bottom: 0;
}


/* Адаптивность */
@media (max-width: 768px) {
    .analysis-title {
        font-size: 1.5rem;
    }
    
    .section-title {
        font-size: 1.125rem;
    }
    
    .analysis-section {
        padding: 1rem;
    }
    
    
    .conclusion-box {
        padding: 0.75rem;
    }
    
    .recommendations-list li,
    .development-list li {
        padding: 0.25rem 0;
    }
    
}

@media (max-width: 480px) {
    .analysis-container {
        margin: 0;
        padding: 0;
    }
    
    .analysis-section {
        margin-bottom: 1.5rem;
        border-radius: 6px;
        padding: 0.75rem;
    }
    
    .factor-list li {
        font-size: 0.9rem;
    }
    
}