/* Файл: static/css/infographic.css */

/* =========================================================
   1. БАЗА И ПЕРЕМЕННЫЕ (ЦВЕТА ГРАФИКОВ ОСТАВЛЯЕМ ЖЕСТКИМИ)
   ========================================================= */
:root {
    /* Эти цвета не меняем, чтобы графики оставались привычными */
    --ok-bg: #dcfce7;   --ok-border: #86efac;   --ok-text: #14532d;
    --warn-bg: #fef9c3; --warn-border: #fde047; --warn-text: #713f12;
    --risk-bg: #fee2e2; --risk-border: #fca5a5; --risk-text: #7f1d1d;
    
    --c-bar: #2563eb;
    --ok: #16a34a; --warn: #f59e0b; --risk: #ef4444; 
}

.container--fluid { 
    width: 95% !important; 
    max-width: 1500px !important; 
    margin: 0 auto; 
    padding-left: 15px; 
    padding-right: 15px; 
}

/* Сброс стилей новости */
.main-article--infographic { 
    background: transparent !important; 
    box-shadow: none !important; 
    padding: 0 !important; 
    border: none !important; 
    font-family: var(--font-main) !important; 
    color: var(--text-body); 
}

.main-article--infographic .main-article__header, 
.main-article--infographic .main-article__body { 
    display: none !important; 
    visibility: hidden !important; 
    max-height: 0 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    overflow: hidden; 
}

/* =========================================================
   2. СТРУКТУРА (АДАПТАЦИЯ ПОД ТЕМНУЮ ТЕМУ)
   ========================================================= */
.ig-wrap-fullwidth { 
    display: grid; 
    gap: 30px; 
    width: 100%; 
}

.ig-block { 
    /* БЫЛО: background: #fff; border: 1px solid #e5e7eb; */
    background: var(--bg-main); 
    border: 1px solid var(--border-color);
    
    border-radius: 12px; 
    padding: 24px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    width: 100%; 
    box-sizing: border-box;
    min-width: 0; 
}

.ig-block h2 { 
    font-size: var(--fs-h2);       
    line-height: var(--lh-title);  
    font-weight: 700; 
    margin: 0 0 20px; 
    text-align: center; 
    color: var(--text-title);      
}

.ig-block p, .section-note, .scn-body { 
    font-size: var(--fs-body);     
    line-height: var(--lh-body);   
    color: var(--text-body);       
}

/* HERO (Оставляем темным, так как он всегда акцентный) */
.ig-block--hero { padding: 0 !important; overflow: hidden; border: none !important; }
.ig-hero-content { position: relative; width: 100%; height: 350px !important; background-color: var(--section-dark-bg, #111827); display: flex; justify-content: center; align-items: center; overflow: hidden; margin-bottom: 0; }
.ig-hero-img { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 1; margin: 0 !important; border-radius: 0 !important; }
.ig-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--hero-overlay-bg, rgba(0, 0, 0, 0.55)); z-index: 2; }
.ig-hero-text { position: relative; z-index: 10; text-align: center; color: var(--text-inverse); padding: 20px; max-width: 1000px; }
.ig-hero-text.no-photo { color: var(--text-title); }

.ig-main-title { 
    font-size: calc(var(--fs-h1) * 1.2) !important; 
    line-height: 1.2 !important; 
    font-weight: 800 !important; 
    margin: 0 0 20px 0 !important; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); 
    color: inherit !important; 
}

.ig-meta { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 12px; 
    font-size: var(--fs-small);    
    font-weight: 700; 
    text-transform: uppercase; 
    color: inherit !important; 
    opacity: 0.9; 
}
.ig-meta a { color: inherit !important; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.5); }
.ig-print-btn { cursor: pointer; opacity: 0.8; font-size: 18px; }

.ig-overview-text { 
    padding: 24px 40px 30px; 
    text-align: left; 
    font-size: var(--fs-body);     
    line-height: var(--lh-body); 
}

/* =========================================================
   3. МАТРИЦА РИСКОВ (FON & BORDERS ADAPTED)
   ========================================================= */
