/* Стили дашбордов РнП. Порт инлайновых стилей zzd-php/_kpi_dashboard.php:262-483.
   Стрелки перемещения строк и подсветка перенесённой строки — те же правила, что у KPI-таблицы
   (kpi-table.css), но та подключена только на страницах KPI-таблицы, поэтому они повторены здесь,
   как и в легаси. Цвет процента и полосы — правилом форматирования, классов цвета нет. */

.kpi-summary-table td,
.kpi-summary-table th {
    padding: 2px 6px !important;
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
}

/* Ширины колонок — как в PHP (_kpi_dashboard.php:161,169) */
.kpi-summary-table th.kpi-name-col {
    min-width: 160px;
}

.kpi-summary-table th.kpi-progress-col {
    min-width: 95px;
}

.kpi-summary-table td:not(.text-left) {
    white-space: nowrap;
}

.kpi-summary-table thead th {
    background-color: #e9ecef;
    font-weight: bold;
}

.kpi-summary-table .border-right {
    border-right: 2px solid rgb(151, 151, 151) !important;
}

/* Граница между блоками «Месяц» и «Год» */
.kpi-summary-table .month-year-divider {
    border-right: 3px solid rgb(151, 151, 151) !important;
}

/* Прогресс-бар */
.progress-bar-container {
    width: 100%;
    height: 18px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
}

.progress-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

/* Без стиля условного форматирования и вне его правил — серая заливка */
.progress-bar-neutral {
    background-color: #adb5bd;
}

/* Процент: цвет правила форматирования — инлайном */
.kpi-summary-table .percent-cell {
    font-weight: bold;
}

/* Отступ названия показателя. В легаси — инлайн с !important поверх компактных отступов
   ячеек (js/_kpi_dashboard.js:278-282); у нас значение приходит переменной --name-indent. */
.kpi-summary-table td.has-name-indent {
    padding-left: var(--name-indent) !important;
}

/* Стрелки перемещения строк — flex, чтобы ореолы не налезали друг на друга */
.move-arrows-inline {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    min-height: 20px;
    border: none !important;
    background: transparent !important;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
}

.move-arrows-inline a {
    flex: 0 0 auto;
    color: #007bff;
    text-decoration: none;
    font-size: 20px;
    display: none;
    padding: 2px 4px;
    line-height: 1;
    transition: color 0.2s;
    z-index: 10;
}

.move-arrows-inline .move-up {
    order: 1;
    transition: all 0.2s ease;
}

.move-arrows-inline .move-down {
    order: 2;
    transition: all 0.2s ease;
}

.move-arrows-inline .move-up:hover {
    color: #0056b3;
    text-decoration: none;
    transform: scale(1.2);
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 3px;
}

.move-arrows-inline .move-down:hover {
    color: #0056b3;
    text-decoration: none;
    transform: scale(1.2);
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 3px;
}

.move-arrows-inline a:hover {
    color: #0056b3;
    text-decoration: none;
}

.table-row-wrapper:hover {
    background-color: #e5edf5 !important;
}

.table-row-wrapper:hover td {
    background-color: #e5edf5 !important;
}

/* Подсветка строки под курсором */
.kpi-summary-table .table-row-wrapper:hover td,
.kpi-summary-table .table-row-wrapper:hover td[style*="background-color"] {
    background-color: #e5edf5 !important;
}

.table-row-wrapper:hover .move-arrows-inline a {
    display: block;
}

/* Подсветка строки после перемещения */
.row-highlighted {
    background-color: #fff3cd !important;
    transition: background-color 0.5s ease;
}

/* Строки-заглушки на время загрузки */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #e9ecef;
    border-radius: 4px;
    color: transparent !important;
}

.skeleton * {
    visibility: hidden;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: fin-shimmer 1.2s infinite;
}

@keyframes fin-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.sk-line {
    height: 1em;
    display: inline-block;
    min-width: 36px;
}

.kpi-summary-table td.text-left .sk-line {
    min-width: 120px;
}

/* Боковые карточки дашборда. Порт стилей из zzd-php/_kpi_dashboard.php:273-317. Правила
   .fin-kpi — только внутри колонки карточек: у плиток финдашборда те же имена со своими стилями. */
.kpi-blocks-row {
    margin-right: -6px;
    margin-left: -6px;
}

