/* ==========================================================================
   ДиванHall ERP — стилі дашборда
   Єдина карткова система: hero-блок, секції, картки-показники, анімації.
   ========================================================================== */

/* ---- Анімації ---- */
@keyframes dhFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dhGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- Hero ---- */
.dh-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    color: #fff;
    background: linear-gradient(120deg, #f59e0b, #ea580c, #d97706, #f59e0b);
    background-size: 300% 300%;
    animation: dhGradientShift 18s ease infinite, dhFadeUp .5s ease both;
    box-shadow: 0 10px 30px -12px rgba(234, 88, 12, .45);
}
.dh-hero::after {
    content: "";
    position: absolute;
    right: -80px; top: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent);
    pointer-events: none;
}
.dh-hero__title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 .2rem;
}
.dh-hero__date {
    font-size: .95rem;
    opacity: .92;
    text-transform: capitalize;
}

/* Кнопки-сценарії всередині hero */
.dh-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin-top: 1.35rem;
}
.dh-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: 1rem .6rem .9rem;
    text-align: center;
    text-decoration: none;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(6px);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.dh-action:hover {
    transform: translateY(-3px) scale(1.02);
    background: rgba(255, 255, 255, .28);
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .35);
}
.dh-action svg { width: 1.9rem; height: 1.9rem; color: #fff; }
.dh-action__label { font-size: .9rem; font-weight: 700; color: #fff; }
.dh-action__hint  { font-size: .72rem; color: rgba(255,255,255,.85); line-height: 1.25; }

/* ---- Секції ---- */
.dh-section { animation: dhFadeUp .5s ease both; }
.dh-section-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .25rem 0 .9rem;
}
.dh-section-head svg { width: 1.35rem; height: 1.35rem; color: #d97706; }
.dh-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #111827;
}
.dark .dh-section-title { color: #f9fafb; }
.dh-section-sub {
    font-size: .8rem;
    color: #6b7280;
    margin-inline-start: auto;
}

/* ---- Сітка карток ---- */
.dh-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: .9rem;
}

/* ---- Картка-показник ---- */
.dh-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.05rem 1.1rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(3, 7, 18, .06);
    box-shadow: 0 1px 2px rgba(3, 7, 18, .05);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    animation: dhFadeUp .45s ease both;
}
.dh-cards .dh-card:nth-child(1) { animation-delay: .03s; }
.dh-cards .dh-card:nth-child(2) { animation-delay: .09s; }
.dh-cards .dh-card:nth-child(3) { animation-delay: .15s; }
.dh-cards .dh-card:nth-child(4) { animation-delay: .21s; }
.dh-cards .dh-card:nth-child(5) { animation-delay: .27s; }
.dh-cards .dh-card:nth-child(6) { animation-delay: .33s; }
a.dh-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -12px rgba(3, 7, 18, .18);
}
.dark .dh-card {
    background: #18181b;
    border-color: rgba(255, 255, 255, .08);
}

