/**
 * Analytics V2 Styles
 * Премиум дизайн - светлая тема, минималистичный, современный
 */

/* ============================================================================
   CSS Variables
   ============================================================================ */

:root {
    /* Основные цвета */
    --analytics-primary: #2563EB;
    --analytics-background: #FFFFFF;
    --analytics-surface: #F9FAFB;
    --analytics-border: #E5E7EB;
    
    /* Семантические цвета */
    --analytics-success: #10B981;
    --analytics-warning: #F59E0B;
    --analytics-danger: #EF4444;
    --analytics-info: #3B82F6;
    
    /* Текст */
    --analytics-text-primary: #111827;
    --analytics-text-secondary: #6B7280;
    --analytics-text-tertiary: #9CA3AF;
    
    /* Квадранты */
    --analytics-stars: #10B981;
    --analytics-potential: #3B82F6;
    --analytics-risks: #F59E0B;
    --analytics-remove: #EF4444;
    
    /* Приоритеты */
    --analytics-critical: #FEE2E2;
    --analytics-critical-border: #EF4444;
    --analytics-attention: #FEF3C7;
    --analytics-attention-border: #F59E0B;
    --analytics-opportunity: #D1FAE5;
    --analytics-opportunity-border: #10B981;
    
    /* Тени */
    --analytics-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --analytics-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --analytics-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --analytics-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Радиусы */
    --analytics-radius-sm: 6px;
    --analytics-radius-md: 8px;
    --analytics-radius-lg: 12px;
    --analytics-radius-xl: 16px;
    
    /* Spacing */
    --analytics-space-xs: 4px;
    --analytics-space-sm: 8px;
    --analytics-space-md: 16px;
    --analytics-space-lg: 24px;
    --analytics-space-xl: 32px;
    
    /* Transitions */
    --analytics-transition: all 0.2s ease;
}

/* ============================================================================
   Base Styles
   ============================================================================ */
/* Сброс стилей для кнопок */
button {
    font-family: inherit;
    margin: 0;
}

.analytics-v2 {
    background: var(--analytics-background);
    min-height: 100vh;
    padding: var(--analytics-space-lg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    color: var(--analytics-text-primary);
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.analytics-v2 * {
    box-sizing: border-box;
}

.analytics-content {
    max-width: 100%;
    overflow: hidden;
}

.analytics-table {
    max-width: 100%;
    overflow: hidden;
}

/* ============================================================================
   Header
   ============================================================================ */

.analytics-header {
    margin-bottom: 20px;
}

.analytics-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}

/* ============================================================================
   Filters
   ============================================================================ */

.analytics-filters {
    margin-bottom: 24px;
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Первая строка - выбор периода */
.period-selector-analytics {
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
}

/* Кнопка отображения периода */
.period-display-btn {
    width: auto;
    min-width: 200px;
    padding: 8px 32px 8px 12px !important;
    background: #f3f4f6 !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer;
    white-space: nowrap;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    position: relative;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.period-display-btn::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.period-display-btn:hover {
    background-color: #e5e7eb;
}

.period-display-btn:focus {
    outline: none;
    border-color: #6366f1;
}

.period-scroll-wrapper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.period-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.period-quick-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #f3f4f6;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.period-quick-btn.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-color: transparent;
}

.period-quick-btn:hover {
    background: #e5e7eb;
}

.period-quick-btn.active:hover {
    background: linear-gradient(135deg, #5558e3, #7c4de8);
}

/* Вторая строка - фильтры */
.control-actions-analytics {
    margin-top: 12px;
}

.actions-scroll-wrapper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.actions-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.filter-select-wrapper {
    flex-shrink: 0;
    position: relative;
}

.modern-select {
    padding: 8px 32px 8px 12px;
    background: #f3f4f6;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    white-space: nowrap;
    min-width: 140px;
}

.modern-select:hover {
    background-color: #e5e7eb;
}

.modern-select:focus {
    outline: none;
    border-color: #6366f1;
}

/* Стили для Multi-Select Dropdown внутри фильтров */
.filter-select-wrapper .multi-select-dropdown {
    width: auto;
    min-width: 140px;
}

.filter-select-wrapper .multi-select-trigger {
    padding: 8px 32px 8px 12px;
    background: #f3f4f6;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.filter-select-wrapper .multi-select-trigger:hover {
    background-color: #e5e7eb;
}

.filter-select-wrapper .multi-select-trigger.active {
    border-color: #6366f1;
}

/* ============================================================================
   Section Styles
   ============================================================================ */

.section {
    background: var(--analytics-background);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    margin-bottom: var(--analytics-space-lg);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--analytics-space-lg);
    padding-bottom: var(--analytics-space-md);
    border-bottom: 1px solid var(--analytics-border);
}

.section-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
}

.section-stats {
    display: flex;
    gap: var(--analytics-space-md);
    font-size: 14px;
    color: var(--analytics-text-secondary);
}

.stat-badge {
    padding: 4px 12px;
    border-radius: var(--analytics-radius-md);
    font-size: 12px;
    font-weight: 600;
}

.stat-badge.critical {
    background: var(--analytics-critical);
    color: var(--analytics-critical-border);
}

.stat-badge.attention {
    background: var(--analytics-attention);
    color: var(--analytics-attention-border);
}

.stat-badge.opportunity {
    background: var(--analytics-opportunity);
    color: var(--analytics-opportunity-border);
}

/* ============================================================================
   Priority Inbox
   ============================================================================ */

/* Hero Summary Bar */
.priority-hero {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: var(--analytics-radius-xl);
    padding: var(--analytics-space-xl);
    margin-bottom: var(--analytics-space-xl);
    box-shadow: var(--analytics-shadow-lg);
}

.priority-hero-header {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-lg);
}

.priority-hero-icon {
    font-size: 32px;
}

.priority-hero-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.priority-hero-badges {
    display: flex;
    gap: var(--analytics-space-md);
    flex-wrap: wrap;
}

.priority-hero-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-md) var(--analytics-space-lg);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
    cursor: pointer;
    transition: var(--analytics-transition);
    flex: 1;
    min-width: 180px;
}

.priority-hero-badge:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.priority-hero-badge.active {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.priority-hero-badge-icon {
    font-size: 24px;
}

.priority-hero-badge-content {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xs);
}

.priority-hero-badge-count {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.priority-hero-badge-label {
    font-size: 13px;
    opacity: 0.9;
    font-weight: 500;
}

.priority-inbox {
    margin: 0;
}

.priority-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--analytics-space-xl);
    margin-bottom: var(--analytics-space-lg);
}

.priority-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--analytics-space-md);
    background: var(--analytics-surface);
    border-radius: var(--analytics-radius-lg);
    border: 2px solid var(--analytics-border);
    margin-bottom: var(--analytics-space-md);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--analytics-shadow-sm);
}

.priority-column-header.critical {
    border-color: var(--analytics-critical-border);
    background: var(--analytics-critical);
}

.priority-column-header.attention {
    border-color: var(--analytics-attention-border);
    background: var(--analytics-attention);
}

