static/index.html - master - AxeOn/ProjectAi

static/index.html
2 067 строк99 KB
Дмитрий
feat(economics-ui): build reactive manual surcharges UI with real-time math and auto-filling dropdowns
07 май 2026, 09:19
07 май 2026, 09:19fa4d8f7
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Office Planner</title>
  <link rel="stylesheet" href="/static/style.css?v=88">
  <style>
    /* ── Tab navigation ─────────────────────────────────────────── */
    .nav-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 20px;
      border-bottom: 2px solid var(--color-border);
      padding-bottom: 0;
    }

    .nav-tab {
      padding: 8px 20px;
      border: none;
      background: none;
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font-sans);
      color: var(--color-text-muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: color .15s, border-color .15s;
    }

    .nav-tab:hover {
      color: var(--color-primary);
    }

    .nav-tab.active {
      color: var(--color-primary);
      border-bottom-color: var(--color-primary);
    }

    /* ── Search input shared style ──────────────────────────────── */
    .search-input {
      padding: 7px 10px;
      border: 1px solid var(--color-border-input);
      border-radius: var(--radius-md);
      font-size: 13px;
      font-family: var(--font-sans);
      outline: none;
      min-width: 260px;
      transition: border-color .15s;
    }

    .search-input:focus {
      border-color: var(--color-primary);
    }

    /* ── Priority badges ────────────────────────────────────────── */
    .priority-high {
      color: var(--color-danger);
      font-weight: 700;
      font-size: 12px;
    }

    .priority-medium {
      color: var(--color-warning-text);
      font-weight: 600;
      font-size: 12px;
    }

    .priority-low {
      color: var(--color-text-muted);
      font-size: 12px;
    }

    /* ── Avatar initials ────────────────────────────────────────── */
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--color-primary);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .avatar.green {
      background: var(--color-success);
    }

    /* ── Modal overlay ──────────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-overlay.hidden {
      display: none;
    }

    .modal-box {
      background: var(--color-surface);
      border-radius: var(--radius-xl);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .22);
      padding: 28px 32px;
      width: 560px;
      max-width: 96vw;
      max-height: 92vh;
      overflow-y: auto;
      box-sizing: border-box;
    }

    .modal-box-scrollable {
      display: flex;
      flex-direction: column;
      max-height: 92vh;
      overflow: hidden;
    }

    .modal-box-scrollable .modal-header {
      flex-shrink: 0;
    }

    .modal-box-scrollable .modal-body-scrollable {
      flex: 1 1 auto;
      overflow-y: auto;
      min-height: 0;
    }

    .modal-box-scrollable .modal-footer {
      flex-shrink: 0;
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .modal-title {
      font-size: 16px;
      font-weight: 700;
    }

    .modal-close {
      border: none;
      background: none;
      font-size: 20px;
      line-height: 1;
      color: var(--color-text-muted);
      cursor: pointer;
      padding: 2px 6px;
      border-radius: var(--radius-sm);
    }

    .modal-close:hover {
      background: var(--color-bg);
      color: var(--color-text);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 20px;
    }

    .form-grid .field.full {
      grid-column: 1 / -1;
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--color-border);
    }

    .modal-lg {
      width: 800px;
    }

    .btn-icon {
      border: none;
      background: none;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: var(--radius-sm);
      color: var(--color-text-muted);
    }

    .btn-icon:hover {
      background: var(--color-bg);
    }

    .btn-icon-danger {
      color: var(--color-danger);
    }

    .btn-icon-danger:hover {
      background: var(--color-danger-bg);
    }

    .form-select {
      padding: 4px 8px;
      border: 1px solid var(--color-border-input);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-family: var(--font-sans);
      background: var(--color-surface);
      color: var(--color-text);
    }

    .form-select-sm {
      padding: 2px 6px;
      font-size: 12px;
    }

    /* ── File upload zone ───────────────────────────────────────── */
    .upload-zone {
      border: 2px dashed var(--color-border);
      border-radius: var(--radius-lg);
      padding: 44px 24px;
      text-align: center;
      color: var(--color-text-muted);
      transition: border-color .15s, background .15s;
    }

    .upload-zone.dragover {
      border-color: var(--color-primary);
      background: var(--color-info-bg);
    }

    .upload-zone p {
      margin: 6px 0;
      font-size: 13px;
    }

    .upload-zone svg {
      margin-bottom: 8px;
      color: var(--color-text-muted);
    }

    .upload-zone label.btn-primary {
      display: inline-block;
      margin-top: 10px;
      cursor: pointer;
    }

    #upload-filename {
      margin-top: 10px;
      font-size: 12px;
      color: var(--color-primary);
      font-weight: 600;
      word-break: break-all;
    }
  </style>
</head>

