:root {
    /* Основные цвета */
    --general-bg: #fff3e0;
    --general-metrics-bg: #fff8e1;

    /* Цвета для аккаунтов */
    --account-header-bg: #c5cae9;
    --account-bg: #e8eaf6;

    /* Цвета для групп */
    --group-header-bg: #a5d6a7;
    --group-bg: #e8f5e9;

    /* Цвета для кампаний */
    --campaign-header-bg: #90caf9;
    --campaign-bg: #e3f2fd;

    /* Цвета для NM (товаров) */
    --nm-header-bg: #ffcc80;
    --nm-bg: #fff3e0;

    --hover-bg: #e0e0e0;
    --border-color: #bdbdbd;
    --border-thick: 2px solid #9e9e9e;
    --text-color: #424242;
    --level-indent: 20px;
}

/* Предотвращаем появление скролла при анимациях */
html {
    overflow: hidden !important;
    height: 100%;
}

body {
    overflow: hidden !important;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.container-fluid {
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding: 0 0 100px 0;
    margin: 0;
    width: 100%;
    height: calc(100vh - 56px);
    position: relative;
}

.report-table {
    display: table;
    width: auto;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 0;
    background-color: #fff;
    position: relative;
    padding-bottom: 100px;
}

.report-table thead {
    display: table-header-group;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.report-table tbody {
    display: table-row-group;
}

.report-table tr {
    display: table-row;
}

/* Обновляем стили для липкой колонки */
.sticky-column {
    position: sticky;
    left: 0;
    background-color: inherit;
    z-index: 2;
}

.report-table thead .sticky-column {
    z-index: 1001;
    background-color: #f8f9fa;
}

/* Устанавливаем ширину для колонок и минимальные отступы */
.report-table th,
.report-table td {
    display: table-cell;
    vertical-align: middle;
    border: var(--border-thick);
    width: 70px;!important;
    min-width: 50px;!important;
    max-width: 80px;!important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 1px !important;
    box-sizing: border-box;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    height: 24px;!important;
}

.report-table th:first-child,
.report-table td:first-child {
    width: 280px;
    min-width: 180px;
    max-width: none;
    padding: 0 1px !important;
    height: 24px;!important;
}

/* Переопределяем Bootstrap стили для таблицы */
.table td,
.table th {
    padding:0 1px !important;
    vertical-align: middle;
    border: var(--border-thick);
    height: 24px;!important;
}

/* Липкая колонка */
.sticky-column {
    padding: 0 1px !important;
}

.metric-row td {
    padding: 0 1px !important; 
    line-height: 1.2; 
}


/* Убираем лишние отступы между tbody */
.report-table tbody + tbody {
    margin-top: 0;
}

/* Добавляем отступ снизу через пустую строку */
.report-table::after {
    content: "";
    display: table-row;
    height: 400px;
}
.period-column-cell{
    font-weight: 700;
}
/* Стили для Select2 в модальном окне */
.select2-container {
    z-index: 9999;
}

.select2-dropdown {
    z-index: 9999;
}

.select2-container--open {
    z-index: 9999;
}

.modal-body {
    overflow: visible !important;
}

.modal-content {
    overflow: visible !important;
}

.modal {
    overflow: visible !important;
}

body.modal-open {
    overflow: visible !important;
}

/* Стили для контекстного меню */
#campaign-context-menu {
    z-index: 10000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#campaign-context-menu .dropdown-item:hover {
    background-color: var(--hover-bg);
}

/* Стили для модального окна выбора группы */
#group-selection-modal .form-group {
    margin-bottom: 1rem;
}

#group-selection-modal .existing-groups-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

#group-selection-modal .group-name-suggestion {
    cursor: pointer;
    display: block;
    padding: 0.25rem 0;
}

#group-selection-modal .group-name-suggestion:hover {
    color: #007bff;
    text-decoration: none;
}

/* Добавляем пустую строку для отступа под заголовком */
.report-table::before {
    content: "";
    display: table-row;
    height: 56px; /* Высота заголовка таблицы */
}

/* Style for section headers (General, Personal Accounts, Groups) */
.report-section-header {
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-color);
}

.report-section-header:hover {
    background-color: var(--hover-bg) !important;
}

.report-section-header td {
    padding: 8px;
    border: var(--border-thick);
    font-weight: bold;
}

/* Стили для сводного отчета */
.report-general .report-section-header {
    background-color: var(--general-bg) !important;
    font-weight: bold;
    font-size: 1.1em;
}

.report-general tr:not(.report-section-header) td {
    background-color: var(--general-metrics-bg) !important;
    border: var(--border-thick);
}

/* Стили для аккаунтов */
tr.report-section-header[onclick*="toggleTbody('pa-"] {
    background-color: var(--account-header-bg) !important;
    font-weight: bold;
    position: relative;
}

tr.report-section-header[onclick*="toggleTbody('pa-"] td.metric-label {
    background-color: var(--account-header-bg) !important;
    color: var(--text-color);
    font-weight: bold;
}

tr.report-section-header[onclick*="toggleTbody('pa-"] td:not(.metric-label) {
    background-color: transparent !important;
}

tr.report-section-header[onclick*="toggleTbody('pa-"]:hover {
    background-color: var(--hover-bg) !important;
}

tr.report-section-header[onclick*="toggleTbody('pa-"]:hover::after {
    opacity: 1;
}

/* Стили для метрик аккаунтов */
tbody[id^="pa-"] > tr:not([onclick*="toggleTbody"]) {
    background-color: var(--account-bg) !important;
}

/* Подсветка названий метрик аккаунтов */
tbody[id^="pa-"] > tr:not([onclick*="toggleTbody"]) td:first-child {
    background-color: var(--account-bg) !important;
    color: var(--text-color);
    font-weight: 500;
}