.priority-column-header.opportunity {
    border-color: var(--analytics-opportunity-border);
    background: var(--analytics-opportunity);
}

.priority-column-header-title {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
}

.priority-column-header-icon {
    font-size: 20px;
}

.priority-column-header-text {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.priority-column-header-count {
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 12px;
    border-radius: var(--analytics-radius-md);
    font-size: 16px;
    font-weight: 700;
}

.priority-column {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-md);
}

.priority-column h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    padding: var(--analytics-space-sm) 0;
}

.priority-item {
    background: var(--analytics-background);
    border: 2px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    cursor: pointer;
    transition: var(--analytics-transition);
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-sm);
}

.priority-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--analytics-shadow-lg);
}

/* Критичные - красный фон */
.priority-item.severity-high {
    background: var(--analytics-critical);
    border-color: var(--analytics-critical-border);
    border-width: 2px;
}

.priority-item.severity-high:hover {
    background: #FEE2E2;
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.15);
}

/* Внимание - желтый фон */
.priority-item.severity-medium {
    background: var(--analytics-attention);
    border-color: var(--analytics-attention-border);
    border-width: 2px;
}

.priority-item.severity-medium:hover {
    background: #FEF3C7;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.15);
}

/* Возможности - зеленый фон */
.priority-item.severity-low {
    background: var(--analytics-opportunity);
    border-color: var(--analytics-opportunity-border);
    border-width: 2px;
}

.priority-item.severity-low:hover {
    background: #D1FAE5;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.15);
}

.priority-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--analytics-space-sm);
    margin-bottom: var(--analytics-space-xs);
}

.priority-title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
    flex: 1;
}

.priority-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.priority-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--analytics-text-primary);
}

.priority-count {
    background: var(--analytics-surface);
    padding: 4px 10px;
    border-radius: var(--analytics-radius-md);
    font-size: 16px;
    font-weight: 700;
    color: var(--analytics-text-primary);
    flex-shrink: 0;
}

/* Цветные бейджи для разных приоритетов - ДОБАВИТЬ ЭТО */
.priority-item.severity-high .priority-count {
    background: rgba(239, 68, 68, 0.2);
    color: var(--analytics-critical-border);
}

.priority-item.severity-medium .priority-count {
    background: rgba(245, 158, 11, 0.2);
    color: var(--analytics-attention-border);
}

.priority-item.severity-low .priority-count {
    background: rgba(16, 185, 129, 0.2);
    color: var(--analytics-opportunity-border);
}

.priority-impact {
    font-size: 14px;
    font-weight: 700;
    color: var(--analytics-text-primary);
    margin-bottom: var(--analytics-space-xs);
}

.priority-action {
    font-size: 13px;
    color: var(--analytics-text-secondary);
    line-height: 1.4;
}

.priority-cta {
    margin-top: var(--analytics-space-sm);
    padding: var(--analytics-space-sm) var(--analytics-space-md);
    background: var(--analytics-primary);
    color: white;
    border: none;
    border-radius: var(--analytics-radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--analytics-transition);
    text-align: center;
}

.priority-cta:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

/* CTA кнопки в цвет приоритета */
.priority-item.severity-high .priority-cta {
    background: var(--analytics-critical-border);
}

.priority-item.severity-high .priority-cta:hover {
    background: #DC2626;
}

.priority-item.severity-medium .priority-cta {
    background: var(--analytics-attention-border);
}

.priority-item.severity-medium .priority-cta:hover {
    background: #D97706;
}

.priority-item.severity-low .priority-cta {
    background: var(--analytics-opportunity-border);
}

.priority-item.severity-low .priority-cta:hover {
    background: #059669;
}

.priority-empty {
    text-align: center;
    padding: var(--analytics-space-xl);
    background: var(--analytics-background);
    border: 2px dashed var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--analytics-space-md);
}

.priority-empty-icon {
    font-size: 48px;
    opacity: 0.5;
}

.priority-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--analytics-text-primary);
    margin: 0;
}

.priority-empty-text {
    font-size: 14px;
    color: var(--analytics-text-secondary);
    line-height: 1.5;
}

.potential-revenue {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    padding: var(--analytics-space-lg);
    border-radius: var(--analytics-radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.revenue-label {
    font-size: 16px;
    font-weight: 600;
}

.revenue-value {
    font-size: 32px;
    font-weight: 700;
}

/* ============================================================================
   Portfolio Matrix
   ============================================================================ */

.portfolio-matrix {
    margin: 0;
}

.matrix-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--analytics-space-lg);
}

.matrix-quadrant {
    background: var(--analytics-surface);
    border: 2px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    cursor: pointer;
    transition: var(--analytics-transition);
    position: relative;
    overflow: hidden;
}

.matrix-quadrant::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--analytics-border);
    transition: var(--analytics-transition);
}

.matrix-quadrant.stars::before {
    background: var(--analytics-stars);
}

.matrix-quadrant.potential::before {
    background: var(--analytics-potential);
}

.matrix-quadrant.risks::before {
    background: var(--analytics-risks);
}

.matrix-quadrant.remove::before {
    background: var(--analytics-remove);
}

.matrix-quadrant:hover {
    transform: translateY(-4px);
    box-shadow: var(--analytics-shadow-lg);
}

.matrix-quadrant:hover::before {
    height: 8px;
}

.quadrant-header {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
    margin-bottom: var(--analytics-space-md);
}

.quadrant-icon {
    font-size: 28px;
}

.quadrant-title {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
}

.quadrant-count {
    background: var(--analytics-background);
    padding: 4px 12px;
    border-radius: var(--analytics-radius-md);
    font-size: 16px;
    font-weight: 700;
}

.quadrant-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-md);
}

.metric {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xs);
}

.metric-label {
    font-size: 12px;
    color: var(--analytics-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.metric-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--analytics-text-primary);
}

.quadrant-desc {
    font-size: 13px;
    color: var(--analytics-text-secondary);
    margin-bottom: var(--analytics-space-sm);
    line-height: 1.5;
}

.quadrant-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--analytics-primary);
    padding: var(--analytics-space-sm);
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--analytics-radius-md);
}

/* ============================================================================
   Quick Actions
   ============================================================================ */

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--analytics-space-lg);
    margin-top: var(--analytics-space-xl);
}

.action-card {
    background: var(--analytics-surface);
    border: 2px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    text-align: center;
    cursor: pointer;
    transition: var(--analytics-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--analytics-space-sm);
}

.action-card:hover {
    border-color: var(--analytics-primary);
    transform: translateY(-2px);
    box-shadow: var(--analytics-shadow-md);
}

.action-icon {
    font-size: 48px;
}

.action-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--analytics-text-primary);
}

.action-desc {
    font-size: 14px;
    color: var(--analytics-text-secondary);
}

/* ============================================================================
   Groups
   ============================================================================ */

.analytics-groups {
    background: var(--analytics-background);
}

