/* Стили дашбордов РнП. Порт инлайновых стилей zzd-php/_kpi_dashboard.php:245-451.
   Стрелки перемещения показателей сюда не переносятся: у нас вместо них
   перетаскивание за ручку — плоская таблица дашборда это позволяет. */

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

.kpi-summary-table td.text-left,
.kpi-summary-table th.text-left {
    text-align: left;
}

/* Ширины колонок — как в 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 .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-green {
    background-color: #28a745;
}

.progress-bar-orange {
    background-color: #ffc107;
}

.progress-bar-red {
    background-color: #dc3545;
}

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

/* Строки-заглушки на время загрузки */
.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;
}

/* Перетаскивание строк за ручку — вместо стрелок PHP-портала.
   Ручка проявляется при наведении на строку, как на странице фондов. */
.kpi-drag-cell {
    width: 26px;
    padding: 0 !important;
}

.kpi-drag-handle {
    cursor: grab;
    color: #adb5bd;
    opacity: 0;
    transition: opacity 0.15s;
    user-select: none;
    line-height: 1;
}

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

.kpi-summary-table .table-row-wrapper:hover .kpi-drag-handle {
    opacity: 1;
}

/* Строка, которую тащат, и место, куда её положат */
.kpi-summary-table tr.kpi-dragging td {
    opacity: 0.45;
}

.kpi-summary-table tr.kpi-drop-target td {
    box-shadow: inset 0 2px 0 0 #2f6fed;
}

/* Боковые карточки дашборда. Порт стилей из zzd-php/_kpi_dashboard.php:256-300. */
.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); }

.fin-kpi {
    position: relative;
}

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

/* Заголовок фиксированной высоты, чтобы карточки не прыгали; низ уходит в прозрачность */
.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%);
}

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

.fin-kpi[data-w="1"] .fin-kpi-fact { font-size: 0.95rem; }
.fin-kpi[data-w="2"] .fin-kpi-fact { font-size: 1.25rem; }
.fin-kpi[data-w="3"] .fin-kpi-fact { font-size: 1.55rem; }
.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;
}

.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;
}

.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;
}

.fin-kpi.kpi-dragging {
    opacity: 0.45;
}

/* Вкладка «Сквозная конверсия». Порт стилей zzd-php/_dashboard_conversion.php:20-40. */
.conv-table td,
.conv-table th {
    padding: 3px 6px !important;
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

.conv-table .conv-filial {
    text-align: left;
    font-weight: 600;
}

.conv-table .conv-seg {
    color: #6c757d;
}

.conv-table .conv-divider {
    border-left: 2px solid rgb(151, 151, 151) !important;
}

.conv-table .conv-total-row td {
    font-weight: 700;
}

/* Тепловая карта: от красного к зелёному */
.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; }

/* Финансовый дашборд. Порт стилей zzd-php/main_dashboard.php:14-44. */
.fin-kpi-card .fin-gauge {
    margin: 0.25rem 0;
}

.fin-kpi-card .fin-kpi-fact {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    white-space: nowrap;
}

.fin-kpi-growth {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.fin-help {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    font-size: 11px;
    cursor: default;
}

.fin-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.4rem;
}

.fin-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.fin-bar-pct {
    font-size: 12px;
    margin-top: 0.25rem;
}

.fin-funds-table td,
.fin-funds-table th {
    padding: 3px 6px !important;
    font-size: 12px;
    vertical-align: middle;
}

.fin-fund-toggle,
.fin-fund-toggle-empty {
    display: inline-block;
    width: 14px;
    cursor: pointer;
    color: #6c757d;
}

.fin-fund-toggle-empty {
    cursor: default;
}