/* ═══════════════════════════════════════════════════════════════
   Dept/Project Selector — выбор отдела и проекта в шапке
   Извлечено из checklist_operational.css строки 5761–5950
   ═══════════════════════════════════════════════════════════════ */

        /* ===== DEPT / PROJECT SELECTOR ===== */
        /* Контекст-бар над дорожной картой: департамент → отдел → проект → план.
           Apple Settings-style: чистая белая полоса,
тонкий 1px divider,
без тяжёлой типографики,
кнопки/селекты на единых токенах. */
        .plan-context-bar {
            /* Подложка ярче — чистый white-surface на сером фоне
               страницы (#F5F5F7) даёт явную, но всё ещё спокойную
               «карточку-слот» под breadcrumb-ом. */
            background: var(--color-surface, #fff);
            border: none;
            border-radius: var(--radius-md);
            padding: 4px 8px;
            margin: 0 0 var(--space-2, 8px);
            display: flex;
            align-items: center;
            gap: 2px;
            flex-wrap: wrap;
            box-shadow: none;
        }
        .dept-selector-label {
            display: none;
        }
        .dept-chips {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
        }
        .dept-chip {
            padding: 8px 12px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-pill);
            background: var(--color-bg-subtle);
            color: var(--color-text);
            font-size: var(--text-sm);
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
            font-family: inherit;
            line-height: 1.4;
            letter-spacing: -0.005em;
        }
        .dept-chip:hover {
            background: white;
            border-color: var(--color-border-strong);
            color: var(--color-text);
        }
        .dept-chip.active {
            background: var(--color-primary);
            color: white;
            border-color: var(--color-primary);
            box-shadow: var(--shadow-primary);
        }
        .dept-chip.active-personal {
            background: var(--color-primary-strong);
            border-color: var(--color-primary-strong);
            color: white;
            box-shadow: var(--shadow-primary);
        }
        .plan-context-divider {
            width: auto;
            height: auto;
            background: transparent;
            flex-shrink: 0;
            color: var(--color-text-muted, #9ca3af);
            font-size: var(--text-base);
            line-height: 1;
            padding: 0 2px;
        }
        .plan-context-divider::before { content: '\203A'; }
        .project-selector-wrap {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .project-selector-wrap label {
            font-size: var(--text-xs);
            font-weight: 600;
            color: var(--color-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            white-space: nowrap;
        }
        .plan-inline-selector {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-left: auto;
        }
        .plan-inline-btn {
            width: 28px; height: 28px;
            border-radius: var(--radius-sm);
            border: none;
            background: transparent;
            color: var(--color-text-secondary);
            font-size: var(--text-sm);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s;
            flex-shrink: 0;
            padding: var(--space-0);
            line-height: 1;
            opacity: 0.65;
        }
        .plan-inline-btn:hover { opacity: 1; background: var(--color-gray-100); }
        .plan-inline-btn--danger:hover { background: var(--color-danger-25); }
        .plan-inline-btn--fav.is-active { opacity: 1; color: #f5b301; }
        .plan-inline-btn--fav.is-active:hover { background: #fffaeb; }
        .plan-inline-btn:hover .plan-inline-btn-ico { opacity: 1; }
        .messenger-attach-btn:hover .messenger-attach-ico { opacity: 1; }
        /* Селекты в plan-context-bar — единый стиль с .system-select из
           tokens.css: белый фон,
border-strong,
focus-ring primary,
плавный
           hover. Унифицировано для project-select и dept-select. */
        .project-select-styled,
.dept-select-styled {
            background: transparent;
            color: var(--color-text);
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            padding: 3px 20px 3px 8px;
            font-size: var(--text-sm);
            font-weight: 500;
            font-family: inherit;
            cursor: pointer;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
            background-repeat: no-repeat;
            background-position: right 4px center;
            background-size: 12px 12px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
            letter-spacing: -0.005em;
        }
        .project-select-styled { min-width: 200px; }
        .dept-select-styled { min-width: 240px; max-width: 340px; }
        .project-select-styled:hover,
.dept-select-styled:hover { background-color: var(--color-gray-100, #f3f4f6); }
        .project-select-styled:focus,
.dept-select-styled:focus {
            background-color: var(--color-gray-100, #f3f4f6);
            box-shadow: 0 0 0 2px var(--color-primary-25, #f4f2fa);
        }
        .dept-select-styled optgroup {
            font-weight: 600;
            color: var(--color-text);
            background: var(--color-bg-subtle);
        }
        .dept-select-styled option,
.project-select-styled option {
            font-weight: 500;
            padding: 4px 8px;
            color: var(--color-text);
        }
        @media (max-width: 768px) {
            .plan-context-bar {
                padding: var(--space-2);
                gap: var(--space-1);
                flex-direction: column;
                align-items: stretch;
            }
            .plan-context-divider { display: none; }
            .dept-selector-label { font-size: var(--text-xs); }
            .dept-chip { padding: 4px 8px; font-size: var(--text-xs); }
            .project-selector-wrap { margin-left: 0; width: 100%; }
            .project-select-styled { min-width: unset; flex: 1; font-size: var(--text-xs); padding: var(--space-2); }
            .plan-inline-selector {
                margin-left: 0;
                width: 100%;
                flex-wrap: wrap;
                gap: var(--space-1);
            }
            .plan-inline-selector select {
                flex: 1;
                min-width: 0 !important;
                font-size: var(--text-xs);
                padding: var(--space-2);
            }
            .plan-inline-btn {
                width: 26px;
                height: 26px;
                font-size: var(--text-xs);
            }
            .dept-select-styled { width: 100%; font-size: var(--text-xs); padding: var(--space-2); }
        }