.groups-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--analytics-space-lg);
    padding-bottom: var(--analytics-space-md);
    border-bottom: 1px solid var(--analytics-border);
}

.groups-controls {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-md);
}

.groups-controls label {
    font-size: 14px;
    font-weight: 600;
    color: var(--analytics-text-secondary);
}

.btn-back {
    padding: 8px 16px;
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--analytics-text-primary);
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
    transition: var(--analytics-transition);
}

.btn-back:hover {
    background: var(--analytics-background);
    border-color: var(--analytics-primary);
}

.groups-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--analytics-space-lg);
}

.group-card {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    transition: var(--analytics-transition);
}

.group-card:hover {
    box-shadow: var(--analytics-shadow-md);
    transform: translateY(-2px);
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--analytics-space-md);
    padding-bottom: var(--analytics-space-sm);
    border-bottom: 1px solid var(--analytics-border);
}

.group-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.group-count {
    font-size: 14px;
    color: var(--analytics-text-secondary);
    background: var(--analytics-background);
    padding: 4px 12px;
    border-radius: var(--analytics-radius-md);
}

.group-types {
    display: flex;
    gap: var(--analytics-space-sm);
    margin-bottom: var(--analytics-space-md);
    font-size: 12px;
    color: var(--analytics-text-secondary);
}

.group-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-md);
}

.group-quadrants {
    display: flex;
    gap: var(--analytics-space-sm);
    margin-bottom: var(--analytics-space-md);
}

.quad-badge {
    padding: 4px 8px;
    border-radius: var(--analytics-radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.quad-badge.stars {
    background: rgba(16, 185, 129, 0.1);
    color: var(--analytics-stars);
}

.quad-badge.potential {
    background: rgba(59, 130, 246, 0.1);
    color: var(--analytics-potential);
}

.quad-badge.risks {
    background: rgba(245, 158, 11, 0.1);
    color: var(--analytics-risks);
}

.quad-badge.remove {
    background: rgba(239, 68, 68, 0.1);
    color: var(--analytics-remove);
}

.btn-expand-group {
    width: 100%;
    padding: 10px;
    background: var(--analytics-primary);
    color: white;
    border: none;
    border-radius: var(--analytics-radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--analytics-transition);
}

.btn-expand-group:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

/* ============================================================================
   Table
   ============================================================================ */

.analytics-table {
    background: var(--analytics-background);
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--analytics-space-lg);
    padding-bottom: var(--analytics-space-md);
    border-bottom: 1px solid var(--analytics-border);
}

.table-controls {
    display: flex;
    gap: var(--analytics-space-sm);
    align-items: center;
}

.search-input {
    padding: 10px 16px;
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-md);
    font-size: 14px;
    min-width: 300px;
    transition: var(--analytics-transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--analytics-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.table-stats {
    padding: var(--analytics-space-md);
    background: var(--analytics-surface);
    border-radius: var(--analytics-radius-md);
    margin-bottom: var(--analytics-space-md);
    font-size: 14px;
    color: var(--analytics-text-secondary);
}

.products-table {
    background: var(--analytics-background);
    border: 1px solid var(--analytics-border);
    border-left: none;
    border-radius: var(--analytics-radius-lg);
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto;
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
}

.products-table table {
    width: 100%;
    border-collapse: collapse;
}

.products-table thead {
    background: var(--analytics-surface);
}

.products-table th {
    padding: 8px 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--analytics-text-secondary);
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--analytics-border);
    border-right: 1px solid var(--analytics-border);
    cursor: pointer;
    user-select: none;
    position: sticky;
    z-index: 100;
    background: var(--analytics-surface);
    box-shadow: 0 2px 0 0 var(--analytics-border), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.products-table th:last-child {
    border-right: none;
}

.products-table th:hover {
    color: var(--analytics-primary);
}

.products-table tbody tr {
    border-bottom: 1px solid var(--analytics-border);
    transition: var(--analytics-transition);
}

.products-table tbody tr:hover {
    background: var(--analytics-surface);
}

.products-table td {
    padding: 1px;
    font-size: 14px;
    border-right: 1px solid var(--analytics-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.products-table td:last-child {
    border-right: none;
}

/* ============================================================================
   Двухуровневый заголовок таблицы
   ============================================================================ */

/* Первый уровень - группы */
.products-table thead tr.header-groups th {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 8px;
    color: var(--analytics-text-primary);
    border-bottom: 2px solid var(--analytics-border);
    top: 0;
}

.products-table thead tr.header-groups th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--analytics-border);
    z-index: 1000;
}

.products-table thead tr.header-groups th.group-header {
    display: table-cell !important;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-left: 2px solid var(--analytics-border);
    border-right: 2px solid var(--analytics-border);
}

/* Цветовая группировка блоков */
.products-table thead tr.header-groups th.group-header:nth-of-type(3) {
    /* ВОРОНКА ПРОДАЖ - голубой */
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF;
    border-left: 2px solid #93C5FD;
    border-right: 2px solid #93C5FD;
}

.products-table thead tr.header-groups th.group-header:nth-of-type(4) {
    /* ОСТАТКИ - зелёный */
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #065F46;
    border-left: 2px solid #6EE7B7;
    border-right: 2px solid #6EE7B7;
}

/* Второй уровень - колонки */
.products-table thead tr.header-columns th {
    font-size: 11px;
    font-weight: 600;
    padding: 8px 6px;
    color: var(--analytics-text-secondary);
    border-bottom: 2px solid var(--analytics-border);
    position: sticky;
    top: 43px;
    z-index: 100;
    background: var(--analytics-surface);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.products-table thead tr.header-columns th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--analytics-border);
    z-index: 1000;
}

/* Sticky колонки во второй строке остаются sticky */
.products-table thead tr.header-columns th.sticky-col {
    position: sticky !important;
    z-index: 120;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.products-table thead tr.header-columns th.sticky-col::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    background: var(--analytics-border);
    z-index: 1000;
}

/* Скрываем дублирующие ячейки во второй строке */
.products-table thead tr.header-columns th.header-hidden {
    display: none !important;
}

/* Одиночные заголовки первой строки */
.products-table thead tr.header-groups th.single-header {
    height: 182px; /* Сумма высот обеих строк (137px + 45px) */
    vertical-align: middle;
}

/* Sticky колонки - Фото и Артикул */
.products-table th.sticky-col,
.products-table td.sticky-col {
    position: sticky;
    background: var(--analytics-surface);
    z-index: 120;
}

/* Фото - первая колонка */
.products-table th.sticky-col:nth-child(1) {
    left: 0;
    border-right: 2px solid var(--analytics-border) !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
    min-width: 50px;
    max-width: 50px;
    width: 50px;
}

.products-table td.sticky-col:nth-child(1) {
    position: sticky;
    left: 0;
    background: var(--analytics-background);
    z-index: 10;
    border-right: 2px solid var(--analytics-border) !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    min-width: 50px;
    max-width: 50px;
    width: 50px;
}

