/* ===== Skeleton loaders =====
           Базовый .skeleton — серый прямоугольник с мягкой shimmer-анимацией.
           Варианты задают размеры: .skeleton-text / .skeleton-avatar /
           .skeleton-row / .skeleton-block / .skeleton-chip. Показывается до
           загрузки данных; JS при рендере подменяет innerHTML и skeleton
           автоматически исчезает. */
        @keyframes skeleton-shimmer {
            0%   { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .skeleton {
            display: block;
            background: linear-gradient(
                90deg,
                var(--color-gray-100) 0%,
                var(--color-gray-200) 50%,
                var(--color-gray-100) 100%
            );
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.6s ease-in-out infinite;
            border-radius: var(--radius-sm);
            pointer-events: none;
        }
        @media (prefers-reduced-motion: reduce) {
            .skeleton { animation: none; background: var(--color-gray-100); }
        }
        .skeleton-text { height: 12px; width: 100%; }
        .skeleton-text.sm { height: 10px; width: 60%; }
        .skeleton-text.lg { height: 16px; width: 80%; }
        .skeleton-avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); }
        .skeleton-chip { display: inline-block; height: 22px; width: 64px; border-radius: var(--radius-pill); vertical-align: middle; }
        .skeleton-block { width: 100%; height: 80px; border-radius: var(--radius-md); }
        .skeleton-row {
            display: grid;
            grid-template-columns: 24px minmax(0, 1fr) 110px 110px 120px 100px 120px;
            gap: 12px;
            align-items: center;
            padding: 10px 14px;
            border-bottom: 1px solid var(--color-border);
        }
        .skeleton-row > * { height: 14px; }
        .skeleton-stack { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
        .skeleton-kb-card {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 12px;
            display: flex; flex-direction: column; gap: 8px;
            margin-bottom: 10px;
        }
        .skeleton-gantt {
            display: flex; flex-direction: column; gap: 10px;
            padding: 18px;
        }
        .skeleton-gantt-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: center; }
        .skeleton-gantt-bar { height: 22px; border-radius: var(--radius-sm); }

        /* ===== Empty state =====
           Используется когда данных нет: список планов/задач/рисков пустой,
           нет результатов фильтра и т.п. Структура: иконка → заголовок →
           описание → первичный CTA. Для inline-версии используй .empty-state.sm */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 48px 24px;
            text-align: center;
            color: var(--color-text-secondary);
            min-height: 240px;
        }
        .empty-state.sm { padding: 28px 16px; min-height: 160px; gap: 8px; }
        .empty-state-illustration {
            width: 72px; height: 72px;
            border-radius: var(--radius-pill);
            background: var(--color-primary-25);
            display: flex; align-items: center; justify-content: center;
            color: var(--color-primary);
        }
        .empty-state.sm .empty-state-illustration { width: 56px; height: 56px; }
        .empty-state-illustration svg { width: 32px; height: 32px; }
        .empty-state-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-text);
            margin: 0;
        }
        .empty-state-description {
            font-size: 13px;
            color: var(--color-text-secondary);
            max-width: 360px;
            line-height: 1.5;
            margin: 0;
        }
        .empty-state-cta {
            margin-top: 4px;
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px;
            background: var(--color-primary);
            color: var(--color-surface);
            border: none;
            border-radius: var(--radius-md);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background var(--transition-fast);
        }
        .empty-state-cta:hover { background: var(--color-primary-hover); }
        .empty-state-cta-secondary {
            background: transparent;
            color: var(--color-primary);
            border: 1px solid var(--color-border);
        }
        .empty-state-cta-secondary:hover { background: var(--color-primary-25); }

        /* ===== Zoom controls (Gantt, Mind Map) ===== */
        .zoom-controls {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--color-gray-100);
            border-radius: var(--radius-pill);
            padding: 4px;
        }
        .zoom-btn {
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            color: var(--color-text-strong);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            border-radius: var(--radius-pill);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background var(--transition-fast), color var(--transition-fast);
        }
        .zoom-btn:hover { background: var(--color-surface); color: var(--color-primary); }
        .zoom-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
        .zoom-btn-fit { font-size: 14px; }
        .zoom-level {
            min-width: 44px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--color-text-strong);
            padding: 0 4px;
            user-select: none;
        }

        /* Gantt zoom: min-width = max(исходный минимум 700px, 100% × zoom).
           При 100% зуме на узком экране остаётся 700px с горизонтальным
           скроллом внутри .gantt-v2-wrap. При увеличении zoom карта
           растягивается шире экрана — скролл включается автоматически. */
        .gantt-v2-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .gantt-v2-card { min-width: max(700px, calc(100% * var(--gantt-zoom, 1))); transition: min-width var(--transition-base); }

        /* Inline empty для колонок Канбан */
        .kb-col-empty {
            padding: 24px 12px;
            text-align: center;
            color: var(--color-text-muted);
            font-size: 12px;
            background: var(--color-bg-tint);
            border: 1px dashed var(--color-border);
            border-radius: var(--radius-md);
        }