/* Іконка у кольоровому градієнтному колі */
.dh-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem; height: 2.6rem;
    border-radius: .8rem;
    color: #fff;
}
.dh-card__icon svg { width: 1.35rem; height: 1.35rem; }
.dh-ic--emerald { background: linear-gradient(135deg, #10b981, #047857); }
.dh-ic--rose    { background: linear-gradient(135deg, #f43f5e, #be123c); }
.dh-ic--sky     { background: linear-gradient(135deg, #38bdf8, #0369a1); }
.dh-ic--amber   { background: linear-gradient(135deg, #fbbf24, #d97706); }
.dh-ic--violet  { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.dh-ic--slate   { background: linear-gradient(135deg, #94a3b8, #475569); }

.dh-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.dh-card__label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: .15rem;
}
.dark .dh-card__label { color: #9ca3af; }
.dh-card__value {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #111827;
    line-height: 1.15;
    white-space: nowrap;
}
.dark .dh-card__value { color: #f9fafb; }
.dh-card__value--pos { color: #047857; }
.dh-card__value--neg { color: #be123c; }
.dark .dh-card__value--pos { color: #34d399; }
.dark .dh-card__value--neg { color: #fb7185; }
.dh-card__hint {
    display: block;
    font-size: .74rem;
    color: #9ca3af;
    margin-top: .2rem;
    line-height: 1.3;
}

/* Великий лічильник для замовлень */
.dh-card__count {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: #111827;
}
.dark .dh-card__count { color: #f9fafb; }

/* ==========================================================================
   Тур по системі: плаваюча кнопка «?» і стиль підказок driver.js
   ========================================================================== */

.driver-popover.dh-pop {
    border-radius: 1.1rem !important;
    padding: 1.15rem 1.25rem 1rem !important;
    max-width: 27rem !important;
    min-width: 21rem !important;
    background: #fff !important;
    box-shadow: 0 24px 55px -14px rgba(3, 7, 18, .45), 0 0 0 1px rgba(3, 7, 18, .05) !important;
}
.dark .driver-popover.dh-pop {
    background: #1c1c1f !important;
    box-shadow: 0 24px 55px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08) !important;
}

/* --- Шапка: іконка + група/розділ + номер розділу --- */
.dh-pop__eyebrow {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .8rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(3, 7, 18, .07);
}
.dark .dh-pop__eyebrow { border-color: rgba(255, 255, 255, .09); }

.dh-pop__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.15rem; height: 2.15rem;
    border-radius: .7rem;
    color: #fff;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    box-shadow: 0 6px 14px -6px rgba(217, 119, 6, .8);
}
.dh-pop__icon svg { width: 1.2rem; height: 1.2rem; }

.dh-pop__eyebrow-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dh-pop__group {
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #d97706;
}
.dh-pop__section {
    font-size: .82rem;
    font-weight: 600;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .dh-pop__section { color: #a1a1aa; }

.dh-pop__section-no {
    margin-inline-start: auto;
    flex: none;
    font-size: .68rem;
    font-weight: 700;
    color: #9ca3af;
    background: rgba(3, 7, 18, .04);
    border-radius: .45rem;
    padding: .18rem .45rem;
    white-space: nowrap;
}
.dark .dh-pop__section-no { background: rgba(255, 255, 255, .07); color: #a1a1aa; }

/* --- Заголовок і текст --- */
.dh-pop .driver-popover-title {
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
    line-height: 1.3 !important;
    color: #111827 !important;
    margin-bottom: .4rem !important;
}
.dark .dh-pop .driver-popover-title { color: #f9fafb !important; }

.dh-pop .driver-popover-description {
    font-size: .875rem !important;
    line-height: 1.55 !important;
    color: #4b5563 !important;
    margin-bottom: 0 !important;
}
.dark .dh-pop .driver-popover-description { color: #c4c4c8 !important; }

/* --- Блок «Навіщо це вам» --- */
.dh-pop__why {
    display: block;
    margin-top: .8rem;
    padding: .7rem .85rem;
    border-radius: .7rem;
    border-inline-start: 3px solid #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, .1), rgba(245, 158, 11, .03));
}
.dark .dh-pop__why { background: linear-gradient(90deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .05)); }

.dh-pop__why-label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #b45309;
    margin-bottom: .25rem;
}
.dh-pop__why-label svg { width: .95rem; height: .95rem; }
.dark .dh-pop__why-label { color: #fbbf24; }

.dh-pop__why-text {
    display: block;
    font-size: .845rem;
    line-height: 1.5;
    color: #4b5563;
}
.dark .dh-pop__why-text { color: #d4d4d8; }

/* --- Прогрес: смуга + два лічильники --- */
.dh-pop .driver-popover-footer {
    margin-top: .95rem !important;
    display: block !important;
}
.dh-pop .driver-popover-progress-text {
    display: block !important;
    width: 100% !important;
    margin-bottom: .7rem !important;
}
.dh-pop__bar {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: rgba(3, 7, 18, .08);
    overflow: hidden;
}
.dark .dh-pop__bar { background: rgba(255, 255, 255, .1); }
.dh-pop__bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #d97706);
    transition: width .35s ease;
}
.dh-pop__meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .4rem;
    font-size: .7rem;
    color: #9ca3af;
}
.dh-pop__meta-page { font-weight: 600; color: #6b7280; }
.dark .dh-pop__meta-page { color: #a1a1aa; }

/* --- Кнопки --- */
.dh-pop .driver-popover-navigation-btns {
    display: flex !important;
    justify-content: flex-end !important;
    gap: .45rem !important;
}
.dh-pop .driver-popover-navigation-btns button {
    border-radius: .55rem !important;
    padding: .42rem .95rem !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    transition: background .15s ease, color .15s ease;
}
.dh-pop .driver-popover-prev-btn {
    background: transparent !important;
    border: 1px solid rgba(3, 7, 18, .12) !important;
    color: #6b7280 !important;
}
.dh-pop .driver-popover-prev-btn:hover { background: rgba(3, 7, 18, .04) !important; }
.dark .dh-pop .driver-popover-prev-btn { border-color: rgba(255,255,255,.14) !important; color: #a1a1aa !important; }
.dark .dh-pop .driver-popover-prev-btn:hover { background: rgba(255,255,255,.06) !important; }

.dh-pop .driver-popover-next-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 14px -6px rgba(217, 119, 6, .9) !important;
}
.dh-pop .driver-popover-next-btn:hover { filter: brightness(1.06); }

.dh-pop .driver-popover-close-btn { color: #9ca3af !important; }
.dark .dh-pop .driver-popover-close-btn { color: #71717a !important; }
.dh-pop .driver-popover-arrow { border-width: 8px !important; }

/* Обкладинка розділу — коли крок не прив’язаний до елемента */
.dh-pop--cover .dh-pop__icon { width: 2.5rem; height: 2.5rem; border-radius: .8rem; }
.dh-pop--cover .dh-pop__icon svg { width: 1.4rem; height: 1.4rem; }
.dh-pop--cover .driver-popover-title { font-size: 1.25rem !important; }

@media (max-width: 480px) {
    .driver-popover.dh-pop { min-width: 0 !important; max-width: 92vw !important; }
    .dh-pop__meta { flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; }
}

/* Кружечки «?» підказок — нейтральні, не відволікають */
svg[x-tooltip].fi-color-primary {
    color: #b6bcc6;
    cursor: help;
    transition: color .15s ease;
}
svg[x-tooltip].fi-color-primary:hover { color: #6b7280; }
.dark svg[x-tooltip].fi-color-primary { color: #52525b; }
.dark svg[x-tooltip].fi-color-primary:hover { color: #a1a1aa; }

/* Кнопка туру в топбарі */
#dh-tour-topbar { color: #9ca3af; }
#dh-tour-topbar:hover { color: #d97706; }

/* ==========================================================================
   Звіти: панелі, KPI і таблиці (P&L, ТОП товарів, ЗП)
   ========================================================================== */
.dh-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}
.dh-report-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem;
}
.dh-panel {
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(3, 7, 18, .06);
    box-shadow: 0 1px 2px rgba(3, 7, 18, .05);
    padding: 1.1rem 1.25rem;
    animation: dhFadeUp .45s ease both;
}
.dark .dh-panel { background: #18181b; border-color: rgba(255,255,255,.08); }
.dh-panel__title {
    font-size: .95rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.dark .dh-panel__title { color: #f9fafb; }
.dh-panel__title svg { width: 1.15rem; height: 1.15rem; color: #d97706; }
.dh-panels-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
    gap: .9rem;
}

/* Таблиця звіту */
.dh-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dh-table th {
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    padding: .55rem .6rem;
    border-bottom: 2px solid rgba(3, 7, 18, .08);
    white-space: nowrap;
}
.dh-table td {
    padding: .6rem .6rem;
    border-bottom: 1px solid rgba(3, 7, 18, .05);
    color: #1f2937;
    vertical-align: middle;
}
.dark .dh-table td { color: #e5e7eb; border-color: rgba(255,255,255,.06); }
.dark .dh-table th { color: #9ca3af; border-color: rgba(255,255,255,.12); }
.dh-table tbody tr:last-child td { border-bottom: none; }
.dh-table tbody tr { transition: background .12s ease; }
.dh-table tbody tr:hover { background: rgba(245, 158, 11, .05); }
.dh-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-table .strong { font-weight: 700; }
.dh-pos { color: #047857; font-weight: 600; }
.dh-neg { color: #be123c; font-weight: 600; }
.dark .dh-pos { color: #34d399; }
.dark .dh-neg { color: #fb7185; }
.dh-muted { color: #9ca3af; }

/* Номер у рейтингу */
.dh-rank {
    display: inline-grid;
    place-items: center;
    width: 1.7rem; height: 1.7rem;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 800;
    background: #f3f4f6;
    color: #6b7280;
}
.dh-rank--top { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; }
.dark .dh-rank { background: #27272a; color: #a1a1aa; }

/* ==========================================================================
   Підказки у формах: нове значення довідника і розмір знижки
   ========================================================================== */
.dh-new-option {
    color: #92400e;
    font-size: .75rem;
}
.dark .dh-new-option { color: #fcd34d; }

.dh-discount {
    color: #047857;
    font-weight: 600;
    font-size: .78rem;
}
.dark .dh-discount { color: #34d399; }

.dh-client-dup {
    color: #b45309;
    font-size: .78rem;
}
.dark .dh-client-dup { color: #fbbf24; }

.dh-client-dup--strong {
    color: #b91c1c;
    font-weight: 600;
}
.dark .dh-client-dup--strong { color: #fca5a5; }

.dh-supplier-debt {
    color: #b45309;
    font-weight: 600;
    font-size: .78rem;
}
.dark .dh-supplier-debt { color: #fbbf24; }

.dh-margin {
    color: #6b7280;
    font-size: .78rem;
}
.dark .dh-margin { color: #a1a1aa; }

/* Порожній стан */
.dh-empty {
    text-align: center;
    color: #9ca3af;
    font-size: .875rem;
    padding: 1.5rem 0;
}

/* ==========================================================================
   Дашборд: компактні панелі-списки (останні замовлення, залишки на виході)
   ========================================================================== */

/* Посилання «Усі замовлення» праворуч у заголовку панелі */
.dh-panel__link {
    margin-inline-start: auto;
    font-size: .78rem;
    font-weight: 600;
    color: #d97706;
    text-decoration: none;
    white-space: nowrap;
}
.dh-panel__link::after { content: " →"; }
.dh-panel__link:hover { color: #b45309; text-decoration: underline; }

.dh-panel__more {
    margin-top: .6rem;
    font-size: .75rem;
    color: #9ca3af;
    text-align: center;
}

/* Щільна таблиця без шапки — два рядки тексту в комірці */
.dh-table--tight td {
    padding: .5rem .45rem;
    vertical-align: middle;
}
.dh-table--tight tbody tr:first-child td { padding-top: 0; }

.dh-mini__main {
    font-size: .875rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.dh-table--tight .num .dh-mini__main { justify-content: flex-end; }
.dark .dh-mini__main { color: #f3f4f6; }

.dh-mini__sub {
    font-size: .75rem;
    color: #9ca3af;
    line-height: 1.3;
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 15rem;
}
.dh-mini__date {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    white-space: nowrap;
    width: 1%;
}
.dark .dh-mini__date { color: #a1a1aa; }

/* Рядок-посилання */
.dh-row-link { cursor: pointer; }

/* Компактний бейдж статусу */
.dh-pill {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .375rem;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.dh-pill--success { background: #d1fae5; color: #065f46; }
.dh-pill--info    { background: #dbeafe; color: #1e40af; }
.dh-pill--warning { background: #fef3c7; color: #92400e; }
.dh-pill--primary { background: #fde68a; color: #92400e; }
.dh-pill--danger  { background: #fee2e2; color: #991b1b; }
.dh-pill--gray    { background: #f3f4f6; color: #4b5563; }
.dark .dh-pill--success { background: rgba(16,185,129,.18); color: #6ee7b7; }
.dark .dh-pill--info    { background: rgba(59,130,246,.18); color: #93c5fd; }
.dark .dh-pill--warning { background: rgba(245,158,11,.18); color: #fcd34d; }
.dark .dh-pill--primary { background: rgba(245,158,11,.18); color: #fcd34d; }
.dark .dh-pill--danger  { background: rgba(239,68,68,.18); color: #fca5a5; }
.dark .dh-pill--gray    { background: rgba(255,255,255,.08); color: #a1a1aa; }

/* Залишок штук */
.dh-qty {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: .5rem;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.dh-qty--zero { background: #fee2e2; color: #991b1b; }
.dh-qty--low  { background: #fef3c7; color: #92400e; }
.dark .dh-qty--zero { background: rgba(239,68,68,.18); color: #fca5a5; }
.dark .dh-qty--low  { background: rgba(245,158,11,.18); color: #fcd34d; }

/* Графік: прибрати зайві відступи навколо низького полотна */
.fi-wi-chart .fi-wi-chart-header { padding-bottom: .5rem; }

@media (max-width: 640px) {
    .dh-mini__sub { max-width: 10rem; }
}

/* Панель-попередження на сторінці розрахунків */
.dh-warn-panel {
    border-inline-start: 3px solid #f59e0b;
}
.dh-warn-panel .dh-panel__title svg { color: #b45309; }

/* Орієнтир останньої ціни продажу під полем ціни */
.dh-last-sale {
    color: #6b7280;
    font-size: .78rem;
}
.dark .dh-last-sale { color: #a1a1aa; }

/* ==========================================================================
   Аналітика: KPI з трендами, графік динаміки, розбивки
   ========================================================================== */

.dh-kpi-note {
    font-size: .8rem;
    color: #6b7280;
    margin: -.35rem 0 .1rem;
}
.dark .dh-kpi-note { color: #a1a1aa; }

.dh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem;
}

.dh-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: 1.05rem 1.15rem 1rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(3, 7, 18, .06);
    box-shadow: 0 1px 2px rgba(3, 7, 18, .05);
    overflow: hidden;
    animation: dhFadeUp .45s ease both;
}
.dark .dh-kpi { background: #18181b; border-color: rgba(255,255,255,.08); }

/* Головний показник періоду виділяємо смужкою */
.dh-kpi--accent::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #fbbf24, #d97706);
}

.dh-kpi__label {
    font-size: .76rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: .01em;
}
.dark .dh-kpi__label { color: #9ca3af; }

.dh-kpi__value {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
}
.dark .dh-kpi__value { color: #f9fafb; }
.dh-kpi__value--pos { color: #047857; }
.dh-kpi__value--neg { color: #be123c; }
.dark .dh-kpi__value--pos { color: #34d399; }
.dark .dh-kpi__value--neg { color: #fb7185; }

.dh-kpi__delta {
    font-size: .78rem;
    font-weight: 700;
    margin-top: .1rem;
}
.dh-up   { color: #047857; }
.dh-down { color: #be123c; }
.dh-flat { color: #9ca3af; }
.dark .dh-up   { color: #34d399; }
.dark .dh-down { color: #fb7185; }

.dh-kpi__prev {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .1rem;
}

/* ---- Графік динаміки ---- */
.dh-legend {
    margin-inline-start: auto;
    display: flex;
    gap: .8rem;
    font-size: .72rem;
    font-weight: 500;
    color: #6b7280;
}
.dh-legend__item { display: inline-flex; align-items: center; gap: .3rem; }
.dh-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.dh-dot--rev { background: #10b981; }
.dh-dot--exp { background: #f43f5e; }

.dh-chart {
    display: grid;
    grid-template-columns: repeat(var(--dh-chart-cols), minmax(0, 1fr));
    gap: 2px;
    align-items: end;
    height: 210px;
    padding-top: .5rem;
}
.dh-chart__col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    padding-bottom: 1.1rem;
    cursor: default;
}
.dh-chart__bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
}
.dh-chart__bar {
    width: 45%;
    max-width: 16px;
    border-radius: 3px 3px 0 0;
    transition: filter .15s ease, transform .15s ease;
}
.dh-chart__bar--rev { background: linear-gradient(180deg, #34d399, #059669); }
.dh-chart__bar--exp { background: linear-gradient(180deg, #fb7185, #e11d48); }
.dh-chart__col:hover .dh-chart__bar { filter: brightness(1.1); transform: translateY(-2px); }
/* Абсолютне позиціювання — інакше на 60 стовпчиках підпис «01.06»
   не влазить у 15px колонки й перетворюється на «0…» */
.dh-chart__label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: .66rem;
    color: #9ca3af;
    white-space: nowrap;
    pointer-events: none;
}

/* ---- Рядки-смуги розбивок ---- */
.dh-bar-row { margin-bottom: .85rem; }
.dh-bar-row:last-child { margin-bottom: 0; }
.dh-bar-row__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .3rem;
}
.dh-bar-row__name {
    font-size: .85rem;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .dh-bar-row__name { color: #e5e7eb; }
.dh-bar-row__value {
    font-size: .85rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dark .dh-bar-row__value { color: #f9fafb; }
.dh-bar-row__track {
    height: 7px;
    border-radius: 999px;
    background: rgba(3, 7, 18, .06);
    overflow: hidden;
}
.dark .dh-bar-row__track { background: rgba(255,255,255,.08); }
.dh-bar-row__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #d97706);
    transition: width .4s ease;
}
.dh-bar-row__fill--exp { background: linear-gradient(90deg, #fb7185, #e11d48); }
.dh-bar-row__sub {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .22rem;
}

/* ---- Прості рядки списків ---- */
.dh-panels-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
    gap: .9rem;
}
.dh-line {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .48rem 0;
    border-bottom: 1px solid rgba(3, 7, 18, .05);
}
.dark .dh-line { border-color: rgba(255,255,255,.06); }
.dh-line:last-child { border-bottom: none; }
.dh-line__name {
    flex: 1;
    min-width: 0;
    font-size: .85rem;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dh-line__name small {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    color: #9ca3af;
}
.dark .dh-line__name { color: #e5e7eb; }
.dh-line__meta {
    font-size: .72rem;
    color: #9ca3af;
    white-space: nowrap;
}
.dh-line__value {
    font-size: .85rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dark .dh-line__value { color: #f9fafb; }

@media (max-width: 640px) {
    .dh-chart { height: 160px; }
    .dh-chart__label { font-size: .55rem; }
}

/* ==========================================================================
   Масові дії: сводка вибраного в модалці
   ========================================================================== */
.dh-bulk {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.dh-bulk__summary {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.dh-bulk__stat {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .7rem .85rem;
    border-radius: .8rem;
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .18);
}
.dark .dh-bulk__stat { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); }
.dh-bulk__stat--ok {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .2);
}
.dark .dh-bulk__stat--ok { background: rgba(16,185,129,.12); }
.dh-bulk__stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #111827;
    white-space: nowrap;
}
.dark .dh-bulk__stat-value { color: #f9fafb; }
.dh-bulk__stat-label {
    font-size: .72rem;
    color: #6b7280;
}
.dark .dh-bulk__stat-label { color: #a1a1aa; }

.dh-bulk__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: .8rem;
    border: 1px solid rgba(3, 7, 18, .07);
    overflow: hidden;
}
.dark .dh-bulk__list { border-color: rgba(255,255,255,.09); }

.dh-bulk__item {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .5rem .75rem;
    font-size: .82rem;
    border-bottom: 1px solid rgba(3, 7, 18, .05);
}
.dark .dh-bulk__item { border-color: rgba(255,255,255,.06); }
.dh-bulk__item:last-child { border-bottom: none; }

/* Ті, що пропустимо, — приглушені й із причиною */
.dh-bulk__item--skip { background: rgba(3, 7, 18, .025); }
.dark .dh-bulk__item--skip { background: rgba(255,255,255,.03); }
.dh-bulk__item--skip .dh-bulk__num,
.dh-bulk__item--skip .dh-bulk__title,
.dh-bulk__item--skip .dh-bulk__sum { color: #9ca3af; }

.dh-bulk__num {
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    white-space: nowrap;
}
.dh-bulk__title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .dh-bulk__title { color: #e5e7eb; }
.dh-bulk__title em {
    font-style: normal;
    font-weight: 400;
    font-size: .74rem;
    color: #b45309;
    margin-inline-start: .35rem;
}
.dark .dh-bulk__title em { color: #fbbf24; }
.dh-bulk__sum {
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dark .dh-bulk__sum { color: #f9fafb; }

.dh-bulk__more {
    font-size: .76rem;
    color: #9ca3af;
    text-align: center;
    margin-top: -.35rem;
}

.dh-bulk__warn {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .6rem .8rem;
    border-radius: .7rem;
    border-inline-start: 3px solid #f59e0b;
    background: rgba(245, 158, 11, .09);
    font-size: .8rem;
    line-height: 1.4;
    color: #92400e;
}
.dark .dh-bulk__warn { background: rgba(245,158,11,.13); color: #fcd34d; }
.dh-bulk__warn svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .05rem; }

/* Коли обробляти нічого — це не «успіх», а стоп-сигнал */
.dh-bulk__stat--none {
    background: rgba(239, 68, 68, .07);
    border-color: rgba(239, 68, 68, .2);
}
.dark .dh-bulk__stat--none { background: rgba(239,68,68,.12); }
.dh-bulk__warn--stop {
    border-inline-start-color: #dc2626;
    background: rgba(239, 68, 68, .08);
    color: #991b1b;
    font-weight: 600;
}
.dark .dh-bulk__warn--stop { background: rgba(239,68,68,.13); color: #fca5a5; }