/* Артикул - вторая колонка */
.products-table th.sticky-col:nth-child(2) {
    left: 50px; /* ширина первой колонки */
    border-right: 2px solid var(--analytics-border) !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
    min-width: 120px;
}

.products-table td.sticky-col:nth-child(2) {
    position: sticky;
    left: 50px;
    background: var(--analytics-background);
    z-index: 10;
    border-right: 2px solid var(--analytics-border) !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    min-width: 120px;
}

.products-table tbody tr:hover td.sticky-col {
    background: var(--analytics-surface);
}

/* Минимальная ширина для колонок */
.products-table th[data-sort],
.products-table td {
    min-width: 100px;
}

.cell-photo {
    padding: 4px !important;
    text-align: center;
    vertical-align: middle;
}

.product-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
}

.cell-id {
    font-family: monospace;
    color: var(--analytics-text-secondary);
    padding: 8px 12px !important;
}

.cell-name {
    min-width: 200px;
}

.product-name-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-name {
    font-weight: 600;
    color: var(--analytics-text-primary);
}

.product-brand {
    font-size: 12px;
    color: var(--analytics-text-secondary);
}

.cell-number {
    text-align: center;
    font-weight: 500;
    color: #374151;
    vertical-align: middle;
    padding: 8px 12px !important;
}

.cell-number.positive {
    color: var(--analytics-success);
}

.cell-number.negative {
    color: var(--analytics-danger);
}

.cell-stock {
    text-align: center;
}

.stock-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--analytics-radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.stock-badge.ok {
    background: rgba(16, 185, 129, 0.1);
    color: var(--analytics-success);
}

.stock-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--analytics-warning);
}

.stock-badge.critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--analytics-danger);
}

.cell-quadrant {
    text-align: center;
}

.cell-actions {
    text-align: center;
}

.btn-view-product {
    padding: 6px 12px;
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-sm);
    cursor: pointer;
    font-size: 16px;
    transition: var(--analytics-transition);
}

.btn-view-product:hover {
    background: var(--analytics-primary);
    border-color: var(--analytics-primary);
    transform: scale(1.1);
}

.cell-abc {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

/* ============================================================================
   Pagination
   ============================================================================ */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--analytics-space-sm);
    margin-top: var(--analytics-space-lg);
    padding: var(--analytics-space-lg);
}

.btn-page {
    padding: 8px 16px;
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--analytics-transition);
    min-width: 40px;
}

.btn-page:hover:not(:disabled) {
    background: var(--analytics-background);
    border-color: var(--analytics-primary);
}

.btn-page.active {
    background: var(--analytics-primary);
    color: white;
    border-color: var(--analytics-primary);
}

.btn-page:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   Loading & Empty States
   ============================================================================ */

.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--analytics-space-xl);
    color: var(--analytics-text-secondary);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--analytics-border);
    border-top-color: var(--analytics-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.analytics-loading,
.analytics-error,
.analytics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--analytics-space-xl);
    text-align: center;
}

.error-icon,
.empty-icon {
    font-size: 64px;
    margin-bottom: var(--analytics-space-md);
}

.analytics-error h3 {
    font-size: 18px;
    margin: var(--analytics-space-md) 0;
}

.analytics-error p {
    color: var(--analytics-text-secondary);
    margin-bottom: var(--analytics-space-md);
}

.btn-retry {
    padding: 10px 20px;
    background: var(--analytics-primary);
    color: white;
    border: none;
    border-radius: var(--analytics-radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--analytics-transition);
}

.btn-retry:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

.empty {
    text-align: center;
    padding: var(--analytics-space-xl);
    color: var(--analytics-text-tertiary);
}

/* ============================================================================
   Responsive
   ============================================================================ */

/* Desktop optimization - широкие экраны */

@media (min-width: 1440px) {
    .priority-hero {
        padding: 48px;
    }
    
    .priority-hero-badge {
        min-width: 220px;
    }
    
    .priority-grid {
        gap: 32px;
    }
    
    .priority-item {
        padding: 24px;
    }
}

@media (min-width: 1920px) {
    .analytics-v2 {
        max-width: 1800px;
        margin: 0 auto;
    }
}

@media (max-width: 1024px) {
    .priority-grid {
        grid-template-columns: 1fr;
    }
    
    .matrix-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-actions {
        grid-template-columns: 1fr;
    }
    
    .groups-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .analytics-v2 {
        padding: var(--analytics-space-md);
    }
    
    .analytics-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--analytics-space-md);
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--analytics-space-sm);
    }
    
    .section-stats {
        flex-direction: column;
        gap: var(--analytics-space-xs);
    }
    
    .quadrant-metrics {
        grid-template-columns: 1fr;
    }
    
    .group-metrics {
        grid-template-columns: 1fr;
    }
    
    .search-input {
        min-width: auto;
        width: 100%;
    }
    
    .products-table {
        overflow-x: auto;
        overflow-y: auto;
        max-height: calc(100vh - 140px) !important;
    }
    
    .products-table table {
        min-width: 800px;
    }
    
    .table-header,
    .groups-header {
        flex-direction: column;
        gap: var(--analytics-space-md);
        align-items: stretch;
    }
    
    .table-controls,
    .groups-controls {
        flex-direction: column;
        width: 100%;
    }

    /* Скрыть текст на кнопках пагинации */
    .btn-page .btn-text {
        display: none;
    }
}

    @media (max-width: 768px) and (orientation: landscape) {
        .analytics-v2 {
            padding: 8px;
        }
        
        .analytics-header {
            margin-bottom: 8px;
        }
        
        .analytics-filters {
            margin-bottom: 12px;
            padding: 12px;
        }
        
        .table-header {
            margin-bottom: 8px;
            padding-bottom: 8px;
        }
        
        .products-table {
            max-height: calc(100vh - 10px) !important;
        }
    }

/* ============================================================================
   Utilities
   ============================================================================ */

.text-success { color: var(--analytics-success) !important; }
.text-warning { color: var(--analytics-warning) !important; }
.text-danger { color: var(--analytics-danger) !important; }
.text-primary { color: var(--analytics-primary) !important; }
.text-secondary { color: var(--analytics-text-secondary) !important; }

.bg-success { background: var(--analytics-success) !important; }
.bg-warning { background: var(--analytics-warning) !important; }
.bg-danger { background: var(--analytics-danger) !important; }

/* ============================================================================
   Animations
   ============================================================================ */

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

.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================================================
   Product Details Modal
   ============================================================================ */

.product-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--analytics-space-lg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-modal-overlay.show {
    opacity: 1;
}

.product-modal-overlay.closing {
    opacity: 0;
}

.product-modal {
    background: var(--analytics-background);
    border-radius: var(--analytics-radius-xl);
    box-shadow: var(--analytics-shadow-xl);
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.product-modal-overlay.show .product-modal {
    transform: translateY(0);
}

.product-modal-overlay.closing .product-modal {
    transform: translateY(20px);
}

/* Modal Header */
.modal-header {
    padding: var(--analytics-space-lg);
    border-bottom: 1px solid var(--analytics-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--analytics-space-md);
}

.header-info {
    flex: 1;
}

.modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-sm) 0;
    color: var(--analytics-text-primary);
}

