/* ===== ОСТАЛЬНЫЕ КОМПОНЕНТЫ И СТИЛИ ===== */

/* Дополнительные анимации и закрытие модальных окон */
@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #6b7280;
}

.close:hover {
    color: #374151;
}

/* Элементы рисков */
.risk-item {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.risk-high { border-left-color: #ef4444; }
.risk-medium { border-left-color: #f59e0b; }
.risk-low { border-left-color: #10b981; }

.risk-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.risk-description {
    color: #6b7280;
    font-size: 0.875rem;
}

/* Строки функций */
.function-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.function-name {
    font-weight: 500;
    flex: 1;
}

/* Детали и лейблы */
.detail-label {
    font-weight: 600;
    color: #374151;
    min-width: 140px;
    font-size: 0.85rem;
}

.detail-value {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.4;
    flex: 1;
}

/* Сгруппированные просроченные поручения */
.overdue-assignments-grouped {
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Дополнительные статусы */
.status-secondary {
    background: #6b7280;
    color: white;
}

/* Заголовки и информация о поручениях */
.assignment-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assignment-title strong {
    color: #1f2937;
    font-size: 0.95rem;
}

.assignment-content {
    color: #374151;
}

.assignment-text {
    margin-bottom: 0.5rem;
    line-height: 1.4;
    font-size: 0.85rem;
}

.assignment-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1rem;
    font-size: 0.8rem;
}

.detail-row {
    display: flex;
    gap: 0.25rem;
}

.detail-label {
    font-weight: 600;
    color: #4b5563;
    min-width: 80px;
    font-size: 0.75rem;
}

.detail-value {
    color: #1f2937;
}

.assignment-separator {
    height: 1px;
    background: #e5e7eb;
    margin: 1rem 0;
}

/* Модальные окна - оптимизированные стили */
.modal h2 {
    margin: 0;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.3rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal .close {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    margin-left: 1rem;
}

.modal .close:hover {
    color: white;
}

.modal div[id$="List"] {
    padding: 1rem;
    max-height: calc(90vh - 100px);
    overflow-y: auto;
    font-size: 0.9rem;
}

/* Статистические карточки */
.function-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.stat-card .stat-label {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.stat-card .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.stat-card .stat-value.large {
    font-size: 2rem;
}

/* Анализ вопросов */
.questions-analysis-section {
    margin-bottom: 2rem;
}

.questions-table-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.questions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.questions-table thead {
    background: #f8fafc;
    color: #374151;
}

.questions-table th,
.questions-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.questions-table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.questions-table tbody tr:hover {
    background-color: #f8fafc;
}

.question-score {
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    color: white;
    text-align: center;
    min-width: 35px;
}

.score-distribution {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.score-bar {
    height: 18px;
    border-radius: 2px;
    min-width: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    transition: all 0.2s ease;
}

.score-bar-1 { background: #dc2626; }
.score-bar-2 { background: #ea580c; }
.score-bar-3 { background: #ca8a04; color: #374151; }
.score-bar-4 { background: #16a34a; }
.score-bar-5 { background: #059669; }

.score-bar.score-1 { background-color: #ef4444; }
.score-bar.score-2 { background-color: #f97316; }
.score-bar.score-3 { background-color: #eab308; }
.score-bar.score-4 { background-color: #22c55e; }
.score-bar.score-5 { background-color: #16a34a; }

/* Комментарии */
.employee-comments-section,
.director-comments-section {
    margin-bottom: 1.5rem;
}

.comments-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    space-y: 1rem;
}

.comment-item {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.85rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    margin-bottom: 1rem;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-branch {
    font-weight: 600;
    color: #374151;
}

.comment-question {
    font-size: 0.75rem;
    color: #6b7280;
    background: #e5e7eb;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
}

.comment-text {
    color: #4b5563;
    line-height: 1.4;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.comment-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 4px;
    font-weight: 500;
}

/* Типы комментариев */
.employee-comment {
    border-left-color: #10b981;
}

.director-comment {
    border-left-color: #8b5cf6;
    background: #faf5ff;
}

.info-comment {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

/* Компактные статус-бейджи */
.status-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.status-warning {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

/* Списки поручений */
.assignment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

/* Заголовки разделов */
.section-header {
    margin-bottom: 2rem;
    text-align: center;
}

.section-header h2 {
    font-size: 2rem;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.section-header p {
    color: #6b7280;
    font-size: 1.1rem;
}

/* Информационные карточки протоколов */
.protocol-info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    color: white;
}

.protocol-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.protocol-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.protocol-status {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
}

.protocol-status.status-critical {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.protocol-status.status-completed {
    background: rgba(34, 197, 94, 0.2);
    color: #16a34a;
}

.protocol-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.protocol-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: help;
    position: relative;
}

.protocol-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.item-number {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    min-width: 2.5rem;
    text-align: center;
}

.item-text {
    flex: 1;
    line-height: 1.5;
}

.item-status {
    margin-left: auto;
    font-size: 1.2rem;
}

/* Критическая матрица */
.critical-matrix {
    margin-bottom: 2rem;
}

.critical-matrix h3 {
    margin-bottom: 1rem;
    color: #1f2937;
    font-size: 1.5rem;
}

.matrix-table-container {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.traffic-light-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.traffic-light-table th {
    background: #f8fafc;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
}

.traffic-light-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.traffic-light-table tr:hover {
    background: #f9fafb;
}

.responsible-name {
    font-weight: 600;
    color: #1f2937;
}

/* Индикаторы статуса */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-green {
    background: #dcfce7;
    color: #166534;
}

.status-orange {
    background: #fed7aa;
    color: #ea580c;
}

.status-yellow {
    background: #fef3c7;
    color: #92400e;
}

.status-red {
    background: #fecaca;
    color: #991b1b;
}

.status-gray {
    background: #f3f4f6;
    color: #6b7280;
}

.status-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Tooltips для индикаторов */
.status-indicator[title]:hover {
    position: relative;
}

.status-indicator[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    max-width: 300px;
    white-space: normal;
}

/* Сводка критических показателей */
.critical-summary {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.summary-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.summary-card.red {
    border-left: 4px solid #dc2626;
}

.summary-card.orange {
    border-left: 4px solid #ea580c;
}

.summary-card.yellow {
    border-left: 4px solid #d97706;
}

.summary-card.green {
    border-left: 4px solid #16a34a;
}

.summary-icon {
    font-size: 2rem;
}

.summary-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
}

.summary-label {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Дополнительные утилиты */
.text-gray-500 {
    color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

.no-comments {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    font-style: italic;
}

.report-row {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
}

.report-row .detail-value {
    font-style: italic;
    color: #6b7280;
}

/* Интерактивные функции */
.interactive-function {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
    padding: 0.5rem;
    margin: 0.25rem 0;
}

.interactive-function:hover {
    background-color: #f3f4f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.interactive-function:active {
    transform: translateX(2px);
    background-color: #e5e7eb;
}

.interactive-function:hover .function-name {
    color: #1f2937;
    font-weight: 600;
}

/* Стили для аналитики участников */
.participants-analytics {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.analytics-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.analytics-header h3 {
    color: #1e40af;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.analytics-header p {
    color: #64748b;
    font-size: 0.95rem;
}

.analytics-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.analytics-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.analytics-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.analytics-card.total {
    border-left: 4px solid #3b82f6;
}

.analytics-card.employees {
    border-left: 4px solid #10b981;
}

.analytics-card.directors {
    border-left: 4px solid #8b5cf6;
}

.analytics-card.branches {
    border-left: 4px solid #f59e0b;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.card-icon {
    font-size: 1.25rem;
}

.card-title {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.card-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 0.25rem;
}

.card-subtitle {
    font-size: 0.8rem;
    color: #64748b;
}

.branches-breakdown {
    background: white;
    border-radius: 8px;
    padding: 1rem;
}

.branches-breakdown h4 {
    color: #374151;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.branches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.branch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem;
    transition: background-color 0.2s;
}

.branch-item:hover {
    background: #f1f5f9;
}

.branch-name {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.branch-stats {
    font-size: 0.85rem;
    color: #64748b;
}

.branch-total {
    font-weight: 600;
    color: #1e40af;
}

/* Стили для примеров отчетов */
.successful-reports-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #e2e8f0;
}

.successful-reports-section h3 {
    margin-bottom: 0.5rem;
    color: #1f2937;
    font-size: 1.4rem;
}

.reports-subtitle {
    color: #64748b;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.report-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #10b981;
    transition: transform 0.2s ease;
}

.report-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.report-card.loading {
    border-left-color: #6b7280;
    display: flex;
    gap: 1rem;
}

.report-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.report-content {
    flex: 1;
}

.report-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.report-description {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.report-protocol {
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.report-text {
    color: #374151;
    line-height: 1.5;
    font-size: 0.9rem;
    font-style: italic;
    border-left: 3px solid #e5e7eb;
    padding-left: 0.75rem;
    margin: 0.75rem 0;
}

.report-meta {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

.report-task-type {
    background: #f0fdf4;
    color: #166534;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.report-length {
    color: #6b7280;
    font-size: 0.75rem;
}

/* Адаптивность для аналитики */
@media (max-width: 768px) {
    .analytics-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .branches-grid {
        grid-template-columns: 1fr;
    }
}

/* Стили для модального окна детализации оценок */
.score-detail-content {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.analytics-section {
    margin-bottom: 2rem;
}

.analytics-section h3 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.25rem;
    font-weight: 600;
}

.analytics-table {
    margin-bottom: 1.5rem;
}

.analytics-table-content {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics-table-content th,
.analytics-table-content td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.analytics-table-content th {
    background-color: #f9fafb;
    font-weight: 600;
    color: #374151;
}

.vote-visualization {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vote-bar {
    height: 20px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 10px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
}

.summary-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.stat-value {
    font-size: 1.25rem;
    color: #1f2937;
    font-weight: 600;
}

.comments-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem;
}

.comments-section h3 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Дополнительный элемент для subtitle */
#scoreDetailSubtitle {
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
}

#functionDetailSubtitle {
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
    color: #6b7280;
}

/* Стили для модального окна детализации функций */
.function-detail-content {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

#functionDetailHeader {
    padding: 0;
    border-bottom: none;
    margin-bottom: 0;
}

/* Заголовок теперь стилизуется через .modal h2 */

/* Тепловая карта вопросов (если используется) */
.questions-heatmap {
    margin: 1.5rem 0;
}

.heatmap-container {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.heatmap-grid {
    display: grid;
    gap: 2px;
    margin-top: 1rem;
}

.heatmap-cell {
    padding: 0.5rem;
    text-align: center;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
}

/* Стили для функций в рейтинге */
.function-rating-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s;
}

.function-rating-item:hover {
    background-color: #f9fafb;
}

.function-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.function-full-name {
    font-weight: 500;
    color: #1f2937;
    font-size: 0.9rem;
}

.function-abbr-small {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
}

.function-score-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.function-median-score {
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: white;
    min-width: 45px;
    text-align: center;
}

.function-participants-count {
    font-size: 0.8rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}

/* Дополнительные стили для функций и их отображения */
.function-row {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.function-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

/* Улучшения для детализации функций */
.function-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.function-score-badge {
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: white;
    font-size: 1.1rem;
}

/* Исправления для модальных окон - стили уже определены в modals.css */

/* Дополнительные стили для таблиц */
.function-questions-table th {
    background-color: #f8fafc;
    color: #374151;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.function-questions-table td {
    vertical-align: middle;
}

/* Стили для no-data сообщений */
.no-data {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    font-style: italic;
    background: #f9fafb;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Исправления для адаптивности модальных окон */
@media (max-width: 768px) {
    .function-summary-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .analytics-table-content th,
    .analytics-table-content td {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .function-tab-header {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .function-tab-score {
        align-self: center;
    }
}

/* Остальные компоненты будут добавлены в следующих итерациях по мере необходимости */