.kpi-blocks-row > [class*="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

.kpi-cards-col {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0 -3px;
}

.kpi-cards-col .fin-kpi {
    margin: 0 3px 6px;
}

.kpi-cards-col .fin-kpi[data-w="1"] { flex: 0 0 calc(25% - 6px);  max-width: calc(25% - 6px); }
.kpi-cards-col .fin-kpi[data-w="2"] { flex: 0 0 calc(50% - 6px);  max-width: calc(50% - 6px); }
.kpi-cards-col .fin-kpi[data-w="3"] { flex: 0 0 calc(75% - 6px);  max-width: calc(75% - 6px); }
.kpi-cards-col .fin-kpi[data-w="4"] { flex: 0 0 calc(100% - 6px); max-width: calc(100% - 6px); }

.kpi-cards-col .fin-kpi {
    position: relative;
}

.kpi-cards-col .fin-kpi .card-body {
    padding: 0.55rem 0.7rem;
}

/* Заголовок фиксированной высоты, чтобы карточки не прыгали; низ уходит в прозрачность */
.kpi-cards-col .fin-kpi-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
    margin: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.kpi-cards-col .fin-kpi-fact {
    font-weight: 700;
    color: #2f6fed;
    line-height: 1.15;
    margin-top: 0.2rem;
    white-space: nowrap;
}

.kpi-cards-col .fin-kpi[data-w="1"] .fin-kpi-fact { font-size: 0.95rem; }
.kpi-cards-col .fin-kpi[data-w="2"] .fin-kpi-fact { font-size: 1.25rem; }
.kpi-cards-col .fin-kpi[data-w="3"] .fin-kpi-fact { font-size: 1.55rem; }
.kpi-cards-col .fin-kpi[data-w="4"] .fin-kpi-fact { font-size: 1.9rem; }

/* Ручка и кнопка ширины — появляются при наведении на карточку */
.kpi-card-handle {
    position: absolute;
    bottom: 8px;
    right: 10px;
    z-index: 2;
    cursor: grab;
    color: #adb5bd;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
    user-select: none;
}

.kpi-card-handle:active {
    cursor: grabbing;
}

.kpi-cards-col .fin-kpi:hover .kpi-card-handle {
    opacity: 1;
}

.kpi-card-width-btn {
    position: absolute;
    bottom: 8px;
    right: 32px;
    z-index: 2;
    cursor: pointer;
    color: #adb5bd;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}

.kpi-cards-col .fin-kpi:hover .kpi-card-width-btn {
    opacity: 1;
}

.kpi-card-width-menu {
    position: absolute;
    bottom: 28px;
    right: 6px;
    z-index: 20;
    display: none;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px;
}

.kpi-card-width-menu.open {
    display: block;
}

.kpi-card-width-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.kpi-card-width-opt:hover {
    background: #f2f5fb;
}

.kpi-card-width-opt.active {
    background: #e8f0ff;
}

.kpi-card-width-opt .wcells {
    display: inline-flex;
    gap: 2px;
}

.kpi-card-width-opt .wcells i {
    width: 8px;
    height: 12px;
    border: 1px solid #b7c3d6;
    border-radius: 2px;
    box-sizing: border-box;
}

.kpi-card-width-opt .wcells i.on {
    background: #2f6fed;
    border-color: #2f6fed;
}

.kpi-card-width-opt .wlabel {
    font-size: 12px;
    color: #6c757d;
}


/* Вкладки страницы и «Сквозная конверсия». Порт стилей zzd-php/_dashboard_conversion.php:14-44. */
.rnp-tabs.nav-tabs { border-bottom: 2px solid #e6eaf0; }
.rnp-tabs.nav-tabs .nav-link { border: 0; color: #6c757d; font-weight: 700; padding: .7rem 1.4rem; }
.rnp-tabs.nav-tabs .nav-link:hover { color: #2f6fed; }
.rnp-tabs.nav-tabs .nav-link.active { color: #2f6fed; background: transparent; border-bottom: 2px solid #2f6fed; margin-bottom: -2px; }

.conv-table { width: 100%; margin: 0; }
.conv-table td, .conv-table th { padding: 2px 6px !important; vertical-align: middle; text-align: center; font-size: 12px; border-top: 1px solid #eef1f5; }
.conv-table thead th { background: #e9ecef; font-weight: 700; border-top: 0; }
.conv-filial { text-align: left; font-weight: 600; }
.conv-seg { text-align: left; color: #6c757d; }
.conv-cell { font-weight: 600; }
.conv-good   { background: #d8efdf; color: #15803d; }   /* высокий */
.conv-lime   { background: #e9f2d4; color: #4d7c0f; }
.conv-yellow { background: #faf0cf; color: #a16207; }
.conv-orange { background: #fce0d2; color: #c2410c; }
.conv-red    { background: #f8dada; color: #c0392b; }   /* низкий */
.conv-na     { color: #adb5bd; }
.conv-divider { border-left: 2px solid #dbe1ea; }
/* Итого по сети — жирная верхняя граница */
.conv-total-row td { border-top: 2px solid #cbd5e1; font-weight: 700; }
/* Подсветка при наведении: доп. фон поверх тепловой карты (тон не теряется) — строка + заголовок столбца */
.conv-table td.conv-hl-row { background-image: linear-gradient(rgba(47,111,237,.13), rgba(47,111,237,.13)); }
.conv-table thead th.conv-hl-col { background-image: linear-gradient(rgba(47,111,237,.22), rgba(47,111,237,.22)); }
/* «?» с пояснением формулы (только на арифметических столбцах) */
.conv-tip-icon { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:4px;
    border-radius:50%; background:#c9d4e6; color:#fff; font-size:10px; font-weight:700; line-height:1; cursor:help; vertical-align:middle; }
.conv-tip-icon:hover { background:#2f6fed; }

/* Финансовый дашборд. Порт стилей zzd-php/main_dashboard.php:8-31 под обёрткой страницы
   .fin-dashboard: те же имена классов у боковых карточек дашбордов РнП. */
.fin-dashboard .fin-controls .btn { margin: 2px; }
.fin-dashboard .fin-controls .btn.active { box-shadow: 0 0 0 2px rgba(0,123,255,.5) inset; }
.fin-dashboard .fin-kpi .card-body { padding: 1rem 1.25rem; }
.fin-dashboard .fin-kpi-title { font-size: 1rem; font-weight: 600; margin: 0; }
.fin-dashboard .fin-kpi-fact { font-size: 1.9rem; font-weight: 700; color: #2f6fed; line-height: 1.1; margin-top: .25rem; }
.fin-dashboard .fin-kpi-growth { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.fin-dashboard .fin-kpi-growth.up { color: #28a745; } .fin-dashboard .fin-kpi-growth.down { color: #dc3545; }
.fin-dashboard .fin-gauge { width: 100%; max-width: 200px; margin: 0 auto; }
.fin-dashboard .fin-bar { height: 16px; background: #e9ecef; border-radius: 8px; position: relative; margin-top: .5rem; overflow: hidden; }
.fin-dashboard .fin-bar-fill { height: 100%; border-radius: 8px; background: #28a745; width: 0; transition: width .4s; }
.fin-dashboard .fin-bar-pct { font-size: .8rem; font-weight: 600; }
.fin-dashboard .fin-help { display:inline-block; width:16px; height:16px; line-height:16px; text-align:center; border-radius:50%;
            background:#adb5bd; color:#fff; font-size:11px; cursor:help; font-weight:700; }
.fin-dashboard .fin-fund-toggle { cursor:pointer; user-select:none; width:18px; display:inline-block; color:#2f6fed; font-weight:700; }
.fin-dashboard .fin-fund-name { white-space:nowrap; }
/* Скелетон факта — строка во всю ширину плитки, как в легаси (у дашбордов РнП .sk-line строчный) */
.fin-dashboard .sk-line { height: 1em; display: block; min-width: 0; }

/* Вид «С неделями»: таблица на всю ширину, колонка плиток уезжает (плитки — часть месячного вида).
   Ширина анимируется; недельные ячейки проявляются fade-ом (zzd-php/_kpi_dashboard.php:328-342).
   У нас колонка плиток — .kpi-cards-column, сами плитки лежат в .kpi-cards-col внутри неё. */
.kpi-blocks-row > .kpi-table-col,
.kpi-blocks-row > .kpi-cards-column { transition: flex-basis .35s ease, max-width .35s ease, opacity .2s ease; }
.kpi-weeks-mode .kpi-blocks-row > .kpi-table-col { flex-basis: 100%; max-width: 100%; }
.kpi-weeks-mode .kpi-blocks-row > .kpi-cards-column { flex-basis: 0; max-width: 0; max-height: 0; opacity: 0; padding: 0; margin: 0; overflow: hidden; }
/* Названия в недельном виде и на время перехода не переносятся: иначе при 20+ колонках таблица сжимает
   их до слова в строке, а во время анимации ширина колонки «дышит» */
.kpi-weeks-mode .kpi-summary-table td.text-left,
.kpi-table-col.sliding .kpi-summary-table td.text-left { white-space: nowrap; }
/* Пока контейнер едет, таблица шире него — обрезаем край, чтобы не мигал горизонтальный скролл */
.kpi-table-col.sliding .table-responsive { overflow: hidden; }
.kpi-summary-table .wk { transition: opacity .25s ease .1s; }
.kpi-summary-table.wk-fading .wk { opacity: 0; }