/* Подсветка значений метрик аккаунтов */
tbody[id^="pa-"] > tr:not([onclick*="toggleTbody"]) td:not(:first-child) {
    background-color: var(--account-bg) !important;
}

/* Стили для групп - делаем селектор более специфичным */
tr.report-section-header[data-group]:not([data-campaign]) {
    background-color: var(--group-header-bg) !important;
    font-weight: 500;
}

tr.report-section-header[data-group]:not([data-campaign]):hover {
    background-color: var(--hover-bg) !important;
}

/* Стили для кампаний - увеличиваем специфичность */
tr.report-section-header[data-campaign]:not([data-nm]) {
    background-color: var(--campaign-header-bg) !important;
    font-weight: 500;
}
tr.report-section-header[data-campaign]:hover {
    background-color: var(--hover-bg) !important;
}
tr.report-section-header[data-campaign]:not([data-nm]):hover {
    background-color: var(--hover-bg) !important;
}

/* Стили для NM (товаров) */
tr.report-section-header[data-nm] {
    background-color: var(--nm-header-bg) !important;
}

tr.report-section-header[data-nm]:hover {
    background-color: var(--hover-bg) !important;
}


/* Общие стили для метрик */
.metric-row td:first-child {
    color: var(--text-color);
    font-weight: 500;
}

.metric-row td {
    border: var(--border-thick);
}

.text-end {
    text-align: end;
}

.text-center {
    text-align: center !important;
}

/* Remove padding/margins for a tighter layout */
.table {
    margin-bottom: 0;
}

.table td, .table th {
    vertical-align: middle;
    border: var(--border-thick);
}

/* Ensure columns have a minimum width for readability */
.table th:not(.sticky-column),
.table td:not(.sticky-column) {
    min-width: 50px;!important;
    width: 70px;!important;
    height: 24px;!important;
}

.table td:not(:first-child),
.table th:not(:first-child) {
    padding: 0 1px !important;
    vertical-align: middle;
    height: 24px;!important;
}

/* Уровни вложенности */
.report-account {
    background-color: var(--account-bg);
}

.report-group {
    background-color: var(--group-bg);
    margin-left: var(--level-indent);
}

.report-campaign {
    background-color: var(--campaign-bg);
    margin-left: calc(var(--level-indent) * 2);
}

.report-nm {
    background-color: var(--nm-bg);
    margin-left: calc(var(--level-indent) * 3);
}

/* Анимации */
.report-content {
    transition: all 0.3s ease;
}

.report-content.collapsed {
    display: none;
}

/* Метрики */
.metric-row td {
    border: var(--border-thick);
    transition: background-color 0.3s ease;
}

/* Наследуем цвет фона от родительского элемента */
.report-group .metric-row td {
    background-color: var(--group-bg);
}

.report-campaign .metric-row td {
    background-color: var(--campaign-bg);
}

.report-nm .metric-row td {
    background-color: var(--nm-bg);
}

/* Стили для метрик сводного отчета */
tr:first-child + tr .metric-row td,
tr:first-child + tr + tr .metric-row td,
tr:first-child + tr + tr + tr .metric-row td,
tr:first-child + tr + tr + tr + tr .metric-row td,
tr:first-child + tr + tr + tr + tr + tr .metric-row td,
tr:first-child + tr + tr + tr + tr + tr + tr .metric-row td {
    background-color: var(--general-bg);
}

.metric-row:hover td {
    filter: brightness(0.95);
}

/* Анимации для плавного появления/исчезновения */
tbody[id^="pa-"],
tbody[id^="group-"],
tbody[id^="campaign-"],
tbody[id^="nm-"] {
    transition: opacity 0.3s ease;
    opacity: 0;
    transform: translateX(0px);
    will-change: opacity, transform; /* Оптимизация производительности */
}

tbody[id^="pa-"]:not([style*="display: none"]),
tbody[id^="group-"]:not([style*="display: none"]),
tbody[id^="campaign-"]:not([style*="display: none"]),
tbody[id^="nm-"]:not([style*="display: none"]) {
    opacity: 1;
    transform: translateX(0);
}

/* Стили для первой строки таблицы */
.report-table > tbody:first-of-type {
    margin-top: 56px; /* Отступ только для первого tbody */
}

.report-table th:not(:first-child),
.report-table td:not(:first-child) {
    height: 24px;!important;    
    padding: 0 1px !important;
    box-sizing: border-box !important;
}
.tooltip-popup {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
    visibility: hidden;

    max-width: 280px;
    min-width: 150px;
    width: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.tooltip-popup.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.tooltip-popup::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip-popup.bottom::before {
    top: -12px;
    border-color: transparent transparent #333 transparent;
}

.tooltip-popup strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 4px;
}

.tooltip-popup br {
    line-height: 1.8;
}

.tooltip-popup.error {
    background-color: #dc3545;
    border-left: 4px solid #a71e2a;
}

.tooltip-popup.warning {
    background-color: #ffc107;
    color: #212529;
    border-left: 4px solid #d39e00;
}

.tooltip-popup.warning strong {
    color: #212529;
    border-bottom-color: rgba(33, 37, 41, 0.2);
}

.tooltip-popup.info {
    background-color: #17a2b8;
    border-left: 4px solid #117a8b;
}

.tooltip-popup.success {
    background-color: #28a745;
    border-left: 4px solid #1e7e34;
}

.tooltip-popup.large {
    max-width: 350px;
    padding: 12px 16px;
    font-size: 14px;
}

.tooltip-popup.compact {
    max-width: 200px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
}