.header-meta {
    display: flex;
    gap: var(--analytics-space-md);
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--analytics-text-secondary);
}

.product-brand {
    font-weight: 600;
    color: var(--analytics-primary);
}

.product-article,
.product-vendor {
    color: var(--analytics-text-tertiary);
}

.btn-close {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--analytics-surface);
    border-radius: var(--analytics-radius-md);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--analytics-transition);
    flex-shrink: 0;
}

.btn-close:hover {
    background: var(--analytics-border);
    transform: rotate(90deg);
}

/* Modal Tabs */
.modal-tabs {
    display: flex;
    gap: var(--analytics-space-sm);
    padding: 0 var(--analytics-space-lg);
    border-bottom: 1px solid var(--analytics-border);
    background: var(--analytics-surface);
}

.tab-btn {
    padding: var(--analytics-space-md) var(--analytics-space-lg);
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--analytics-text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: var(--analytics-transition);
    position: relative;
}

.tab-btn:hover {
    color: var(--analytics-text-primary);
    background: rgba(37, 99, 235, 0.05);
}

.tab-btn.active {
    color: var(--analytics-primary);
    border-bottom-color: var(--analytics-primary);
    background: var(--analytics-background);
}

/* Modal Content */
.modal-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--analytics-space-lg);
}

/* ============================================================================
   Overview Tab
   ============================================================================ */

.tab-overview {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xl);
}

.overview-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: var(--analytics-space-xl);
}

.product-image-section {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-md);
}

.product-image {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: var(--analytics-radius-lg);
    overflow: hidden;
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quadrant-badge-large {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
    padding: var(--analytics-space-md);
    border-radius: var(--analytics-radius-lg);
    font-size: 16px;
    font-weight: 700;
}

.quadrant-badge-large.stars {
    background: rgba(16, 185, 129, 0.1);
    color: var(--analytics-stars);
    border: 2px solid var(--analytics-stars);
}

.quadrant-badge-large.potential {
    background: rgba(59, 130, 246, 0.1);
    color: var(--analytics-potential);
    border: 2px solid var(--analytics-potential);
}

.quadrant-badge-large.risks {
    background: rgba(245, 158, 11, 0.1);
    color: var(--analytics-risks);
    border: 2px solid var(--analytics-risks);
}

.quadrant-badge-large.remove {
    background: rgba(239, 68, 68, 0.1);
    color: var(--analytics-remove);
    border: 2px solid var(--analytics-remove);
}

.badge-icon {
    font-size: 24px;
}

.badge-text {
    flex: 1;
}

/* Metrics Grid */
.product-metrics-section .metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--analytics-space-md);
}

.metric-card {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    transition: var(--analytics-transition);
}

.metric-card:hover {
    box-shadow: var(--analytics-shadow-md);
    transform: translateY(-2px);
}

.metric-card.highlight {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: var(--analytics-primary);
}

.metric-label {
    font-size: 12px;
    color: var(--analytics-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: var(--analytics-space-xs);
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--analytics-text-primary);
    margin-bottom: var(--analytics-space-xs);
    font-family: 'JetBrains Mono', monospace;
}

.metric-value.large {
    font-size: 32px;
}

.metric-value.positive {
    color: var(--analytics-success);
}

.metric-value.negative {
    color: var(--analytics-danger);
}

.metric-value.warning {
    color: var(--analytics-warning);
}

.metric-sublabel {
    font-size: 13px;
    color: var(--analytics-text-tertiary);
}

.metric-change {
    font-size: 14px;
    font-weight: 600;
    margin-top: var(--analytics-space-xs);
}

.metric-change.positive {
    color: var(--analytics-success);
}

.metric-change.negative {
    color: var(--analytics-danger);
}

/* Insights */
.insights-section {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
}

.insights-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-md) 0;
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-sm);
}

.insight-item {
    padding: var(--analytics-space-md);
    background: var(--analytics-background);
    border-left: 3px solid var(--analytics-primary);
    border-radius: var(--analytics-radius-md);
    font-size: 14px;
}

/* Detailed Metrics */
.detailed-metrics {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
}

.detailed-metrics h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-lg) 0;
}

.metrics-section {
    margin-bottom: var(--analytics-space-lg);
}

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

.metrics-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--analytics-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--analytics-space-md) 0;
}

.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--analytics-space-md);
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xs);
}

.metric-item .metric-label {
    font-size: 11px;
    margin-bottom: 0;
}

.metric-item .metric-value {
    font-size: 16px;
    margin-bottom: 0;
}

/* ============================================================================
   Finances Tab
   ============================================================================ */

.tab-finances {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xl);
}

.finances-summary {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
}

.finances-summary h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-lg) 0;
}

.finance-flow {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-lg);
    flex-wrap: wrap;
}

.flow-item {
    flex: 1;
    min-width: 200px;
    padding: var(--analytics-space-lg);
    border-radius: var(--analytics-radius-lg);
    text-align: center;
}

.flow-item.income {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid var(--analytics-success);
}

.flow-item.expense {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid var(--analytics-danger);
}

.flow-item.profit {
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid var(--analytics-success);
}

.flow-item.loss {
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid var(--analytics-danger);
}

.flow-label {
    font-size: 12px;
    color: var(--analytics-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: var(--analytics-space-sm);
}

.flow-value {
    font-size: 24px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: var(--analytics-space-xs);
}

.flow-sublabel {
    font-size: 13px;
    color: var(--analytics-text-tertiary);
}

.flow-breakdown {
    margin-top: var(--analytics-space-sm);
    font-size: 12px;
    color: var(--analytics-text-secondary);
    text-align: left;
}

.flow-breakdown div {
    margin: 4px 0;
}

.flow-arrow {
    font-size: 32px;
    color: var(--analytics-text-tertiary);
}

/* Finance Metrics */
.finance-metrics {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
}

.finance-metrics h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-lg) 0;
}

.finance-metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--analytics-space-md);
}

.metric-desc {
    font-size: 11px;
    color: var(--analytics-text-tertiary);
    margin-top: var(--analytics-space-xs);
}

/* Finance Table */
.finance-table {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
}

.finance-table h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-lg) 0;
}

.finance-table table {
    width: 100%;
    border-collapse: collapse;
}

.finance-table th {
    padding: var(--analytics-space-md);
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--analytics-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--analytics-border);
}

.finance-table td {
    padding: var(--analytics-space-md);
    font-size: 14px;
    border-bottom: 1px solid var(--analytics-border);
}

.finance-table td.positive {
    color: var(--analytics-success);
    font-weight: 600;
}

.finance-table td.negative {
    color: var(--analytics-danger);
    font-weight: 600;
}

.finance-table tr.total-row {
    background: rgba(37, 99, 235, 0.05);
}

.finance-table tr.total-row td {
    border-bottom: none;
    font-size: 16px;
}