.risk-matrix-wrap { width: 100%; padding-bottom: 10px; }
.risk-matrix { display: grid; grid-template-columns: 100px 1fr 1fr 1fr; grid-template-rows: 40px auto auto auto; gap: 12px; width: 100%; }

.risk-matrix .axis { 
    font-size: var(--fs-small);    
    color: var(--text-muted);      /* БЫЛО: var(--text-title). Muted лучше для осей */
    display: flex; align-items: center; justify-content: center; font-weight: 600; text-align: center; 
}
.risk-matrix .axis.left { justify-content: flex-start; padding-left: 0; color: var(--text-title); }

.risk-matrix .cell { 
    /* БЫЛО: border: 1px solid #e5e7eb; background: #fff; */
    border: 1px solid var(--border-color); 
    background: var(--bg-main); 
    
    border-radius: 8px; 
    padding: 10px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
    display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 120px; justify-content: center; 
}

/* Таблетки рисков (ЦВЕТА ОСТАВЛЯЕМ КАК ЕСТЬ) */
.risk-pill { 
    display: flex; align-items: flex-start; gap: 8px; border-radius: 6px; border: 1px solid transparent; padding: 8px 10px; width: 100%; box-sizing: border-box; 
    font-size: 13px; 
    line-height: 1.4; 
    font-weight: 500; 
    opacity: 0; transform: scale(0.9); transition: transform 0.4s ease-out, opacity 0.4s ease-out; 
}
.cell.inview .risk-pill { opacity: 1; transform: scale(1); }
.risk-pill::before { content: ""; display: block; width: 8px; height: 8px; min-width: 8px; border-radius: 50%; margin-top: 5px; }