<body>

  <header>
    <div class="header-inner">
      <span class="logo">Office Planner</span>
      <span class="subtitle">Внутренний портал</span>
    </div>
  </header>

  <main>
    <section class="stage-card">

      <!-- Navigation tabs -->
      <nav class="nav-tabs">
        <button class="nav-tab active" data-tab="dashboard">🏠 Главная</button>
        <button class="nav-tab" data-tab="employees">👥 Сотрудники</button>
        <button class="nav-tab" data-tab="tasks">📋 Задачи</button>
        <button class="nav-tab" data-tab="deadlines">⏱ Дедлайны</button>
        <button class="nav-tab" data-tab="vacations">🌴 Отпуска</button>
        <button class="nav-tab" data-tab="calendar">📅 Календарь</button>
        <button class="nav-tab" data-tab="workload">📈 Загрузки</button>
        <button class="nav-tab" data-tab="economics">💰 Экономика</button>
      </nav>

      <!-- ── Dashboard tab ─────────────────────────────────────────── -->
      <div id="tab-dashboard" class="tab-pane active">
        <h2 style="margin-bottom:8px;"><span class="badge">🏠</span> Главная панель</h2>
        <p class="hint">Ключевые метрики для быстрой оценки состояния бизнеса.</p>

        <div class="dash-container">
          <!-- Виджет 1: Команда сегодня -->
          <div class="dash-widget">
            <h3 class="dash-widget-title">👥 Команда сегодня</h3>
            <div class="dash-widget-grid">
              <div class="dash-card dash-card-green">
                <div class="dash-label">Работают</div>
                <div class="dash-value" id="dash-working">—</div>
                <div class="dash-sub">активных сотрудников</div>
              </div>
              <div class="dash-card dash-card-blue">
                <div class="dash-label">В отпуске</div>
                <div class="dash-value" id="dash-vacation">—</div>
                <div class="dash-sub">сотрудников</div>
              </div>
              <div class="dash-card dash-card-red">
                <div class="dash-label">Больничный</div>
                <div class="dash-value" id="dash-sick">—</div>
                <div class="dash-sub">сотрудников</div>
              </div>
            </div>
          </div>

          <!-- Виджет 2: Риски и Задачи -->
          <div class="dash-widget">
            <h3 class="dash-widget-title">⚠️ Риски и Задачи</h3>
            <div class="dash-widget-grid">
              <div class="dash-card dash-card-orange">
                <div class="dash-label">Горят сегодня (SLA)</div>
                <div class="dash-value" id="dash-sla-today">—</div>
                <div class="dash-sub">дел с истекающим сроком</div>
              </div>
              <div class="dash-card dash-card-red">
                <div class="dash-label">Просрочено</div>
                <div class="dash-value" id="dash-overdue">—</div>
                <div class="dash-sub">дел</div>
              </div>
            </div>
          </div>

          <!-- Виджет 3: Экономика -->
          <div class="dash-widget">
            <h3 class="dash-widget-title">💰 Экономика</h3>
            <div class="dash-widget-grid">
              <div class="dash-card dash-card-green">
                <div class="dash-label">Сводная выручка</div>
                <div class="dash-value" id="dash-revenue">—</div>
                <div class="dash-sub">руб. за текущий месяц</div>
              </div>
              <div class="dash-card dash-card-purple">
                <div class="dash-label">Сводная маржа</div>
                <div class="dash-value" id="dash-margin">—</div>
                <div class="dash-sub">%</div>
              </div>
            </div>
          </div>

          <!-- Панель: Ближайшие дедлайны -->
          <div class="dash-widget">
            <h3 class="dash-widget-title">📋 Ближайшие дедлайны (топ-5)</h3>
            <div id="dash-deadlines-list" class="dash-list">
              <p class="dash-empty-msg">Загрузка...</p>
            </div>
          </div>

          <!-- Панель: Кто в отпуске -->
          <div class="dash-widget">
            <h3 class="dash-widget-title">🌴 Кто сейчас в отпуске</h3>
            <div id="dash-vacations-list" class="dash-list">
              <p class="dash-empty-msg">Загрузка...</p>
            </div>
          </div>

          <!-- Панель: Статистика отделов -->
          <div class="dash-widget" style="grid-column: 1 / -1;">
            <h3 class="dash-widget-title">📊 Статистика отделов на сегодня</h3>
            <div id="dash-dept-stats" class="dash-dept-grid">
              <p class="dash-empty-msg">Загрузка...</p>
            </div>
          </div>
        </div>
      </div>

      <!-- ── Employees tab ─────────────────────────────────────────── -->
      <div id="tab-employees" style="display:none;">
        <h2 style="margin-bottom:8px;"><span class="badge">👥</span> Список сотрудников</h2>
        <p class="hint">Актуальный список активных сотрудников из базы данных.</p>
        <div class="toolbar-flex">
          <div class="toolbar-filters">
            <input class="search-input" type="text" id="filter-emp" placeholder="Поиск по имени, отделу…">
            <select id="filter-emp-dept" class="filter-select">
              <option value="">Все отделы</option>
            </select>
            <select id="filter-emp-status" class="filter-select" style="min-width:130px;">
              <option value="active">Активные</option>
              <option value="dismissed">Уволенные</option>
              <option value="all">Все</option>
            </select>
            <span class="status-chip" id="chip-emp"></span>
          </div>
          <div class="toolbar-actions">
            <button class="btn-secondary" id="btn-edit-emp" disabled>Редактировать</button>
            <button class="btn-danger" id="btn-delete-emp" disabled>Удалить</button>
            <button class="btn-primary" id="btn-add-emp">+ Добавить сотрудника</button>
          </div>
        </div>
        <div id="employees-container"></div>
      </div>

      <!-- ── Tasks tab ─────────────────────────────────────────────── -->
      <div id="tab-tasks" style="display:none;">
        <h2 style="margin-bottom:8px;"><span class="badge">📋</span> Задачи управления</h2>
        <p class="hint">Задачи с исполнителями, приоритетами и статусами.</p>
        <div class="btn-row">
          <button class="btn-primary" id="btn-refresh-tasks">Обновить</button>
          <input class="search-input" type="text" id="filter-tasks"
            placeholder="Поиск по названию, клиенту или исполнителю…">
          <span class="status-chip" id="chip-tasks"></span>
        </div>
        <div id="tasks-container"></div>
      </div>

      <!-- ── Deadlines tab ─────────────────────────────────────────── -->
      <div id="tab-deadlines" style="display:none;">
        <h2 style="margin-bottom:8px;"><span class="badge">⏱</span> Контроль сроков</h2>
        <p class="hint">Дела на расчёте из последней загрузки. Срок — рабочие дни с момента поступления.</p>

        <!-- Toolbar: single flex row, primary actions pinned right via ms-auto -->
        <div class="deadlines-toolbar">
          <input class="search-input" type="text" id="filter-dl" placeholder="Поиск по делу, эксперту или региону…">
          <div class="dl-threshold-block">
            <select id="dl-threshold" title="Минимальный срок для отображения дел">
              <option value="0">Порог: 0 дней</option>
              <option value="1">Порог: 1 день</option>
              <option value="2">Порог: 2 дня</option>
              <option value="3" selected>Порог: 3 дня</option>
              <option value="4">Порог: 4 дня</option>
              <option value="5">Порог: 5 дней</option>
              <option value="6">Порог: 6 дней</option>
              <option value="7">Порог: 7 дней</option>
              <option value="8">Порог: 8 дней</option>
              <option value="9">Порог: 9 дней</option>
              <option value="10">Порог: 10 дней</option>
            </select>
          </div>
          <!-- Stats chips + compact date controls -->
          <div class="dl-stats-bar" id="dl-stats-bar">
            <span class="dl-stat-chip dl-stat-blue" id="dl-stat-loaded">Загружено: —</span>
            <span class="dl-stat-chip dl-stat-green" id="dl-stat-assigned">В работе: —</span>
            <span class="dl-stat-date" id="dl-stat-date"></span>
            <select id="dl-upload-date-sel" class="dl-date-sel dl-date-sel-sm" title="История загрузок">
              <option value="">— история —</option>
            </select>
            <button class="btn-icon-sm" id="btn-delete-upload" disabled title="Удалить выгрузку">🗑</button>
            <button class="btn-icon-sm" id="btn-dist-settings" title="Ограничения и настройки распределения">⚙</button>
          </div>
          <span class="status-chip" id="chip-dl"></span>
          <!-- Primary action buttons — ms-auto pins them to the right edge -->
          <div class="dl-primary-actions">
            <button class="btn-excel-upload dl-icon-btn" id="btn-add-dl"
              data-tooltip="Загрузить из Excel" aria-label="Загрузить из Excel">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
                <line x1="9" y1="15" x2="15" y2="15"/>
                <line x1="12" y1="12" x2="12" y2="18"/>
              </svg>
            </button>
            <button class="btn-master-send dl-icon-btn" id="btn-master-send"
              data-tooltip="Отправить ВСЕ данные" aria-label="Отправить ВСЕ данные">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
              </svg>
            </button>
          </div>
        </div>

        <div class="deadlines-layout">

          <!-- Left: sub-tabs + content panels -->
          <div class="deadlines-content">

            <div class="dl-subtabs">
              <button class="dl-subtab active" data-subtab="all">📋 Все дела</button>
              <button class="dl-subtab" data-subtab="unassigned">
                ⚠️ Требуют назначения
                <span class="dl-badge empty" id="dl-badge-unassigned">0</span>
              </button>
              <button class="dl-subtab" data-subtab="stats">📊 Статистика</button>
            </div>

            <div id="dl-view-all">
              <div class="dl-action-bar">
                <span class="status-chip" id="chip-dl-all"></span>
                <div class="dl-action-group">
                  <button class="btn-success" id="btn-report-admin"
                    title="Сгенерировать Excel-отчёт и отправить администраторам">
                    📊 Отчет администраторам
                  </button>
                  <button class="btn-warning" id="btn-remind-experts"
                    title="Отправить персональное письмо каждому эксперту о его делах">
                    📧 Рассылка экспертам
                  </button>
                </div>
              </div>
              <div id="deadlines-container"></div>
            </div>

            <div id="dl-view-unassigned" style="display:none;">
              <div class="dl-action-bar">
                <span class="status-chip" id="chip-dl-unassigned"></span>
                <div class="dl-action-group">
                  <button class="btn-primary" id="btn-smart-dist" title="Запустить умное распределение дел">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                      stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;">
                      <path
                        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                    </svg>Умное распределение
                  </button>
                  <button class="btn-secondary" id="btn-notify-operators-assign" disabled
                    title="Отправить сводное HTML-письмо операторам со списком распределённых дел">
                    📧 Рассылка операторам
                  </button>
                  <button class="btn-warning" id="btn-send-assignments" disabled
                    title="Отправить персональное письмо каждому эксперту о его назначениях">
                    📧 Рассылка экспертам
                  </button>
                </div>
              </div>
              <p class="hint" id="dl-unassigned-hint" style="margin-bottom:8px;"></p>
              <div id="dl-unassigned-container"></div>
            </div>

            <div id="dl-view-stats" style="display:none;">
              <div class="dl-action-bar">
                <span class="hint" id="dl-stats-info" style="margin:0;flex:1;"></span>
                <span class="status-chip" id="chip-dl-stats"></span>
                <button class="btn-secondary" id="btn-send-report"
                  title="Сгенерировать Excel-отчёт и отправить администраторам"
                  style="padding:5px 12px;font-size:12px;">
                  📊 Отправить отчёт
                </button>
              </div>
              <div id="dl-stats-container"></div>
            </div>

          </div>

          <!-- Right: analytics sidebar -->
          <aside class="deadlines-sidebar">

            <div class="sidebar-widget">
              <div class="sidebar-widget-title">
                <span class="sw-icon-danger">⚠</span> Свободны (нет задач)
              </div>
              <div class="sidebar-widget-body" id="dl-sidebar-idle">
                <em>Загрузка…</em>
              </div>
            </div>

            <div class="sidebar-widget">
              <div class="sidebar-widget-title">
                <span class="sw-icon-info">●</span> Загрузка экспертов
              </div>
              <div class="sidebar-widget-body" id="dl-sidebar-busy">
                <em>Загрузка…</em>
              </div>
            </div>

          </aside>

        </div>
      </div>

      <!-- ── Vacations tab ──────────────────────────────────────────── -->
      <div id="tab-vacations" style="display:none;">
        <h2 style="margin-bottom:8px;"><span class="badge">🌴</span> График отпусков</h2>
        <div class="vacation-toolbar">
          <div class="toolbar-left">
            <input class="search-input" type="text" id="filter-vac" placeholder="Поиск по ФИО…"
              style="min-width:180px;">
            <select id="filter-vac-dept" class="filter-select">
              <option value="">Все отделы</option>
            </select>
            <label class="vac-toggle-filter" title="Показать только сотрудников с отпуском в выбранном периоде">
              <input type="checkbox" id="filter-active-vacations">
              <span class="vac-toggle-track"></span>
              <span>Только в отпуске</span>
            </label>
          </div>
          <div class="toolbar-right">
            <div class="vac-view-toggle" role="group" aria-label="Режим просмотра">
              <button class="vac-view-btn active" id="btn-vac-view-month" data-view="month">Месяц</button>
              <button class="vac-view-btn" id="btn-vac-view-year" data-view="year">Год</button>
            </div>
            <button class="btn-secondary cal-nav-btn" id="btn-vac-prev">&#9664;</button>
            <select id="filter-vac-month" class="filter-select" style="min-width:120px;"><!-- by JS --></select>
            <select id="filter-vac-year" class="filter-select" style="min-width:80px;"><!-- by JS --></select>
            <button class="btn-secondary cal-nav-btn" id="btn-vac-next">&#9654;</button>
            <button class="btn-secondary" id="btn-edit-vac" disabled>Редактировать</button>
            <button class="btn-danger" id="btn-delete-vac" disabled>Удалить</button>
            <button class="btn-primary" id="btn-add-vac">+ Добавить</button>
          </div>
        </div>
        <div class="vacations-layout">

          <!-- Table column -->
          <div class="vacations-table-wrap">
            <div id="vacations-container"></div>
          </div>

          <!-- Right sidebar -->
          <aside class="vacations-sidebar">

            <div class="vac-sb-legend">
              <span class="l-item"><span class="l-badge badge-vac-sum"></span> Летний</span>
              <span class="l-item"><span class="l-badge badge-vac-win"></span> Зимний</span>
              <span class="l-item"><span class="l-badge badge-vac-overlap"></span> Пересечение</span>
            </div>
            <hr class="vac-sb-divider">

            <div class="sidebar-widget">
              <div class="sidebar-widget-title">
                <span class="sw-icon-danger">⚠</span> Пересечения
              </div>
              <div class="sidebar-widget-body" id="vac-sidebar-overlaps">
                <em>Загрузка…</em>
              </div>
            </div>

            <div class="sidebar-widget">
              <div class="sidebar-widget-title">
                <span class="sw-icon-success">●</span> Сейчас в отпуске
              </div>
              <div class="sidebar-widget-body" id="vac-sidebar-active">
                <em>Загрузка…</em>
              </div>
            </div>

            <div class="sidebar-widget">
              <div class="sidebar-widget-title">
                <span class="sw-icon-info">◷</span> Скоро (7 дней)
              </div>
              <div class="sidebar-widget-body" id="vac-sidebar-upcoming">
                <em>Загрузка…</em>
              </div>
            </div>

          </aside>
        </div>
      </div>

      <!-- ── Calendar tab ────────────────────────────────────────────── -->
      <div id="tab-calendar" style="display:none;">
        <h2 style="margin-bottom:8px;"><span class="badge">📅</span> Производственный календарь</h2>
        <div class="calendar-toolbar">
          <div class="toolbar-left">
            <select id="filter-cal-dept" class="filter-select">
              <option value="">Все отделы</option>
            </select>
            <select id="filter-cal-category" class="filter-select">
              <option value="">Все категории</option>
              <option>Высшая</option>
              <option>Первая</option>
              <option>Вторая</option>
              <option>Без категории</option>
            </select>
            <div class="cal-view-toggle" id="cal-view-toggle">
              <button class="cal-view-btn active" data-mode="presence">👀 Присутствие</button>
              <button class="cal-view-btn" data-mode="heatmap">🔥 Эффективность</button>
            </div>
          </div>
          <div class="toolbar-right">
            <div class="cal-nav">
              <button class="btn-secondary cal-nav-btn" id="btn-cal-prev">&#9664;</button>
              <select id="filter-cal-month" class="filter-select" style="min-width:120px;"><!-- by JS --></select>
              <select id="filter-cal-year" class="filter-select" style="min-width:80px;"><!-- by JS --></select>
              <button class="btn-secondary cal-nav-btn" id="btn-cal-next">&#9654;</button>
              <span class="status-chip" id="chip-cal"></span>
            </div>
          </div>
        </div>
        <div class="cal-layout">
          <div id="calendar-container"></div>
          <div class="cal-sidebar-pane">
            <div class="cal-sidebar-card">
              <h5 class="cal-sidebar-title" id="calendar-summary-date">📊 Сводка на: Сегодня</h5>
              <input type="date" id="cal-info-date" class="cal-info-date-input">

              <div id="calendar-alerts-container" class="cal-sb-alerts">
                <div class="cal-sb-placeholder">Анализ смен…</div>
              </div>

              <div id="calendar-departments-accordion" class="cal-sb-accordion"></div>

            </div>
          </div>
        </div>
      </div>

      <!-- ── Workload tab ────────────────────────────────────────────── -->
      <div id="tab-workload" style="display:none;">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
          <h2 style="margin:0;"><span class="badge">📈</span> Текущие загрузки</h2>
          <button class="btn-primary" id="btn-refresh-wl" style="padding:6px 14px;">Обновить</button>
          <span class="status-chip" id="chip-wl"></span>
        </div>
        <div class="wl-subtoolbar">
          <div class="wl-view-btns">
            <button class="wl-view-btn active" id="wl-btn-dashboard" title="Дашборд">📊</button>
            <button class="wl-view-btn" id="wl-btn-detail" title="Детализация">📋</button>
          </div>
          <button class="btn-confirm" id="btn-upload-wl" style="padding:5px 12px;font-size:12px;">
            ↑ Загрузить Excel
          </button>
          <div class="wl-toolbar-sep"></div>
          <div class="wl-filter-group">
            <label style="font-size:12px;color:var(--color-text-hint);">НЭ:</label>
            <select id="wl-filter-ne" class="filter-select" style="min-width:90px;">
              <option value="">Все</option>
              <option value="moscow">Москва</option>
            </select>
            <label style="font-size:12px;color:var(--color-text-hint);">Отдел:</label>
            <select id="wl-filter-dept" class="filter-select" style="min-width:180px;">
              <option value="">Все отделы</option>
            </select>
          </div>
        </div>
        <div id="wl-dashboard-view">
          <div class="wl-dashboard-grid">
            <div class="wl-chart-card">
              <div class="wl-card-title" id="wl-day-title">График дня</div>
              <div class="wl-chart-wrap" id="wl-wrap-day"><canvas id="wl-chart-day"></canvas></div>
            </div>
            <div class="wl-chart-card">
              <div class="wl-card-title" id="wl-week-title">График недели</div>
              <div class="wl-chart-wrap" id="wl-wrap-week"><canvas id="wl-chart-week"></canvas></div>
            </div>
            <div class="wl-leaders-card">
              <div class="wl-card-title" id="wl-day-leaders-title">Лидеры (День)</div>
              <div class="wl-leaders-body" id="wl-leaders-day-body"></div>
            </div>
            <div class="wl-leaders-card">
              <div class="wl-card-title" id="wl-week-leaders-title">Лидеры (Неделя)</div>
              <div class="wl-leaders-body" id="wl-leaders-week-body"></div>
            </div>
          </div>
        </div>
        <div id="wl-detail-view" style="display:none;">
          <div id="wl-detail-container"></div>
        </div>
      </div>

      <!-- ── Economics tab ──────────────────────────────────────────────── -->
      <div id="tab-economics" style="display:none;">

        <!-- Sub-navigation pills -->
        <div class="eco-subnav">
          <button class="eco-subnav-btn active" data-econav="calc">📊 Расчёт</button>
          <button class="eco-subnav-btn" data-econav="surcharges">⚡ Настройки доплат</button>
          <button class="eco-subnav-btn" data-econav="manual">💸 Доплаты / Взаимовычеты</button>
        </div>

        <!-- ── Section: Расчёт ─────────────────────────────────────────── -->
        <div id="eco-section-calc">

        <!-- Toolbar -->
        <div class="eco-toolbar">
          <div class="eco-toolbar-left">
            <span class="eco-toolbar-label">Период:</span>
            <select id="eco-year-sel" class="filter-select" style="min-width:80px;"></select>
            <select id="eco-month-sel" class="filter-select" style="min-width:130px;"></select>
            <span class="eco-toolbar-sep"></span>
            <span class="eco-toolbar-label">Сравнение:</span>
            <select id="eco-compare-sel" class="filter-select" style="min-width:160px;">
              <option value="prev_month" selected>С прошлым месяцем</option>
              <option value="prev_year">С тем же месяцем год назад</option>
            </select>
            <span class="status-chip" id="eco-chip">—</span>
          </div>
          <div class="eco-toolbar-right">
            <button class="btn-sm" id="btn-eco-tariffs">⚙️ Справочник тарифов</button>
            <button class="btn-sm" id="btn-eco-export">📥 Экспорт</button>
          </div>
        </div>

        <!-- KPI cards -->
        <div class="eco-kpi-grid">
          <div class="eco-kpi-card">
            <div class="eco-kpi-label">Выручка (от СК)</div>
            <div class="eco-kpi-value" id="eco-kpi-revenue">— <span class="eco-kpi-unit">₽</span></div>
            <div class="eco-kpi-sub" id="eco-kpi-revenue-sub">Загрузка…</div>
            <div class="eco-trend" id="eco-trend-revenue"></div>
          </div>
          <div class="eco-kpi-card">
            <div class="eco-kpi-label">ФОТ (Начислено)</div>
            <div class="eco-kpi-value" id="eco-kpi-gross">— <span class="eco-kpi-unit">₽</span></div>
            <div class="eco-kpi-sub" id="eco-kpi-gross-sub">до налогов</div>
            <div class="eco-trend" id="eco-trend-gross"></div>
          </div>
          <div class="eco-kpi-card">
            <div class="eco-kpi-label">К выплате (На руки)</div>
            <div class="eco-kpi-value" id="eco-kpi-net">— <span class="eco-kpi-unit">₽</span></div>
            <div class="eco-kpi-sub" id="eco-kpi-net-sub">после налогов</div>
            <div class="eco-trend" id="eco-trend-net"></div>
          </div>
          <div class="eco-kpi-card eco-kpi-card--success">
            <div class="eco-kpi-label">Валовая прибыль</div>
            <div class="eco-kpi-value" id="eco-kpi-profit">— <span class="eco-kpi-unit">₽</span></div>
            <div class="eco-kpi-sub" id="eco-kpi-profit-sub">маржа: —%</div>
            <div class="eco-trend" id="eco-trend-profit"></div>
          </div>
        </div>

        <!-- Margin bar -->
        <div id="eco-margin-bar-wrap" style="display:none;margin-bottom:18px;">
          <div class="eco-margin-bar">
            <div id="eco-margin-profit-seg" class="eco-margin-profit-seg"></div>
            <div id="eco-margin-gross-seg" class="eco-margin-gross-seg"></div>
          </div>
          <div id="eco-margin-label"
            style="font-size:11px;color:var(--color-text-muted);margin-top:4px;text-align:center;"></div>
        </div>

        <!-- Analytics charts -->
        <div class="eco-charts-row" id="eco-charts-container">
          <div class="eco-chart-card">
            <div class="eco-chart-title">💰 Маржа по отделам</div>
            <div class="eco-chart-wrap">
              <canvas id="ecoChartDepts"></canvas>
            </div>
          </div>
          <div class="eco-chart-card">
            <div class="eco-chart-title">🔥 Топ-5 прибыльных услуг</div>
            <div class="eco-chart-wrap">
              <canvas id="ecoChartServices"></canvas>
            </div>
          </div>
        </div>

        <!-- Master-Detail -->
        <div class="eco-master-detail">

          <!-- Master: employee list -->
          <div class="eco-panel">
            <div class="eco-panel-header">
              <span class="eco-panel-title">Список сотрудников</span>
              <span class="eco-count-badge" id="eco-emp-count">0</span>
            </div>
            <div style="overflow-x:auto;">
              <table class="data-table eco-master-table">
                <thead>
                  <tr>
                    <th>Сотрудник</th>
                    <th>Отдел</th>
                    <th style="text-align:right;">К выплате</th>
                  </tr>
                </thead>
                <tbody id="eco-master-body"></tbody>
              </table>
            </div>
          </div>

          <!-- Detail: calculation inspector -->
          <div class="eco-panel">
            <div class="eco-panel-header">
              <span class="eco-panel-title" id="eco-detail-title">Инспектор расчета</span>
            </div>
            <div id="eco-detail-empty" class="eco-detail-placeholder">
              👈 Выберите сотрудника для просмотра детализации
            </div>
            <div id="eco-detail-content" style="display:none;"></div>
          </div>

        </div>
        </div><!-- /eco-section-calc -->

        <!-- ── Section: Настройки доплат ─────────────────────────────── -->
        <div id="eco-section-surcharges" style="display:none;">
          <div class="sc-toolbar">
            <span class="sc-section-title">⚡ Правила доплат</span>
            <button class="btn btn-primary" id="btn-sc-add">+ Добавить правило</button>
          </div>
          <div id="sc-rules-list" class="sc-rules-list">
            <p class="sc-empty-state" id="sc-empty-state">
              Правила не настроены. Нажмите «+ Добавить правило».
            </p>
          </div>
        </div><!-- /eco-section-surcharges -->

        <!-- ── Section: Доплаты / Взаимовычеты ──────────────────────── -->
        <div id="eco-section-manual" style="display:none;">
          <div class="ms-toolbar">
            <div class="ms-toolbar-left">
              <span class="eco-toolbar-label">Период:</span>
              <select id="ms-year-sel"  class="filter-select" style="min-width:80px;"></select>
              <select id="ms-month-sel" class="filter-select" style="min-width:130px;"></select>
            </div>
            <button class="btn btn-primary" id="btn-ms-add">+ Добавить расчет</button>
          </div>
          <div class="ms-table-wrap">
            <table class="data-table" id="ms-table">
              <thead>
                <tr>
                  <th>Эксперт</th>
                  <th>Отдел</th>
                  <th>№ Дела</th>
                  <th>Услуга</th>
                  <th style="text-align:right;">Часы</th>
                  <th style="text-align:right;">Сумма, ₽</th>
                  <th>Тип</th>
                  <th>Примечание</th>
                  <th></th>
                </tr>
              </thead>
              <tbody id="ms-table-body"></tbody>
            </table>
          </div>
        </div><!-- /eco-section-manual -->

      </div><!-- /tab-economics -->

    </section>
  </main>

  <footer>Office Planner v5 &mdash; веб-интерфейс</footer>

  <!-- ── Deadline Assignment Drawer ────────────────────────────────────────── -->
  <div id="dl-assign-overlay" class="dl-assign-overlay hidden">
    <div class="dl-assign-drawer">
      <div class="dl-assign-header">
        <div>
          <div class="dl-assign-case-num" id="dl-assign-case-num">№ дела</div>
          <div class="dl-assign-meta" id="dl-assign-meta"></div>
        </div>
        <button class="modal-close" id="dl-assign-close">&times;</button>
      </div>
      <div class="dl-assign-body">
        <div class="field">
          <label for="dl-assign-expert">Назначить эксперта</label>
          <select id="dl-assign-expert">
            <option value="">— выберите эксперта —</option>
          </select>
        </div>
        <div class="field">
          <label for="dl-assign-comment">Комментарий (необязательно)</label>
          <textarea id="dl-assign-comment" rows="3" placeholder="Причина назначения или примечание…"></textarea>
        </div>
        <button class="btn-confirm" id="dl-assign-submit" style="width:100%;" disabled>
          Назначить
        </button>
        <p id="dl-assign-error" style="color:var(--color-danger);font-size:12px;margin-top:8px;display:none;"></p>
      </div>
    </div>
  </div>

  <!-- ── Manual Surcharge Modal ───────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-manual-surcharge">
    <div class="modal-box" style="width:min(95vw,600px);">
      <div class="modal-header">
        <span class="modal-title">💸 Ручная доплата / Взаимовычет</span>
        <button class="modal-close" id="ms-modal-close">&times;</button>
      </div>
      <input type="hidden" id="ms-rec-id">
      <div class="form-grid" style="padding:0 32px;margin-top:8px;">
        <div class="field">
          <label for="ms-expert">Эксперт</label>
          <select id="ms-expert"><option value="">— выберите эксперта —</option></select>
        </div>
        <div class="field">
          <label for="ms-dept">Отдел</label>
          <input type="text" id="ms-dept" readonly placeholder="Заполняется автоматически">
        </div>
        <div class="field">
          <label for="ms-case">№ Дела</label>
          <input type="text" id="ms-case" placeholder="2026-МА-001">
        </div>
        <div class="field">
          <label for="ms-service">Услуга</label>
          <select id="ms-service"><option value="">— выберите услугу —</option></select>
        </div>
        <div class="field">
          <label for="ms-base-cost">Базовая стоимость, ₽</label>
          <input type="number" id="ms-base-cost" readonly placeholder="—">
        </div>
        <div class="field">
          <label for="ms-hourly-rate">Стоимость нормочаса, ₽</label>
          <input type="number" id="ms-hourly-rate" readonly placeholder="—">
        </div>
        <div class="field">
          <label for="ms-hours">Затрачено часов</label>
          <input type="number" id="ms-hours" min="0" step="0.1" value="0">
        </div>
        <div class="field">
          <label for="ms-total">Итоговая сумма, ₽</label>
          <input type="number" id="ms-total" readonly class="ms-total-field" placeholder="—">
          <p id="ms-total-hint" class="ms-hint-negative" style="display:none;"></p>
        </div>
        <div class="field">
          <label for="ms-op-type">Тип операции</label>
          <select id="ms-op-type">
            <option value="Доплата">Доплата</option>
            <option value="Взаимовычет">Взаимовычет</option>
          </select>
        </div>
        <div class="field full">
          <label for="ms-note">Примечание</label>
          <textarea id="ms-note" rows="2" placeholder="Краткое пояснение…"></textarea>
        </div>
      </div>
      <div class="modal-footer" style="padding:0 32px 24px;">
        <button class="btn-secondary" id="ms-modal-cancel">Отмена</button>
        <button class="btn btn-primary" id="ms-modal-save">Сохранить</button>
      </div>
    </div>
  </div>

  <!-- ── Surcharge Rule Modal ───────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-surcharge-rule">
    <div class="modal-box" style="width:min(95vw,520px);">
      <div class="modal-header">
        <span class="modal-title">⚡ Правило доплаты</span>
        <button class="modal-close" id="sc-modal-close">&times;</button>
      </div>
      <input type="hidden" id="sc-rule-id">
      <div class="form-grid" style="padding:0 32px;margin-top:4px;">
        <div class="field full">
          <label for="sc-rule-name">Название правила</label>
          <input type="text" id="sc-rule-name" placeholder="Доплата за выезды в МСК">
        </div>
      </div>
      <p style="font-size:11px;font-weight:700;color:var(--color-text-muted);padding:10px 32px 4px;">
        ФИЛЬТРЫ <span style="font-weight:400;font-style:italic;opacity:.8;">(пусто = для всех)</span>
      </p>
      <div class="form-grid" style="padding:0 32px;">
        <div class="field">
          <label for="sc-rule-region">Регион</label>
          <input type="text" id="sc-rule-region" placeholder="Москва…">
        </div>
        <div class="field">
          <label for="sc-rule-service">Тип услуги</label>
          <input type="text" id="sc-rule-service" placeholder="Выезд…">
        </div>
        <div class="field full">
          <label for="sc-rule-risk">Риск</label>
          <select id="sc-rule-risk">
            <option value="">— Все риски —</option>
            <option value="Жизнь">Жизнь</option>
            <option value="Имущество">Имущество</option>
            <option value="Авто">Авто</option>
          </select>
        </div>
      </div>
      <p style="font-size:11px;font-weight:700;color:var(--color-text-muted);padding:10px 32px 4px;">
        УСЛОВИЕ ПРИМЕНЕНИЯ
      </p>
      <div class="form-grid sc-cond-grid" style="padding:0 32px;">
        <div class="field">
          <label for="sc-cond-field">Поле</label>
          <select id="sc-cond-field">
            <option value="base_count">Кол-во услуг (base_count)</option>
            <option value="expert_calculation">Расчёт эксперта</option>
            <option value="case_count">Кол-во дел</option>
          </select>
        </div>
        <div class="field">
          <label for="sc-cond-op">Оператор</label>
          <select id="sc-cond-op">
            <option value=">">&gt; (больше)</option>
            <option value=">=">&ge; (≥)</option>
            <option value="<">&lt; (меньше)</option>
            <option value="<=">&le; (≤)</option>
            <option value="==">= (равно)</option>
          </select>
        </div>
        <div class="field">
          <label for="sc-cond-val">Порог</label>
          <input type="number" id="sc-cond-val" min="0" step="1" value="0">
        </div>
      </div>
      <p style="font-size:11px;font-weight:700;color:var(--color-text-muted);padding:10px 32px 4px;">
        РЕЗУЛЬТАТ
      </p>
      <div class="form-grid" style="padding:0 32px 20px;">
        <div class="field full">
          <label for="sc-amount">Сумма доплаты, ₽</label>
          <input type="number" id="sc-amount" min="0" step="50" value="0" placeholder="500">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="sc-modal-cancel">Отмена</button>
        <button class="btn btn-primary" id="sc-modal-save">Сохранить</button>
      </div>
    </div>
  </div>

  <!-- ── Email Remind Modal ──────────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-email-remind">
    <div class="modal-box" style="max-width:860px;width:96vw;">
      <div class="modal-header">
        <span class="modal-title" id="email-remind-title">📧 Напомнить экспертам о делах</span>
        <button class="modal-close" id="email-remind-close">&times;</button>
      </div>

      <div class="email-remind-grid">

        <!-- Left: template editor -->
        <div class="email-remind-col">
          <div class="field" style="margin-bottom:10px;">
            <label for="email-remind-subject">Тема письма</label>
            <input type="text" id="email-remind-subject" style="width:100%;box-sizing:border-box;padding:7px 10px;
                        border:1px solid var(--color-border-input);
                        border-radius:var(--radius-md);font-size:13px;outline:none;">
          </div>
          <div class="field">
            <label for="email-remind-body">Текст письма</label>
            <textarea id="email-remind-body" class="email-remind-textarea" rows="12"></textarea>
          </div>
          <p class="email-vars-hint">
            Переменные: <code>{ФИО}</code>, <code>{ИО}</code> (Имя Отчество), <code>{И}</code> (Имя),
            <code>{СПИСОК_ДЕЛ}</code>
          </p>
        </div>

        <!-- Right: preview -->
        <div class="email-remind-col">
          <div class="field" style="margin-bottom:10px;">
            <label for="email-remind-expert-sel">Предпросмотр для эксперта</label>
            <select id="email-remind-expert-sel" style="width:100%;box-sizing:border-box;padding:7px 10px;
                         border:1px solid var(--color-border-input);
                         border-radius:var(--radius-md);font-size:13px;">
            </select>
          </div>
          <div class="email-preview-box" id="email-remind-preview"></div>
        </div>

      </div>

      <div class="modal-footer">
        <button class="btn-secondary" id="email-remind-cancel">Отмена</button>
        <button class="btn-confirm" id="email-remind-send">
          Отправить <span id="email-remind-count">0</span> писем
        </button>
      </div>
    </div>
  </div>

  <!-- ── Operator Mailing Confirmation Modal ──────────────────────────────────── -->
  <div class="modal-overlay hidden" id="operator-mailing-modal">
    <div class="modal-box" style="max-width:720px;">
      <div class="modal-header">
        <span class="modal-title">📧 Подтверждение рассылки операторам</span>
        <button class="modal-close" id="operator-mailing-close">&times;</button>
      </div>

      <div style="padding:16px 24px;">
        <!-- Summary table (generated by JS) -->
        <div id="operator-mailing-summary"></div>

        <!-- Email editor fields -->
        <div class="field" style="margin-top:14px;">
          <label for="operator-mailing-to">Кому</label>
          <input type="text" id="operator-mailing-to" readonly style="width:100%;box-sizing:border-box;padding:7px 10px;
                        border:1px solid var(--color-border-input);
                        border-radius:var(--radius-md);font-size:13px;
                        background:var(--color-bg-muted);color:var(--color-text-muted);
                        cursor:default;">
        </div>

        <div class="field" style="margin-top:10px;">
          <label for="operator-mailing-subject">Тема письма</label>
          <input type="text" id="operator-mailing-subject" style="width:100%;box-sizing:border-box;padding:7px 10px;
                        border:1px solid var(--color-border-input);
                        border-radius:var(--radius-md);font-size:13px;outline:none;">
        </div>

        <div class="field" style="margin-top:10px;">
          <label>Предпросмотр письма <span
              style="font-weight:400;color:var(--color-text-muted);font-size:11px;">(редактируемый)</span></label>
          <div id="operator-mailing-body" contenteditable="true" style="width:100%;box-sizing:border-box;padding:10px 12px;
                   border:1px solid var(--color-border-input);
                   border-radius:var(--radius-md);font-size:12px;
                   min-height:180px;max-height:380px;overflow-y:auto;
                   outline:none;background:#fff;line-height:1.4;"></div>
        </div>

        <label class="checkbox-label"
          style="display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;cursor:pointer;">
          <input type="checkbox" id="operator-mailing-save-tpl" checked>
          Сохранить тему и текст как шаблон по умолчанию
        </label>
      </div>

      <div class="modal-footer">
        <button class="btn-secondary" id="operator-mailing-cancel">Отмена</button>
        <button class="btn-primary" id="confirm-operator-mailing">Отправить</button>
      </div>
    </div>
  </div>

  <!-- ── Send Assignments Modal ─────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-send-assignments">
    <div class="modal-box" style="max-width:560px;">
      <div class="modal-header">
        <span class="modal-title">📧 Отправить назначения экспертам</span>
        <button class="modal-close" id="send-assign-close">&times;</button>
      </div>
      <p class="hint" style="margin-bottom:10px;">
        Каждый эксперт получит письмо со списком назначенных ему дел.
      </p>
      <div id="send-assign-list" style="max-height:200px;overflow-y:auto;font-size:13px;
                border:1px solid var(--color-border);border-radius:var(--radius-md);
                padding:10px 14px;background:var(--color-bg);margin-bottom:12px;"></div>

      <details class="tpl-section" open>
        <summary>✏ Шаблон письма</summary>
        <div class="tpl-fields">
          <div class="field">
            <label for="tpl-assign-subject">Тема</label>
            <input type="text" id="tpl-assign-subject" class="tpl-subject-input" placeholder="Тема письма…">
          </div>
          <div class="field">
            <label for="tpl-assign-body">Текст</label>
            <textarea id="tpl-assign-body" class="tpl-body-textarea" rows="6" placeholder="Текст письма…"></textarea>
          </div>
          <p class="email-vars-hint">
            Переменные: <code>{ФИО}</code>, <code>{СПИСОК_ДЕЛ}</code>
          </p>
          <div class="tpl-preview" id="tpl-assign-preview">Предпросмотр…</div>
        </div>
      </details>

      <div class="modal-footer" style="margin-top:4px;">
        <button type="button" class="btn-secondary" id="send-assign-cancel">Отмена</button>
        <button type="button" class="btn-confirm" id="send-assign-submit">Отправить</button>
      </div>
    </div>
  </div>

  <!-- ── Send Statistics Report Modal ──────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-send-report">
    <div class="modal-box" style="max-width:520px;">
      <div class="modal-header">
        <span class="modal-title">📊 Отправить отчёт по статистике</span>
        <button class="modal-close" id="send-report-close">&times;</button>
      </div>
      <p class="hint" style="margin-bottom:10px;">
        Отчёт будет отправлен на адреса из настроек раздела
        <strong>«Отчёты по статистике»</strong>.
      </p>
      <div id="send-report-recipients-preview" style="background:var(--color-bg);border:1px solid var(--color-border);
                border-radius:var(--radius-md);padding:8px 12px;font-size:12px;
                color:var(--color-text-muted);margin-bottom:12px;min-height:32px;">
        Загрузка адресов…
      </div>

      <details class="tpl-section" open>
        <summary>✏ Шаблон письма</summary>
        <div class="tpl-fields">
          <div class="field">
            <label for="tpl-stats-subject">Тема</label>
            <input type="text" id="tpl-stats-subject" class="tpl-subject-input" placeholder="Тема письма…">
          </div>
          <div class="field">
            <label for="tpl-stats-body">Текст</label>
            <textarea id="tpl-stats-body" class="tpl-body-textarea" rows="5" placeholder="Текст письма…"></textarea>
          </div>
          <p class="email-vars-hint">
            Переменные: <code>{ПЕРИОД}</code>, <code>{СТАТИСТИКА}</code>
          </p>
        </div>
      </details>

      <div class="modal-footer" style="margin-top:4px;">
        <button type="button" class="btn-secondary" id="send-report-cancel">Отмена</button>
        <button type="button" class="btn-confirm" id="send-report-submit">Отправить</button>
      </div>
    </div>
  </div>

  <!-- ── Admin Excel Report Modal ───────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-excel-report">
    <div class="modal-box" style="max-width:520px;">
      <div class="modal-header">
        <span class="modal-title">📊 Отчёт по дедлайнам</span>
        <button class="modal-close" id="excel-report-close">&times;</button>
      </div>
      <p class="hint" style="margin-bottom:10px;">
        Excel-отчёт будет сгенерирован и отправлен на адреса из настроек раздела
        <strong>«Отчёты и напоминания»</strong>.
      </p>
      <div id="excel-report-recipients-preview" style="background:var(--color-bg);border:1px solid var(--color-border);
                border-radius:var(--radius-md);padding:8px 12px;font-size:12px;
                color:var(--color-text-muted);margin-bottom:12px;min-height:32px;">
        Загрузка адресов…
      </div>

      <details class="tpl-section" open>
        <summary>✏ Шаблон письма</summary>
        <div class="tpl-fields">
          <div class="field">
            <label for="tpl-excel-subject">Тема</label>
            <input type="text" id="tpl-excel-subject" class="tpl-subject-input" placeholder="Тема письма…">
          </div>
          <div class="field">
            <label for="tpl-excel-body">Текст</label>
            <textarea id="tpl-excel-body" class="tpl-body-textarea" rows="4" placeholder="Текст письма…"></textarea>
          </div>
          <p class="email-vars-hint">
            Переменные: <code>{ПОРОГ}</code> (текущий порог дней), <code>{ДАТА}</code> (сегодня)
          </p>
        </div>
      </details>

      <div class="modal-footer" style="margin-top:4px;">
        <button type="button" class="btn-secondary" id="excel-report-cancel">Отмена</button>
        <button type="button" class="btn-confirm" id="excel-report-submit">Отправить</button>
      </div>
    </div>
  </div>

  <!-- ── Master Send Modal ─────────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="master-send-modal">
    <div class="modal-box" style="max-width:460px;">
      <div class="modal-header">
        <span class="modal-title">🚀 Массовая рассылка</span>
        <button class="modal-close" id="master-send-close">&times;</button>
      </div>
      <div style="padding:20px 24px 8px;">
        <p style="margin:0 0 12px;">Внимание! Сейчас будут автоматически отправлены <strong>3 пакета данных</strong>:</p>
        <ol style="margin:0 0 16px;padding-left:20px;line-height:2;">
          <li>📊 <strong>Отчёт администраторам</strong> — Excel-файл по дедлайнам</li>
          <li>📧 <strong>Уведомления экспертам</strong> — персональные письма о сроках</li>
          <li>📈 <strong>Отчёт по статистике</strong> — сводка по отделам</li>
        </ol>
        <p style="margin:0;color:var(--color-text-muted);font-size:13px;">Продолжить?</p>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="master-send-cancel">Отмена</button>
        <button class="btn-danger" id="confirm-master-send">🚀 Подтвердить отправку</button>
      </div>
    </div>
  </div>

  <!-- ── Employee Modal ───────────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-employee">
    <div class="modal-box" style="max-width:720px;">
      <div class="modal-header">
        <span class="modal-title" id="emp-modal-title">Новый сотрудник</span>
        <button class="modal-close" id="emp-modal-close">&times;</button>
      </div>
      <form id="form-employee" novalidate>
        <div class="form-grid emp-form-grid">

          <div class="field full">
            <label for="emp-name">ФИО *</label>
            <input type="text" id="emp-name" required placeholder="Фамилия Имя Отчество">
          </div>

          <div class="field">
            <label for="emp-email">Email</label>
            <input type="email" id="emp-email" placeholder="example@mail.ru">
          </div>

          <div class="field">
            <label for="emp-dept">Отдел</label>
            <select id="emp-dept">
              <option value="">— не указан —</option>
            </select>
          </div>

          <div class="field">
            <label for="emp-phone">Телефон</label>
            <input type="text" id="emp-phone" placeholder="+7 (___) ___-__-__">
          </div>

          <div class="field">
            <label for="emp-schedule">График работы</label>
            <select id="emp-schedule">
              <option value="5/2_mon_fri">5/2 Пн–Пт</option>
              <option value="5/2_tue_sat">5/2 Вт–Сб</option>
              <option value="5/2_sun_thu">5/2 Вс–Чт</option>
              <option value="2/2">2/2 (посменно)</option>
            </select>
          </div>

          <div class="field">
            <label for="emp-tg">Telegram ID</label>
            <input type="text" id="emp-tg" placeholder="@username или числовой ID">
          </div>

          <div class="field">
            <label for="emp-category">Категория</label>
            <select id="emp-category">
              <option value="">— не указана —</option>
              <option>Высшая</option>
              <option>Первая</option>
              <option>Вторая</option>
              <option>Без категории</option>
            </select>
          </div>

          <div class="field">
            <label for="emp-birth">Дата рождения</label>
            <input type="date" id="emp-birth">
          </div>

          <div class="field" style="justify-content:flex-end;">
            <label style="display:inline-flex;align-items:center;gap:6px;font-size:13px;
                        cursor:pointer;margin-top:auto;padding-bottom:3px;">
              <input type="checkbox" id="emp-is-manager"> Является руководителем
            </label>
          </div>

          <div class="field full">
            <label>Руководители (выберите одного или нескольких)</label>
            <div class="custom-multiselect" id="managers-multiselect">
              <div class="multiselect-header" id="managers-header">
                <span class="multiselect-title" id="managers-title">Выберите руководителей…</span>
                <span class="multiselect-arrow">&#9660;</span>
              </div>
              <div class="multiselect-dropdown" id="managers-dropdown" style="display:none;"></div>
            </div>
          </div>

          <div class="field full">
            <div class="emp-toggles-row">
              <label class="toggle-wrap">
                <input type="checkbox" id="emp-is-active" class="toggle-input toggle-success" checked>
                <span class="toggle-track"><span class="toggle-thumb"></span></span>
                <span style="font-weight:600;color:var(--color-success);">Активен</span>
              </label>
              <label class="toggle-wrap">
                <input type="checkbox" id="emp-is-temp" class="toggle-input toggle-warning">
                <span class="toggle-track"><span class="toggle-thumb"></span></span>
                <span>⏳ Временный</span>
              </label>
              <label class="toggle-wrap">
                <input type="checkbox" id="emp-is-reso" class="toggle-input toggle-info">
                <span class="toggle-track"><span class="toggle-thumb"></span></span>
                <span>🏢 РЕСО</span>
              </label>
            </div>
          </div>

          <div class="field full" id="emp-fired-date-block" style="display:none;">
            <label for="emp-fired-date">Дата увольнения</label>
            <input type="date" id="emp-fired-date">
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn-secondary" id="emp-modal-spec-btn" style="margin-right:auto;">🔧
            Специализация</button>
          <button type="button" class="btn-secondary" id="emp-modal-cancel">Отмена</button>
          <button type="submit" class="btn-primary" id="emp-modal-submit">Сохранить</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ── Specialization Modal (employee services) ──────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-specialization">
    <div class="modal-box modal-lg" style="max-width:800px;">
      <div class="modal-header">
        <span class="modal-title" id="spec-modal-title">Специализация сотрудника</span>
        <button class="modal-close" id="spec-modal-close">&times;</button>
      </div>
      <div class="modal-body" style="padding:16px 24px;">
        <div style="margin-bottom:12px;font-size:13px;color:var(--color-text-muted);">
          Отметьте услуги, которые выполняет сотрудник. Каждая услуга добавляется одной строкой.
        </div>
        <div style="overflow-x:auto;">
          <table class="data-table" id="spec-services-table" style="width:100%;">
            <thead>
              <tr>
                <th style="width:1%;white-space:nowrap;padding:6px 8px;">+</th>
                <th style="padding:6px 8px;">Услуга</th>
                <th style="width:1%;white-space:nowrap;padding:6px 8px;"></th>
              </tr>
            </thead>
            <tbody id="spec-services-tbody">
              <!-- Rows inserted by JS -->
            </tbody>
          </table>
        </div>
        <div style="margin-top:10px;">
          <button type="button" class="btn-secondary btn-sm" id="spec-add-row-btn">+ Добавить услугу</button>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-secondary" id="spec-modal-cancel">Отмена</button>
        <button type="button" class="btn-primary" id="spec-modal-save">Сохранить</button>
      </div>
    </div>
  </div>

  <!-- ── Upload Excel Modal ────────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-add-deadline">
    <div class="modal-box" style="max-width:480px;">
      <div class="modal-header">
        <span class="modal-title">Загрузить дедлайны из Excel</span>
        <button class="modal-close" id="modal-close-btn" title="Закрыть">&times;</button>
      </div>

      <p class="hint" style="margin-bottom:16px;">
        Выберите выгрузку из системы. Дата загрузки определяется автоматически
        из имени файла (формат <code>ДД.ММ.ГГГГ.xlsx</code>).
      </p>

      <form id="form-add-deadline" novalidate>

        <div class="upload-zone" id="upload-zone">
          <svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011
                   9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
          </svg>
          <p>Перетащите файл сюда</p>
          <p style="font-size:12px;">или</p>
          <label for="modal-file" class="btn-primary">Выбрать файл</label>
          <input type="file" id="modal-file" accept=".xlsx,.xls" style="display:none;">
          <p id="upload-filename"></p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn-secondary" id="modal-cancel-btn">Отмена</button>
          <button type="submit" class="btn-confirm" id="modal-submit" disabled>Загрузить</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ── Vacation Modal ────────────────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-vacation">
    <div class="modal-box" style="max-width:480px;">
      <div class="modal-header">
        <span class="modal-title" id="vac-modal-title">Новый отпуск</span>
        <button class="modal-close" id="vac-modal-close">&times;</button>
      </div>
      <form id="form-vacation" novalidate>
        <div class="form-grid">

          <div class="field full">
            <label for="vac-emp">Сотрудник *</label>
            <select id="vac-emp" required>
              <option value="">— выберите сотрудника —</option>
            </select>
          </div>

          <div class="field">
            <label for="vac-start">Начало</label>
            <input type="date" id="vac-start" required>
          </div>

          <div class="field">
            <label for="vac-weeks">Количество недель</label>
            <input type="number" id="vac-weeks" min="1" max="52" placeholder="2">
          </div>

          <div class="field">
            <label for="vac-end">Конец</label>
            <input type="date" id="vac-end" required>
          </div>

          <div class="field">
            <label for="vac-type">Тип</label>
            <select id="vac-type">
              <option value="Летний">Летний</option>
              <option value="Зимний">Зимний</option>
            </select>
          </div>

          <div class="field full" style="padding-top:4px;">
            <label class="checkbox-label" style="color:var(--color-success);font-weight:600;">
              <input type="checkbox" id="vac-working">
              ★ Работает (производственная необходимость)
            </label>
            <p class="hint" style="margin:4px 0 0;font-size:11px;">
              Отпуск числится, но сотрудник доступен для распределения дел
            </p>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn-secondary" id="vac-modal-cancel">Отмена</button>
          <button type="submit" class="btn-confirm" id="vac-modal-submit">Сохранить</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ── Workload Upload Modal ──────────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-wl-upload">
    <div class="modal-box" style="max-width:480px;">
      <div class="modal-header">
        <span class="modal-title">Загрузить данные загрузок (Excel)</span>
        <button class="modal-close" id="wl-upload-close">&times;</button>
      </div>
      <p class="hint" style="margin-bottom:16px;">
        Выберите выгрузку из системы. Дата определяется автоматически из имени файла
        (формат <code>ДДММГГГГ.xlsx</code>, например <code>01042026.xlsx</code>).
        Существующие записи за эту дату будут заменены.
      </p>
      <form id="form-wl-upload" novalidate>
        <div class="upload-zone" id="wl-upload-zone">
          <svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011
                   9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
          </svg>
          <p>Перетащите файл сюда</p>
          <p style="font-size:12px;">или</p>
          <label for="wl-upload-file" class="btn-primary">Выбрать файл</label>
          <input type="file" id="wl-upload-file" accept=".xlsx,.xls" style="display:none;">
          <p id="wl-upload-filename"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-secondary" id="wl-upload-cancel">Отмена</button>
          <button type="submit" class="btn-confirm" id="wl-upload-submit" disabled>Загрузить</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ── Vacation Brush Menu ───────────────────────────────────────────────── -->
  <div id="vac-brush-menu" class="vac-brush-menu hidden">
    <div class="cal-brush-title">Установить отпуск:</div>
    <div class="vac-brush-actions">
      <button data-vac-action="summer" title="Летний отпуск">☀ Летний</button>
      <button data-vac-action="winter" title="Зимний отпуск">❄ Зимний</button>
      <button data-vac-action="delete" title="Очистить период">✕ Удалить</button>
      <button data-vac-action="cancel" title="Отмена">&times;</button>
    </div>
  </div>

  <!-- ── Calendar Brush Status Menu ────────────────────────────────────────── -->
  <div id="cal-brush-menu" class="cal-brush-menu hidden">
    <div class="cal-brush-title">Установить статус:</div>
    <div class="cal-brush-actions">
      <button data-action="working" title="Рабочий день">Р</button>
      <button data-action="dayoff" title="Выходной">В</button>
      <button data-action="vacation" title="Отпуск">О</button>
      <button data-action="absent" title="Неявка">Н</button>
      <button data-action="trip" title="Командировка">К</button>
      <button data-action="sick" title="Больничный">Б</button>
      <button data-action="cancel" title="Отмена">&times;</button>
    </div>
  </div>

  <!-- ── Distribution Limits Modal ─────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-dist-limits" style="z-index:1100;">
    <div class="modal-box" style="max-width:520px;">
      <div class="modal-header">
        <span class="modal-title">📊 Лимиты распределения</span>
        <button class="modal-close" id="dist-limits-close">&times;</button>
      </div>

      <div class="dist-limits-legend">
        <p class="hint" style="margin:0;">
          Лимит: максимальное число дел в работе. Пустое значение — без ограничений.<br>
          Кликните на ячейку «Лимит» для редактирования; нажмите Enter или уберите фокус для сохранения.
        </p>
        <div class="dist-limits-legend-chips">
          <span class="dl-legend-chip limit-reached-chip"></span><span>Лимит достигнут (≥ 100%)</span>
          <span class="dl-legend-chip limit-warning-chip"></span><span>Близко к лимиту (≥ 80%)</span>
        </div>
      </div>

      <div class="dist-limits-table-wrap">
        <table class="data-table dist-limits-table">
          <thead>
            <tr>
              <th>Эксперт</th>
              <th style="width:90px;text-align:center;">В работе</th>
              <th style="width:120px;text-align:center;">Лимит</th>
            </tr>
          </thead>
          <tbody id="dist-limits-tbody">
            <tr>
              <td colspan="3" class="dist-rules-empty">Загрузка…</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="modal-footer">
        <button class="btn-secondary" id="dist-limits-cancel">Закрыть</button>
      </div>
    </div>
  </div>

  <!-- ── Rule Add/Edit Modal ────────────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-rule-edit" style="z-index:1100;">
    <div class="modal-box" style="max-width:90%;width:1200px;">
      <div class="modal-header">
        <span class="modal-title" id="rule-edit-title">Добавить правило</span>
        <button class="modal-close" id="rule-edit-close">&times;</button>
      </div>

      <div class="modal-body" style="padding:12px 24px;">

        <div class="field" style="margin-bottom:4px;">
          <label for="rule-expert-select">Эксперт *</label>
          <select id="rule-expert-select" required style="width:100%;padding:7px 10px;
              border:1px solid var(--color-border-input);border-radius:var(--radius-md);
              font-size:13px;font-family:var(--font-sans);outline:none;">
            <option value="">— выберите эксперта —</option>
          </select>
        </div>

        <div class="criteria-grid">

          <div class="rule-param-block">
            <label class="rule-param-label">Тип услуги</label>
            <div class="rule-toolbar" id="rule-service-type">
              <button type="button" class="rule-tgl-btn" data-list="rule-service-values" data-action="toggle">☑ Все /
                Сброс</button>
              <div class="rule-mode-group">
                <input type="radio" class="rule-mode-input" name="rule_service_logic" id="rs_deny" value="deny">
                <label class="rule-mode-lbl rule-mode-deny" for="rs_deny">🚫 Запрет</label>
                <input type="radio" class="rule-mode-input" name="rule_service_logic" id="rs_only" value="only">
                <label class="rule-mode-lbl rule-mode-only" for="rs_only">⭐ Только</label>
              </div>
            </div>
            <div class="rule-cb-list" id="rule-service-values"></div>
          </div>

          <div class="rule-param-block">
            <label class="rule-param-label">Регион</label>
            <div class="rule-toolbar" id="rule-region-type">
              <button type="button" class="rule-tgl-btn" data-list="rule-region-values" data-action="toggle">☑ Все /
                Сброс</button>
              <div class="rule-mode-group">
                <input type="radio" class="rule-mode-input" name="rule_region_logic" id="rrg_deny" value="deny">
                <label class="rule-mode-lbl rule-mode-deny" for="rrg_deny">🚫 Запрет</label>
                <input type="radio" class="rule-mode-input" name="rule_region_logic" id="rrg_only" value="only">
                <label class="rule-mode-lbl rule-mode-only" for="rrg_only">⭐ Только</label>
              </div>
            </div>
            <div class="rule-cb-list" id="rule-region-values"></div>
          </div>

          <div class="rule-param-block">
            <label class="rule-param-label">Риск</label>
            <div class="rule-toolbar" id="rule-risk-type">
              <button type="button" class="rule-tgl-btn" data-list="rule-risk-values" data-action="toggle">☑ Все /
                Сброс</button>
              <div class="rule-mode-group">
                <input type="radio" class="rule-mode-input" name="rule_risk_logic" id="rrsk_deny" value="deny">
                <label class="rule-mode-lbl rule-mode-deny" for="rrsk_deny">🚫 Запрет</label>
                <input type="radio" class="rule-mode-input" name="rule_risk_logic" id="rrsk_only" value="only">
                <label class="rule-mode-lbl rule-mode-only" for="rrsk_only">⭐ Только</label>
              </div>
            </div>
            <div class="rule-cb-list" id="rule-risk-values"></div>
          </div>

          <div class="rule-param-block">
            <label class="rule-param-label">Префикс</label>
            <div class="rule-toolbar" id="rule-prefix-type">
              <button type="button" class="rule-tgl-btn" data-list="rule-prefix-values" data-action="toggle">☑ Все /
                Сброс</button>
              <div class="rule-mode-group">
                <input type="radio" class="rule-mode-input" name="rule_prefix_logic" id="rpfx_deny" value="deny">
                <label class="rule-mode-lbl rule-mode-deny" for="rpfx_deny">🚫 Запрет</label>
                <input type="radio" class="rule-mode-input" name="rule_prefix_logic" id="rpfx_only" value="only">
                <label class="rule-mode-lbl rule-mode-only" for="rpfx_only">⭐ Только</label>
              </div>
            </div>
            <div class="rule-cb-list" id="rule-prefix-values"></div>
          </div>

        </div>

      </div><!-- /modal-body -->

      <div class="modal-footer">
        <button class="btn-secondary" id="rule-edit-cancel">Отмена</button>
        <button class="btn-confirm" id="rule-edit-save">Сохранить</button>
      </div>
    </div>
  </div>

  <!-- ── Distribution Preview Modal ─────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-dist-preview">
    <div class="modal-box modal-box-scrollable" style="max-width:860px;width:96vw;">
      <div class="modal-header">
        <span class="modal-title">⭐ Предпросмотр умного распределения</span>
        <button class="modal-close" id="dist-preview-close">&times;</button>
      </div>
      <div class="modal-body-scrollable">
        <p class="hint" style="margin-bottom:10px;" id="dist-preview-hint"></p>
        <div id="distribution-limits-info"></div>
        <div style="overflow-x:auto;overflow-y:auto;">
          <table class="data-table" id="dist-preview-table">
            <thead>
              <tr>
                <th style="width:32px;"></th>
                <th>Дело №</th>
                <th>Загружено</th>
                <th>Регион</th>
                <th>Риск</th>
                <th>Срок</th>
                <th>Кандидат на расчет</th>
                <th style="width:28px;" title="Обход ограничений">!</th>
              </tr>
            </thead>
            <tbody id="dist-preview-tbody"></tbody>
          </table>
        </div>
        <!-- ── Не распределены (отсутствуют в настройках типов услуг) ────────── -->
        <div id="preview-unmatched-cases" style="display:none;"></div>
      </div>
      <div class="modal-footer" style="justify-content:space-between;align-items:center;">
        <label style="font-size:12px;color:var(--color-text-muted);cursor:pointer;">
          <input type="checkbox" id="dist-preview-all" checked style="margin-right:4px;">
          Выбрать все
        </label>
        <div style="display:flex;gap:10px;">
          <button class="btn-secondary" id="dist-preview-cancel">Отмена</button>
          <button class="btn-confirm" id="dist-preview-apply" disabled>✔ Применить</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ── Distribution Rules Matrix Modal ────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-dist-settings">
    <div class="modal-box dist-rules-modal" style="max-width:95%;width:1400px;">
      <div class="modal-header" style="align-items:flex-start;">
        <div>
          <span class="modal-title">⚙️ Настройки системы</span>
          <div class="dist-rules-legend">
            <span class="dist-legend-deny">🚫 Запрет — значения недоступны</span>
            <span style="color:var(--color-border);">|</span>
            <span class="dist-legend-only">⭐ Только — работает исключительно с ними</span>
          </div>
        </div>
        <button class="modal-close" id="dist-settings-close">&times;</button>
      </div>

      <!-- Toolbar -->
      <div class="dist-rules-toolbar">
        <button class="btn-confirm" id="btn-dist-rule-add">+ Добавить</button>
        <button class="btn-secondary" id="btn-dist-rule-edit" disabled>✏ Изменить</button>
        <button class="btn-danger" id="btn-dist-rule-delete" disabled>🗑 Удалить</button>
        <div style="flex:1;"></div>
        <button class="btn-secondary" id="btn-auto-gen">🤖 Авто-генерация</button>
        <button class="btn-secondary" id="btn-dist-limits">📊 Лимиты</button>
      </div>

      <!-- Matrix table -->
      <div class="dist-rules-table-wrap">
        <table class="data-table dist-rules-table">
          <thead>
            <tr>
              <th style="min-width:160px;">Эксперт</th>
              <th>Тип услуги</th>
              <th>Регион</th>
              <th>Риск</th>
              <th>Префикс</th>
              <th class="text-center align-middle" style="width:1%;white-space:nowrap;">В распределении</th>
              <th class="text-center align-middle text-nowrap" style="width:1%;">ДУБЛИКАТ</th>
            </tr>
          </thead>
          <tbody id="dist-rules-tbody">
            <tr>
              <td colspan="6" class="dist-rules-empty">Загрузка…</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="gs-email-section">
        <div class="gs-email-section-title">📧 Управление рассылками</div>

        <div class="gs-email-rows-grid"
          style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;">

          <!-- Card: Все дела -->
          <div class="gs-email-row">
            <label class="gs-email-label">📋 Отчёты и напоминания («Все дела»)</label>
            <div class="gs-chip-block">
              <div class="gs-chip-section-label">Кому (To):</div>
              <div class="gs-chip-list" id="chips-all-tasks-to"></div>
              <div class="gs-chip-add-row">
                <input type="email" id="input-all-tasks-to" class="gs-chip-input" placeholder="Добавить адрес…">
                <button type="button" class="btn-sm" id="btn-add-all-tasks-to" title="Добавить">+</button>
              </div>
            </div>
            <div class="gs-chip-block gs-chip-block-cc">
              <div class="gs-chip-section-label">Копия (CC):</div>
              <div class="gs-chip-list" id="chips-all-tasks-cc"></div>
              <div class="gs-chip-add-row">
                <input type="email" id="input-all-tasks-cc" class="gs-chip-input" placeholder="Добавить в копию…">
                <button type="button" class="btn-sm" id="btn-add-all-tasks-cc" title="Добавить">+</button>
              </div>
            </div>
            <div class="gs-email-btn-row">
              <button type="button" class="btn-confirm gs-email-save" id="btn-dist-save-admin-emails">Сохранить</button>
            </div>
            <p class="gs-email-hint">Excel-отчёт по дедлайнам и копии напоминаний (вкладка «Все дела»).</p>
          </div>

          <!-- Card: Требуют назначения -->
          <div class="gs-email-row">
            <label class="gs-email-label">✉️ Рассылка назначений («Требуют назначения»)</label>
            <div class="gs-chip-block">
              <div class="gs-chip-section-label">Кому (To):</div>
              <div class="gs-chip-list" id="chips-assignments-to"></div>
              <div class="gs-chip-add-row">
                <input type="email" id="input-assignments-to" class="gs-chip-input" placeholder="Добавить адрес…">
                <button type="button" class="btn-sm" id="btn-add-assignments-to" title="Добавить">+</button>
              </div>
            </div>
            <div class="gs-chip-block gs-chip-block-cc">
              <div class="gs-chip-section-label">Копия (CC):</div>
              <div class="gs-chip-list" id="chips-assignments-cc"></div>
              <div class="gs-chip-add-row">
                <input type="email" id="input-assignments-cc" class="gs-chip-input" placeholder="Добавить в копию…">
                <button type="button" class="btn-sm" id="btn-add-assignments-cc" title="Добавить">+</button>
              </div>
            </div>
            <div class="gs-email-btn-row">
              <button type="button" class="btn-confirm gs-email-save" id="btn-gs-save-assignments-cc">Сохранить</button>
            </div>
            <p class="gs-email-hint">Уведомления о распределённых делах (вкладка «Требуют назначения»).</p>
          </div>

          <!-- Card: Статистика -->
          <div class="gs-email-row">
            <label class="gs-email-label">📊 Отчёты по статистике («Статистика»)</label>
            <div class="gs-chip-block">
              <div class="gs-chip-section-label">Кому (To):</div>
              <div class="gs-chip-list" id="chips-statistics-to"></div>
              <div class="gs-chip-add-row">
                <input type="email" id="input-statistics-to" class="gs-chip-input" placeholder="Добавить адрес…">
                <button type="button" class="btn-sm" id="btn-add-statistics-to" title="Добавить">+</button>
              </div>
            </div>
            <div class="gs-chip-block gs-chip-block-cc">
              <div class="gs-chip-section-label">Копия (CC):</div>
              <div class="gs-chip-list" id="chips-statistics-cc"></div>
              <div class="gs-chip-add-row">
                <input type="email" id="input-statistics-cc" class="gs-chip-input" placeholder="Добавить в копию…">
                <button type="button" class="btn-sm" id="btn-add-statistics-cc" title="Добавить">+</button>
              </div>
            </div>
            <div class="gs-email-btn-row">
              <button type="button" class="btn-confirm gs-email-save" id="btn-gs-save-expert-control">Сохранить</button>
            </div>
            <p class="gs-email-hint">Сводный отчёт из вкладки «Статистика».</p>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="dist-settings-cancel">Закрыть</button>
      </div>
    </div>
  </div>

  <!-- ── Auto-Generate Rules Modal ─────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-auto-gen" style="z-index:1100;">
    <div class="modal-box" style="max-width:440px;">
      <div class="modal-header">
        <span class="modal-title">🤖 Авто-генерация правил</span>
        <button class="modal-close" id="auto-gen-close">&times;</button>
      </div>
      <div style="padding:16px 20px 4px;">
        <div class="field" style="margin-bottom:16px;">
          <label for="auto-gen-files"
            style="display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:var(--color-text-hint);">Исторические
            Excel-файлы</label>
          <input type="file" id="auto-gen-files" multiple accept=".xlsx,.xls,.csv" style="width:100%;box-sizing:border-box;padding:6px 10px;
                      border:1px solid var(--color-border-input);border-radius:var(--radius-md);
                      font-size:13px;font-family:var(--font-sans);outline:none;
                      background:var(--color-surface);cursor:pointer;">
          <p style="margin:5px 0 0;font-size:11px;color:var(--color-text-muted);">Выберите один или несколько
            Excel-отчётов за прошлые периоды</p>
        </div>
        <div class="field" style="margin-bottom:16px;">
          <label for="auto-gen-threshold"
            style="display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:var(--color-text-hint);">Порог
            отсечения шума (%)</label>
          <input type="number" id="auto-gen-threshold" value="5" step="1" min="0" max="100" style="width:120px;padding:7px 10px;
                      border:1px solid var(--color-border-input);border-radius:var(--radius-md);
                      font-size:13px;font-family:var(--font-sans);outline:none;">
          <p style="margin:5px 0 0;font-size:11px;color:var(--color-text-muted);">Значения ниже этого % от общего
            числа
            дел эксперта игнорируются как статистический шум</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="auto-gen-cancel">Отмена</button>
        <button class="btn-confirm" id="btn-start-auto-gen">▶ Запустить анализ</button>
      </div>
    </div>
  </div>

  <!-- ── Tariff Dictionary Modal ────────────────────────────────────────────── -->
  <div class="modal-overlay hidden" id="modal-eco-tariffs">
    <div class="modal-box" style="width:min(95vw,1200px);">
      <div class="modal-header">
        <span class="modal-title">⚙️ Справочник тарифов</span>
        <button class="modal-close" id="eco-tariffs-close">&times;</button>
      </div>
      <!-- Version selector — hidden in view, kept for JS compatibility -->
      <div style="display:none;">
        <select id="eco-tariff-version-sel"></select>
        <span id="eco-tariff-version-hint"></span>
      </div>
      <div id="eco-tariff-ver-bar" class="tariff-ver-bar"></div>
      <div class="tariff-table-wrap">
        <table class="data-table tariff-table" id="eco-tariffs-table">
          <thead id="eco-tariffs-thead"></thead>
          <tbody id="eco-tariffs-body"></tbody>
        </table>
      </div>
      <!-- History + Indexation section -->
      <div style="border-top:1px solid var(--color-border);padding:10px 20px;">
        <div id="eco-indexation-toggle"
          style="display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;">
          <span style="font-size:12px;font-weight:700;color:var(--color-text-hint);">📅 История индексации</span>
          <span id="eco-indexation-arrow" style="font-size:12px;color:var(--color-text-muted);">▾</span>
        </div>
        <div id="eco-indexation-body" style="display:none;margin-top:8px;">
          <div id="eco-version-history-list" style="margin-bottom:8px;"></div>
          <!-- New version form -->
          <div id="eco-new-version-form"
            style="display:none;padding:10px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:8px;">
            <div style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;">
              <div style="display:flex;flex-direction:column;gap:3px;">
                <span style="font-size:11px;font-weight:700;color:var(--color-text-hint);">Начало действия</span>
                <input type="month" id="eco-new-version-month"
                  style="padding:5px 8px;border:1px solid var(--color-border-input);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-sans);outline:none;">
              </div>
              <div style="display:flex;flex-direction:column;gap:3px;">
                <span style="font-size:11px;font-weight:700;color:var(--color-text-hint);">Коэффициент</span>
                <input type="number" id="eco-new-version-coeff" min="0.01" max="10" step="0.01" value="1.05"
                  style="width:90px;padding:5px 8px;border:1px solid var(--color-border-input);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-sans);outline:none;">
              </div>
              <button class="btn-confirm" id="btn-eco-create-version"
                style="font-size:12px;padding:5px 14px;">Создать</button>
              <button class="btn-secondary" id="btn-eco-cancel-version"
                style="font-size:12px;padding:5px 12px;">Отмена</button>
            </div>
          </div>
          <button class="btn-sm" id="btn-eco-new-version">➕ Создать новую версию (Индексация)</button>
        </div>
      </div>
      <div class="modal-footer" style="justify-content:space-between;">
        <button class="btn-sm" id="btn-eco-tariff-add">➕ Добавить строку</button>
        <div style="display:flex;gap:8px;">
          <button class="btn-secondary" id="eco-tariffs-cancel">Отмена</button>
          <button class="btn-primary" id="eco-tariffs-save">Сохранить</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
  <script src="/static/main.js?v=107"></script>
</body>

</html>