/* ============================================================================
   Simulator Tab
   ============================================================================ */

.tab-simulator {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xl);
}

.simulator-intro {
    text-align: center;
    padding: var(--analytics-space-lg);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-radius: var(--analytics-radius-lg);
}

.simulator-intro h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-sm) 0;
}

.simulator-intro p {
    font-size: 14px;
    color: var(--analytics-text-secondary);
    margin: 0;
}

.simulator-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--analytics-space-xl);
}

.current-state,
.simulator-inputs {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
}

.current-state h4,
.simulator-inputs h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-lg) 0;
}

.state-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--analytics-space-md);
}

.state-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--analytics-space-sm) 0;
    border-bottom: 1px solid var(--analytics-border);
}

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

.state-item .label {
    font-size: 13px;
    color: var(--analytics-text-secondary);
}

.state-item .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--analytics-text-primary);
    font-family: 'JetBrains Mono', monospace;
}

/* Simulator Inputs */
.input-group {
    margin-bottom: var(--analytics-space-lg);
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--analytics-text-primary);
    margin-bottom: var(--analytics-space-sm);
}

.input-group label span {
    color: var(--analytics-primary);
    font-family: 'JetBrains Mono', monospace;
}

.input-group input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--analytics-border);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.input-group input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--analytics-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.input-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--analytics-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--analytics-space-xs);
    font-size: 11px;
    color: var(--analytics-text-tertiary);
}

.btn-simulate {
    width: 100%;
    padding: var(--analytics-space-md);
    background: var(--analytics-primary);
    color: white;
    border: none;
    border-radius: var(--analytics-radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--analytics-transition);
    margin-top: var(--analytics-space-md);
}

.btn-simulate:hover {
    background: #1D4ED8;
    transform: translateY(-2px);
    box-shadow: var(--analytics-shadow-md);
}

.btn-simulate:active {
    transform: translateY(0);
}

/* Simulator Results */
.simulator-results {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
}

.forecast-results h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-lg) 0;
}

.forecast-comparison {
    margin-bottom: var(--analytics-space-lg);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--analytics-space-md);
}

.comparison-item {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: var(--analytics-space-md);
    padding: var(--analytics-space-md);
    background: var(--analytics-background);
    border-radius: var(--analytics-radius-md);
}

.comparison-item.highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
    border: 1px solid var(--analytics-success);
}

.item-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--analytics-text-secondary);
    min-width: 80px;
}

.item-current,
.item-forecast {
    font-size: 16px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.item-arrow {
    font-size: 20px;
    color: var(--analytics-text-tertiary);
}

.item-change {
    font-size: 14px;
    font-weight: 700;
    min-width: 80px;
    text-align: right;
}

.item-change.positive {
    color: var(--analytics-success);
}

.item-change.negative {
    color: var(--analytics-danger);
}

/* Forecast Recommendation */
.forecast-recommendation {
    display: flex;
    gap: var(--analytics-space-md);
    padding: var(--analytics-space-lg);
    border-radius: var(--analytics-radius-lg);
    margin-bottom: var(--analytics-space-md);
}

.forecast-recommendation.positive {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid var(--analytics-success);
}

.forecast-recommendation.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid var(--analytics-warning);
}

.recommendation-icon {
    font-size: 32px;
}

.recommendation-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
}

.forecast-confidence {
    text-align: center;
    font-size: 13px;
    color: var(--analytics-text-tertiary);
}

/* Error Message */
.error-message {
    padding: var(--analytics-space-lg);
    text-align: center;
    color: var(--analytics-danger);
}

/* ============================================================================
   Responsive - Modal
   ============================================================================ */

@media (max-width: 1024px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
    
    .product-image-section {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .simulator-controls {
        grid-template-columns: 1fr;
    }
    
    .finance-metrics .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .product-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .product-modal {
        max-height: 95vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .modal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-btn {
        white-space: nowrap;
    }
    
    .product-metrics-section .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .finance-flow {
        flex-direction: column;
    }
    
    .flow-arrow {
        transform: rotate(90deg);
    }
    
    .finance-metrics .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .comparison-item {
        grid-template-columns: 1fr;
        gap: var(--analytics-space-sm);
        text-align: center;
    }
    
    .item-arrow {
        transform: rotate(90deg);
    }
    
    .item-change {
        text-align: center;
    }
}

/* ============================================================================
   Dynamics Chart Section
   ============================================================================ */

.dynamics-section {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
}

.dynamics-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-lg) 0;
}

.chart-container {
    position: relative;
    margin-bottom: var(--analytics-space-md);
    background: var(--analytics-background);
    border-radius: var(--analytics-radius-md);
    padding: var(--analytics-space-md);
}

.chart-controls {
    display: flex;
    gap: var(--analytics-space-lg);
    flex-wrap: wrap;
    padding: var(--analytics-space-md);
    background: var(--analytics-background);
    border-radius: var(--analytics-radius-md);
    border: 1px solid var(--analytics-border);
}

.chart-controls label {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--analytics-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: var(--analytics-transition);
}

.chart-controls label:hover {
    color: var(--analytics-text-primary);
}

.chart-controls input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--analytics-primary);
}

@media (max-width: 768px) {
    .chart-controls {
        flex-direction: column;
        gap: var(--analytics-space-sm);
    }
}

/* ============================================================================
   Priority Inbox Modal
   ============================================================================ */

.priority-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--analytics-space-lg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.priority-modal-overlay.show {
    opacity: 1;
}

.priority-modal-overlay.closing {
    opacity: 0;
}

.priority-modal {
    background: var(--analytics-background);
    border-radius: var(--analytics-radius-xl);
    box-shadow: var(--analytics-shadow-xl);
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.priority-modal-overlay.show .priority-modal {
    transform: translateY(0);
}

.priority-modal-overlay.closing .priority-modal {
    transform: translateY(20px);
}

/* Priority Modal Header */
.priority-modal-header {
    padding: var(--analytics-space-lg);
    border-bottom: 1px solid var(--analytics-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--analytics-space-md);
}

.priority-modal-header .header-info {
    flex: 1;
}

.priority-modal-header .header-title {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
    margin-bottom: var(--analytics-space-sm);
}

.priority-modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.severity-icon {
    font-size: 28px;
}

.header-stats {
    display: flex;
    gap: var(--analytics-space-lg);
    font-size: 14px;
    color: var(--analytics-text-secondary);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-xs);
}

/* Priority Content */
.priority-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--analytics-space-lg);
}

/* Priority Stats */
.priority-stats {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    margin-bottom: var(--analytics-space-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-lg);
}

.stat-card {
    background: var(--analytics-background);
    padding: var(--analytics-space-md);
    border-radius: var(--analytics-radius-md);
    text-align: center;
}

.stat-label {
    font-size: 12px;
    color: var(--analytics-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: var(--analytics-space-xs);
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--analytics-text-primary);
}

/* Recommendations */
.priority-recommendations {
    margin-top: var(--analytics-space-lg);
    padding-top: var(--analytics-space-lg);
    border-top: 1px solid var(--analytics-border);
}