/* Цвета рисков фиксированы, они должны выделяться и на черном фоне */
.risk-pill.low { background-color: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.risk-pill.low::before { background-color: #16a34a; }
.risk-pill.med { background-color: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.risk-pill.med::before { background-color: #d97706; }
.risk-pill.high { background-color: var(--risk-bg); border-color: var(--risk-border); color: var(--risk-text); }
.risk-pill.high::before { background-color: #dc2626; }

.risk-matrix-mobile { display: none !important; }

/* МОБИЛЬНАЯ МАТРИЦА */
@media (max-width: 768px) {
    .ig-hero-content { height: auto !important; min-height: 320px !important; padding: 40px 0; }
    .ig-main-title { font-size: calc(var(--fs-h1) * 1.1) !important; } 
    .ig-meta { flex-direction: column; gap: 12px; }
    .ig-meta .sep { display: none; }
    .ig-overview-text { padding: 25px 20px; }

    .risk-matrix { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
    .risk-matrix .axis { display: none !important; }
    .risk-matrix .cell::before { order: 1; }
    .risk-matrix .cell::after  { order: 2; }
    .risk-matrix .cell .risk-pill { order: 3; }





    
    /* =========================================================
   МОБИЛЬНАЯ МАТРИЦА: ГРУППИРОВКА ПО ВЕРОЯТНОСТИ
   Вставить внутрь @media (max-width: 768px)
   ========================================================= */

/* 1. Базовые настройки ячейки для вертикальной верстки */
.risk-matrix .cell {
    display: flex;
    flex-direction: column;
    /* Убираем лишние отступы внутри, чтобы заголовок встал плотно */
    position: relative;
    margin-bottom: 10px; 
}

/* 2. Настраиваем "Влияние" (маленький подзаголовок внутри каждой карточки) */
.risk-matrix .cell::after {
    order: 1; /* Ставим перед плашкой риска */
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: block;
    content: "Влияние: ???"; /* Заглушка, ниже переопределим */
}

.risk-matrix .cell .risk-pill {
    order: 2; /* Плашка идет после подзаголовка */
}

/* 3. Создаем "Заголовки разделов" (Вероятность) 
   Только у ПЕРВЫХ ячеек в каждой группе (6, 10, 14) */
.risk-matrix .cell:nth-child(6),
.risk-matrix .cell:nth-child(10),
.risk-matrix .cell:nth-child(14) {
    margin-top: 30px; /* Отступ сверху, чтобы отделить группу от предыдущей */
    padding-top: 40px; /* Место внутри карточки под заголовок */
    position: relative;
    overflow: visible; /* Чтобы заголовок мог выходить за границы, если нужно */
}

/* Общий стиль для заголовка группы */
.risk-matrix .cell:nth-child(6)::before,
.risk-matrix .cell:nth-child(10)::before,
.risk-matrix .cell:nth-child(14)::before {
    position: absolute;
    top: -30px; /* Выносим заголовок НАД карточкой */
    left: 0;
    width: 100%;
    
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--text-title);
    
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color); /* Линия под заголовком группы */
    display: block;
    content: ""; /* Текст зададим ниже */
}

/* ---------------------------------------------------------
   ГРУППА 1: ВЫСОКАЯ ВЕРОЯТНОСТЬ
   --------------------------------------------------------- */
/* Заголовок группы (вешается на первую ячейку - №6) */
.risk-matrix .cell:nth-child(6)::before { content: "Вероятность: Высокая"; border-color: var(--risk-border); color: var(--risk-text); }

/* Подписи влияния для ячеек этой группы (6, 7, 8) */
.risk-matrix .cell:nth-child(6)::after { content: "Влияние: Низкое"; }
.risk-matrix .cell:nth-child(7)::after { content: "Влияние: Среднее"; }
.risk-matrix .cell:nth-child(8)::after { content: "Влияние: Высокое"; }


/* ---------------------------------------------------------
   ГРУППА 2: СРЕДНЯЯ ВЕРОЯТНОСТЬ
   --------------------------------------------------------- */
/* Заголовок группы (вешается на первую ячейку - №10) */
.risk-matrix .cell:nth-child(10)::before { content: "Вероятность: Средняя"; border-color: var(--warn-border); color: var(--warn-text); }

/* Подписи влияния для ячеек этой группы (10, 11, 12) */
.risk-matrix .cell:nth-child(10)::after { content: "Влияние: Низкое"; }
.risk-matrix .cell:nth-child(11)::after { content: "Влияние: Среднее"; }
.risk-matrix .cell:nth-child(12)::after { content: "Влияние: Высокое"; }


/* ---------------------------------------------------------
   ГРУППА 3: НИЗКАЯ ВЕРОЯТНОСТЬ
   --------------------------------------------------------- */
/* Заголовок группы (вешается на первую ячейку - №14) */
.risk-matrix .cell:nth-child(14)::before { content: "Вероятность: Низкая"; border-color: var(--ok-border); color: var(--ok-text); }

/* Подписи влияния для ячеек этой группы (14, 15, 16) */
.risk-matrix .cell:nth-child(14)::after { content: "Влияние: Низкое"; }
.risk-matrix .cell:nth-child(15)::after { content: "Влияние: Среднее"; }
.risk-matrix .cell:nth-child(16)::after { content: "Влияние: Высокое"; }

    /* Тексты заголовков в мобильной матрице */
    .risk-matrix .cell:nth-child(6)::before,
    .risk-matrix .cell:nth-child(7)::before,
    .risk-matrix .cell:nth-child(8)::before {
        color: var(--text-title); /* Адаптивный цвет */
    }

    .risk-matrix .cell::after { 
        color: var(--text-body); /* Адаптивный цвет */
    }
    
    .risk-matrix .cell:empty { display: none; }
    .risk-matrix .cell:nth-child(6):empty, .risk-matrix .cell:nth-child(7):empty, .risk-matrix .cell:nth-child(8):empty { display: block; min-height: auto; border: none; box-shadow: none; background: transparent; padding-bottom: 0; }
}





/* =========================================================
   4. ГРАФИКИ И ТАБЛИЦА (АДАПТИВНЫЕ КОНТЕЙНЕРЫ)
   ========================================================= */
.charts { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:start; }
.chart { 
    grid-column:span 12; 
    /* БЫЛО: background:#fff; border:1px solid #e5e7eb; */
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius:12px; padding:16px; 
}
@media (min-width: 1000px) { .chart { grid-column:span 6; } }

.chart h3 { 
    margin:0 0 12px 0; 
    font-size: var(--fs-h3);   
    text-align:center; 
    color: var(--text-title); 
}

.note { 
    font-size: var(--fs-small); 
    color: var(--text-muted); /* Muted лучше для примечаний */
    text-align:center; 
    margin-top:8px; 
}
.chart-tooltip { position: fixed; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; z-index: 9999; }

/* Анимации баров оставляем как есть */
.chart .anim-bar { transform: scaleY(0); transform-origin: bottom; transition: transform 1.2s ease-out; }
.chart.inview .anim-bar { transform: scaleY(1); }
.chart .anim-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.2s ease-in-out; }
.chart.inview .anim-line { stroke-dashoffset: 0; }
.chart .anim-point { opacity: 0; transition: opacity 1.2s ease-out; }
.chart.inview .anim-point { opacity: 1; }

/* -----------------------------------------------------
   ТАБЛИЦА (АДАПТАЦИЯ)
   ----------------------------------------------------- */
.responsive-table-wrap {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0 12px; padding-bottom: 5px; 
    /* БЫЛО: border: 1px solid #e5e7eb; background: #fff; */
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    
    border-radius: 12px; max-width: 100vw; 
}

.styled-table {
    width: 100%; min-width: 1000px !important; border-collapse: collapse; 
    background: var(--bg-main); /* Фон таблицы */
    font-size: var(--fs-small); 
}

/* Ячейки */
.styled-table th, .styled-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color); /* Границы строк */
    white-space: nowrap !important;
}

.styled-table td, 
.styled-table thead th:not(:first-child) {
    text-align: right;
    font-family: monospace, system-ui;
    color: var(--text-body);
}

/* Шапка */
.styled-table thead th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px; 
    text-transform: uppercase;
    /* БЫЛО: background-color: #f9fafb; */
    background-color: var(--bg-secondary);
}