.priority-recommendations h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-md) 0;
}

.recommendations-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-sm);
}

.recommendations-list li {
    padding: var(--analytics-space-sm) var(--analytics-space-md);
    background: rgba(59, 130, 246, 0.05);
    border-left: 3px solid var(--analytics-primary);
    border-radius: var(--analytics-radius-sm);
    font-size: 14px;
}

/* Priority Filters */
.priority-filters {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-lg);
}

.priority-filters .filters-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--analytics-space-md);
}

.search-box {
    flex: 1;
}

/* Priority Products Grid */
.priority-products {
    margin-top: var(--analytics-space-lg);
}

.products-count {
    font-size: 14px;
    color: var(--analytics-text-secondary);
    margin-bottom: var(--analytics-space-md);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--analytics-space-lg);
}

/* Product Card */
.priority-product-card {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    overflow: hidden;
    transition: var(--analytics-transition);
    cursor: pointer;
}

.priority-product-card:hover {
    box-shadow: var(--analytics-shadow-md);
    transform: translateY(-4px);
}

.priority-product-card .product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--analytics-background);
    overflow: hidden;
}

.priority-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.priority-product-card .product-quadrant {
    position: absolute;
    top: var(--analytics-space-sm);
    right: var(--analytics-space-sm);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--analytics-background);
    box-shadow: var(--analytics-shadow-sm);
}

.priority-product-card .product-info {
    padding: var(--analytics-space-md);
}

.priority-product-card .product-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-xs) 0;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.priority-product-card .product-brand {
    font-size: 13px;
    color: var(--analytics-primary);
    font-weight: 600;
    margin-bottom: var(--analytics-space-xs);
}

.priority-product-card .product-article {
    font-size: 11px;
    color: var(--analytics-text-tertiary);
    margin-bottom: var(--analytics-space-md);
}

.priority-product-card .product-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xs);
    margin-bottom: var(--analytics-space-md);
}

.priority-product-card .metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.priority-product-card .metric-row .label {
    color: var(--analytics-text-secondary);
}

.priority-product-card .metric-row .value {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.priority-product-card .metric-row.highlight {
    background: rgba(37, 99, 235, 0.05);
    padding: var(--analytics-space-xs);
    border-radius: var(--analytics-radius-sm);
    margin: 0 calc(var(--analytics-space-xs) * -1);
    padding-left: var(--analytics-space-xs);
    padding-right: var(--analytics-space-xs);
}

.priority-product-card .metric-row .value.positive {
    color: var(--analytics-success);
}

.priority-product-card .metric-row .value.negative {
    color: var(--analytics-danger);
}

.priority-product-card .metric-row .value.warning {
    color: var(--analytics-warning);
}

.priority-product-card .btn-view-details {
    width: 100%;
    padding: var(--analytics-space-sm);
    background: var(--analytics-primary);
    color: white;
    border: none;
    border-radius: var(--analytics-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--analytics-transition);
}

.priority-product-card .btn-view-details:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

/* Empty State */
.priority-empty {
    text-align: center;
    padding: var(--analytics-space-xl) var(--analytics-space-lg);
}

.priority-empty .empty-icon {
    font-size: 64px;
    margin-bottom: var(--analytics-space-md);
}

.priority-empty p {
    font-size: 16px;
    color: var(--analytics-text-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .priority-filters .filters-row {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .priority-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .priority-modal {
        max-height: 95vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Portfolio Matrix Modal
   ============================================================================ */

.matrix-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--analytics-space-lg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.matrix-modal-overlay.show {
    opacity: 1;
}

.matrix-modal-overlay.closing {
    opacity: 0;
}

.matrix-modal {
    background: var(--analytics-background);
    border-radius: var(--analytics-radius-xl);
    box-shadow: var(--analytics-shadow-xl);
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.matrix-modal-overlay.show .matrix-modal {
    transform: translateY(0);
}

.matrix-modal-overlay.closing .matrix-modal {
    transform: translateY(20px);
}

/* Matrix Modal Header */
.matrix-modal-header {
    padding: var(--analytics-space-lg);
    border-bottom: 1px solid var(--analytics-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--analytics-space-md);
}

.matrix-modal-header .header-info {
    flex: 1;
}

.matrix-modal-header .header-title {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-sm);
}

.quadrant-icon-large {
    font-size: 36px;
}

.matrix-modal-header h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

/* Matrix Content */
.matrix-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--analytics-space-lg);
}

/* Quadrant Stats */
.quadrant-stats {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    margin-bottom: var(--analytics-space-lg);
}

.quadrant-stats .stat-sublabel {
    font-size: 12px;
    color: var(--analytics-text-tertiary);
    margin-top: var(--analytics-space-xs);
}

/* Quadrant Description */
.quadrant-description {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    margin-bottom: var(--analytics-space-lg);
}

.quadrant-description .description-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--analytics-space-md);
}

.quadrant-description h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.action-badge {
    padding: var(--analytics-space-xs) var(--analytics-space-md);
    background: var(--analytics-primary);
    color: white;
    border-radius: var(--analytics-radius-full);
    font-size: 13px;
    font-weight: 600;
}

.description-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--analytics-text-secondary);
    margin: 0 0 var(--analytics-space-lg) 0;
}

.recommendations {
    padding-top: var(--analytics-space-lg);
    border-top: 1px solid var(--analytics-border);
}

.recommendations h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-md) 0;
}

.recommendations-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-sm);
}

.recommendations-list li {
    padding: var(--analytics-space-sm) var(--analytics-space-md);
    background: rgba(59, 130, 246, 0.05);
    border-left: 3px solid var(--analytics-primary);
    border-radius: var(--analytics-radius-sm);
    font-size: 14px;
    line-height: 1.5;
}

/* Matrix Filters */
.matrix-filters {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-lg);
}

.matrix-filters .filters-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: var(--analytics-space-md);
    align-items: center;
}

/* Matrix Products */
.matrix-products {
    margin-top: var(--analytics-space-lg);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--analytics-space-lg);
}

/* Matrix Product Card */
.matrix-product-card {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    overflow: hidden;
    transition: var(--analytics-transition);
    cursor: pointer;
}

.matrix-product-card:hover {
    box-shadow: var(--analytics-shadow-md);
    transform: translateY(-4px);
}

.matrix-product-card .product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--analytics-background);
    overflow: hidden;
}

.matrix-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.matrix-product-card .product-info {
    padding: var(--analytics-space-md);
}

.matrix-product-card .product-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-xs) 0;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matrix-product-card .product-brand {
    font-size: 13px;
    color: var(--analytics-primary);
    font-weight: 600;
    margin-bottom: var(--analytics-space-xs);
}

.matrix-product-card .product-article {
    font-size: 11px;
    color: var(--analytics-text-tertiary);
    margin-bottom: var(--analytics-space-md);
}

.matrix-product-card .product-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xs);
    margin-bottom: var(--analytics-space-md);
}

.matrix-product-card .metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.matrix-product-card .metric-row .label {
    color: var(--analytics-text-secondary);
}

.matrix-product-card .metric-row .value {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.matrix-product-card .btn-view-details {
    width: 100%;
    padding: var(--analytics-space-sm);
    background: var(--analytics-primary);
    color: white;
    border: none;
    border-radius: var(--analytics-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--analytics-transition);
}

.matrix-product-card .btn-view-details:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

/* Empty State */
.matrix-empty {
    text-align: center;
    padding: var(--analytics-space-xl) var(--analytics-space-lg);
}

.matrix-empty .empty-icon {
    font-size: 64px;
    margin-bottom: var(--analytics-space-md);
}

.matrix-empty p {
    font-size: 16px;
    color: var(--analytics-text-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .matrix-filters .filters-row {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .matrix-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .matrix-modal {
        max-height: 95vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Product Groups Modal
   ============================================================================ */

.group-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--analytics-space-lg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.group-modal-overlay.show {
    opacity: 1;
}

.group-modal-overlay.closing {
    opacity: 0;
}

.group-modal {
    background: var(--analytics-background);
    border-radius: var(--analytics-radius-xl);
    box-shadow: var(--analytics-shadow-xl);
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.group-modal-overlay.show .group-modal {
    transform: translateY(0);
}

.group-modal-overlay.closing .group-modal {
    transform: translateY(20px);
}

/* Group Modal Header */
.group-modal-header {
    padding: var(--analytics-space-lg);
    border-bottom: 1px solid var(--analytics-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--analytics-space-md);
}

.group-modal-header .header-info {
    flex: 1;
}

.group-modal-header .header-title {
    display: flex;
    align-items: center;
    gap: var(--analytics-space-sm);
    margin-bottom: var(--analytics-space-sm);
}

.group-icon {
    font-size: 32px;
}

.group-modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

/* Group Content */
.group-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--analytics-space-lg);
}

/* Group Stats */
.group-stats {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    margin-bottom: var(--analytics-space-lg);
}

/* Quadrants Distribution */
.quadrants-distribution {
    margin-top: var(--analytics-space-lg);
    padding-top: var(--analytics-space-lg);
    border-top: 1px solid var(--analytics-border);
}

.quadrants-distribution h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 var(--analytics-space-md) 0;
    color: var(--analytics-text-secondary);
}

.quadrants-bars {
    display: flex;
    height: 40px;
    border-radius: var(--analytics-radius-md);
    overflow: hidden;
    background: var(--analytics-background);
}

.quadrant-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--analytics-space-xs);
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: var(--analytics-transition);
}

.quadrant-bar:hover {
    filter: brightness(1.1);
}

.quadrant-bar.stars {
    background: var(--analytics-stars);
}

.quadrant-bar.potential {
    background: var(--analytics-potential);
}

.quadrant-bar.risks {
    background: var(--analytics-risks);
}

.quadrant-bar.remove {
    background: var(--analytics-remove);
}

.bar-icon {
    font-size: 18px;
}

.bar-count {
    font-weight: 700;
}

/* Top Product Section */
.top-product-section {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-lg);
    margin-bottom: var(--analytics-space-lg);
}

.top-product-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-md) 0;
}

.top-product-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--analytics-space-lg);
    background: var(--analytics-background);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-md);
}

.top-product-card .product-image {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: var(--analytics-radius-md);
    overflow: hidden;
    background: var(--analytics-surface);
}

.top-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-product-card .product-info {
    display: flex;
    flex-direction: column;
}

.top-product-card .product-info h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-xs) 0;
}

.top-product-card .product-brand {
    font-size: 14px;
    color: var(--analytics-primary);
    font-weight: 600;
    margin-bottom: var(--analytics-space-xs);
}

.top-product-card .product-article {
    font-size: 12px;
    color: var(--analytics-text-tertiary);
    margin-bottom: var(--analytics-space-md);
}

.product-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-md);
}

.product-metrics-grid .metric-item {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xs);
}

.product-metrics-grid .label {
    font-size: 11px;
    color: var(--analytics-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.product-metrics-grid .value {
    font-size: 16px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.btn-view-top-product {
    padding: var(--analytics-space-sm) var(--analytics-space-md);
    background: var(--analytics-primary);
    color: white;
    border: none;
    border-radius: var(--analytics-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--analytics-transition);
    align-self: flex-start;
}

.btn-view-top-product:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

/* Group Filters */
.group-filters {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    padding: var(--analytics-space-md);
    margin-bottom: var(--analytics-space-lg);
}

.group-filters .filters-header {
    margin-bottom: var(--analytics-space-md);
}

.group-filters .filters-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.group-filters .filters-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: var(--analytics-space-md);
    align-items: center;
}

/* Group Products */
.group-products {
    margin-top: var(--analytics-space-lg);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--analytics-space-lg);
}

/* Group Product Card */
.group-product-card {
    background: var(--analytics-surface);
    border: 1px solid var(--analytics-border);
    border-radius: var(--analytics-radius-lg);
    overflow: hidden;
    transition: var(--analytics-transition);
    cursor: pointer;
}

.group-product-card:hover {
    box-shadow: var(--analytics-shadow-md);
    transform: translateY(-4px);
}

.group-product-card .product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--analytics-background);
    overflow: hidden;
}

.group-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-product-card .product-quadrant {
    position: absolute;
    top: var(--analytics-space-sm);
    right: var(--analytics-space-sm);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--analytics-background);
    box-shadow: var(--analytics-shadow-sm);
}

.group-product-card .product-info {
    padding: var(--analytics-space-md);
}

.group-product-card .product-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 var(--analytics-space-xs) 0;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-product-card .product-brand {
    font-size: 13px;
    color: var(--analytics-primary);
    font-weight: 600;
    margin-bottom: var(--analytics-space-xs);
}

.group-product-card .product-article {
    font-size: 11px;
    color: var(--analytics-text-tertiary);
    margin-bottom: var(--analytics-space-md);
}

.group-product-card .product-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--analytics-space-xs);
    margin-bottom: var(--analytics-space-md);
}

.group-product-card .metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.group-product-card .metric-row .label {
    color: var(--analytics-text-secondary);
}

.group-product-card .metric-row .value {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.group-product-card .btn-view-details {
    width: 100%;
    padding: var(--analytics-space-sm);
    background: var(--analytics-primary);
    color: white;
    border: none;
    border-radius: var(--analytics-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--analytics-transition);
}

.group-product-card .btn-view-details:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

/* Empty State */
.group-empty {
    text-align: center;
    padding: var(--analytics-space-xl) var(--analytics-space-lg);
}

.group-empty .empty-icon {
    font-size: 64px;
    margin-bottom: var(--analytics-space-md);
}

.group-empty p {
    font-size: 16px;
    color: var(--analytics-text-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .top-product-card {
        grid-template-columns: 1fr;
    }
    
    .product-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .group-filters .filters-row {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .group-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .group-modal {
        max-height: 95vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .product-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}