/* Первая колонка */
.styled-table tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--text-title);
}

/* Ховер на строки: был #f9fbff, стал bg-secondary */
.styled-table tbody tr:hover { background-color: var(--bg-secondary); }

/* =========================================================
   5. КАРТОЧКИ KPI (АДАПТАЦИЯ)
   ========================================================= */
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.col-4 { grid-column: span 12; } .col-6 { grid-column: span 12; }
@media (min-width: 768px) { .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } }

.card { 
    /* БЫЛО: background: #fff; border: 1px solid #e5e7eb; */
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    
    border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; height: 100%; box-sizing: border-box; 
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }

.kpi { 
    font-weight: 700; 
    margin-bottom: 10px; 
    font-size: var(--fs-h3);   
    color: var(--text-title); 
}

.muted { 
    color: var(--text-muted); /* Лучше использовать muted переменную */
    font-size: var(--fs-body); 
    line-height: var(--lh-body); 
}

/* Фон полоски бара делаем адаптивным (был #f1f4f8) */
.bar { height:8px; background: var(--bg-secondary); border-radius:6px; overflow:hidden; border:1px solid var(--border-color); margin-top:14px; }
.bar > i { display:block; height:100%; width:0; } 
.bar.inview > i.b-low { animation: barLow 1s ease-out forwards; }
.bar.inview > i.b-med { animation: barMed 1.2s ease-out forwards; }
.bar.inview > i.b-high { animation: barHigh 1.35s ease-out forwards; }
@keyframes barLow { from {width:0; background:#34d399;} to {width:34%; background:var(--ok);} }
@keyframes barMed { from {width:0; background:#fde68a;} to {width:62%; background:var(--warn);} }
@keyframes barHigh { from {width:0; background:#fecaca;} to {width:88%; background:var(--risk);} }

.pillrow { display:flex; flex-wrap:wrap; gap:16px; }
.pill { 
    padding:16px; 
    border:1px solid var(--border-color); 
    border-radius:12px; 
    background: var(--bg-secondary); /* БЫЛО #f9fbff */
    flex:1; min-width: 280px; 
}

.pill b { 
    display:block; 
    margin-bottom:8px; 
    font-size: var(--fs-h3); 
    color: var(--text-title); 
}

/* =========================================================
   ДОПОЛНЕНИЯ: ТУЛТИПЫ И ИСТОЧНИК
   ========================================================= */
.table-source {
    text-align: right;
    font-size: var(--fs-small);
    color: var(--text-muted); 
    margin-top: 8px;
    padding-right: 4px;
    font-style: italic;
    min-width: 800px; 
}

.chart-tooltip { 
    position: fixed; 
    background: rgba(17, 24, 39, 0.9); /* Оставляем темным всегда */
    color: #fff; 
    padding: 8px 12px; 
    border-radius: 6px; 
    font-size: 12px; 
    line-height: 1.4;
    pointer-events: none; 
    z-index: 9999; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 0.2s ease, top 0.1s ease, left 0.1s ease;
    visibility: hidden;
}

.chart rect, .chart circle { cursor: pointer; }

/* =========================================================
   7. СЦЕНАРИИ (АДАПТАЦИЯ)
   ========================================================= */

.scenarios-wrapper { display: flex; flex-direction: column; gap: 20px; }

/* --- ВЕРХНИЙ БЛОК --- */
.scn-main {
    /* БЫЛО: border: ... #e5e7eb; background: #fff; */
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    background: var(--bg-main);
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-left: 6px solid #2563eb; 
}

.scn-head { text-align: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }

.scn-head .title { 
    font-weight: 700; 
    font-size: var(--fs-h3);
    color: var(--text-title); 
    line-height: var(--lh-title);
}

.scn-head .subtitle { 
    color: var(--text-title);  
    font-size: var(--fs-small);
    margin-top: 6px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    font-weight: 700; 
}

.scn-body-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.scn-col h3 { 
    font-size: 15px; 
    margin: 0 0 12px; 
    text-align: center; 
    color: var(--text-title); 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 0.5px;
}

/* --- ТРИГГЕРЫ --- */
.scn-triggers { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.scn-triggers h3 { margin: 0 0 15px; font-size: 15px; text-align: center; font-weight: 600; color: var(--text-muted); }

.triggers-grid { 
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 12px; 
    width: 70%; 
    margin: 0 auto; 
}
.triggers-grid .risk-pill { 
    /* БЫЛО: background-color: #f3f4f6; color: #374151; */
    background-color: var(--bg-secondary); 
    color: var(--text-body);
    border-color: var(--border-color);
    
    font-size: 14px; 
    opacity: 1; transform: scale(1); 
    width: 100%; 
    display: flex; 
    justify-content: center;
}
.triggers-grid .risk-pill::before { display: none; } 

@media (max-width: 900px) {
    .scn-bottom-row { grid-template-columns: 1fr; }
    .triggers-grid { grid-template-columns: 1fr; width: 100%; margin: 0; gap: 8px; }
}

/* --- НИЖНИЙ РЯД (ОПТИМИСТ + ПЕССИМИСТ) --- */
.scn-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.scn-card {
    /* БЫЛО: border: ... #e5e7eb; background: #fff; */
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    background: var(--bg-main);
    
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.scn-card h3 { 
    margin: 0 0 6px; 
    font-size: var(--fs-h3);
    font-weight: 700;
    text-align: center; 
    color: var(--text-title); 
}

.scn-card .subtitle { 
    font-size: var(--fs-small); 
    color: var(--text-title); 
    text-align: center; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    font-weight: 700;
}

.scn-card--med { border-left: 6px solid #f59e0b; } 
.scn-card--low { border-left: 6px solid #ef4444; } 

/* СПИСКИ */
.bullets-style ul { list-style: none; padding: 0; margin: 0; }
.bullets-style li { 
    position: relative; padding-left: 24px; margin-bottom: 10px; 
    font-size: var(--fs-body); 
    line-height: var(--lh-body); 
    color: var(--text-body);
}

.bullets-style li::before {
    content: "•"; 
    position: absolute; 
    left: 4px; top: 0px; 
    color: #2563eb; 
    font-weight: bold; 
    font-size: 20px;
    line-height: 1.4;
}
.scn-card--med .bullets-style li::before { color: #f59e0b; }
.scn-card--low .bullets-style li::before { color: #ef4444; }

@media (max-width: 900px) {
    .scn-body-columns { grid-template-columns: 1fr; gap: 20px; }
    .scn-bottom-row { grid-template-columns: 1fr; }
    .triggers-grid { justify-content: flex-start; }
    .triggers-grid .risk-pill { width: auto; flex: 1 1 auto; justify-content: center; }
}

/* =========================================================
   8. ВЕРСИЯ ДЛЯ ПЕЧАТИ (БЕЗ ИЗМЕНЕНИЙ, ТАМ ВСЕГДА БЕЛОЕ)
   ========================================================= */

@media print {
    /* ... (оставляем весь блок @media print как был, принтер всегда печатает на белом) ... */
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        transition: none !important;
        animation: none !important;
    }

    .modern-footer, .header-nav, .header-tools, .ig-print-btn, 
    .btn-block__print, .search-wrapper, .lang-switch, 
    .risk-matrix-mobile 
    {
        display: none !important;
    }

    .modern-header {
        display: block !important;
        position: static !important;
        border: none !important;
        height: auto !important;
        padding-bottom: 20px !important;
        margin: 0 !important;
    }
    .header-logo { display: block !important; }
    .header-logo img { width: 180px !important; height: auto !important; }

    body, .page-main, .container--fluid, .ig-wrap-fullwidth {
        background: #fff !important;
        min-width: 1024px !important; 
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        display: block !important;
        overflow: visible !important;
    }

    .charts {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        gap: 20px !important;
    }

    .chart {
        grid-column: span 6 !important; 
        margin: 0 !important;
    }

    .grid {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        gap: 20px !important;
    }
    .col-4 { grid-column: span 4 !important; }
    .col-6 { grid-column: span 6 !important; }

    .scn-body-columns, .scn-bottom-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    
    .triggers-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .risk-matrix-wrap { display: block !important; }
    
    .risk-matrix {
        display: grid !important;
        grid-template-columns: 100px 1fr 1fr 1fr !important;
        grid-template-rows: 40px auto auto auto !important;
        gap: 10px !important;
    }
    .risk-matrix .axis { display: flex !important; color: #000 !important; border: none !important; }
    
    .risk-matrix .cell {
        order: initial !important; 
        margin: 0 !important;
        border: 1px solid #999 !important;
        background: #fff !important;
    }
    .risk-matrix .cell::before, .risk-matrix .cell::after { display: none !important; }

    .responsive-table-wrap {
        border: none !important;
        overflow: visible !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .styled-table {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 8pt !important;
        table-layout: fixed !important; 
    }

    .styled-table th, .styled-table td {
        border: 1px solid #000 !important;
        color: #000 !important;
        padding: 4px 4px !important;
        white-space: normal !important; 
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        vertical-align: middle !important;
    }

    .risk-pill { opacity: 1 !important; transform: none !important; border: 1px solid #999 !important; }
    .chart .anim-bar { transform: scaleY(1) !important; }
    .chart .anim-line { stroke-dashoffset: 0 !important; }
    .chart .anim-point { opacity: 1 !important; }
    
    .bar > i.b-low { width: 34% !important; background: #16a34a !important; }
    .bar > i.b-med { width: 62% !important; background: #f59e0b !important; }
    .bar > i.b-high { width: 88% !important; background: #ef4444 !important; }

    .ig-block, .card, .chart, .scn-main, .scn-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    
    .scn-main { border-left: 6px solid #2563eb !important; }
    .scn-card--med { border-left: 6px solid #f59e0b !important; }
    .scn-card--low { border-left: 6px solid #ef4444 !important; }
}