/* styles/pages/director-panel.css — Панель директора v9.
 *
 * Токены перенесены из <helmet> макета claude_code_handoff/design/ARKAN Director
 * Panel.dc.html дословно (спека DIRECTOR_PANEL_v9.md прямо требует не хардкодить их
 * в компонентах). Область действия — только .dp-root: панель не должна перекрашивать
 * остальное приложение, поэтому глобальные html/body правила макета сюда не
 * переносятся, фон и цвет текста панель ставит на своих контейнерах, как в макете.
 *
 * Тема: макет переключается атрибутом data-dp-theme, продакшн — data-theme.
 * Значения обеих тем скопированы без изменений, поменялся только селектор.
 */

.dp-root {
  --bg:#0b0d0f; --card:#14171a; --card2:#171b1e; --tile:#1a1f22;
  --line:rgba(235,242,245,.11); --line-soft:rgba(235,242,245,.06);
  --t1:#ffffff; --t2:#dfe5e8; --t3:#b0b9bd; --t4:#8d9599; --t-tint:#c2cacd;
  --acc:#3ff0b4; --acc-t:#6affc9; --acc-soft:rgba(63,240,180,.12); --acc-line:rgba(63,240,180,.3);
  --red:#f2564d; --red-t:#ff8d80; --red-soft:rgba(242,86,77,.13); --red-line:rgba(242,86,77,.34);
  --orange:#f59042; --orange-t:#ffb066; --orange-soft:rgba(245,144,66,.13); --orange-line:rgba(245,144,66,.32);
  --yellow:#e5b428; --yellow-t:#ffd166; --yellow-soft:rgba(229,180,40,.13); --yellow-line:rgba(229,180,40,.32);
  --green:#2fc27f; --green-t:#5fe3a5; --green-soft:rgba(47,194,127,.13); --green-line:rgba(47,194,127,.32);
  --blue:#4f8ef2; --blue-t:#8ab4ff; --blue-soft:rgba(79,142,242,.13); --blue-line:rgba(79,142,242,.32);
  --purple:#9c6bf0; --purple-t:#c3a0ff; --purple-soft:rgba(156,107,240,.13); --purple-line:rgba(156,107,240,.32);
  --shadow:0 1px 2px rgba(0,0,0,.45);
}

[data-theme="light"] .dp-root {
  --bg:#f3f6f4; --card:#ffffff; --card2:#fafcfb; --tile:#f4f7f5;
  --line:rgba(18,34,29,.12); --line-soft:rgba(18,34,29,.06);
  --t1:#111816; --t2:#303b37; --t3:#4f5a55; --t4:#667281; --t-tint:#46525f;
  --acc:#12775e; --acc-t:#0c5f49; --acc-soft:rgba(18,119,94,.1); --acc-line:rgba(18,119,94,.3);
  --red:#d0342c; --red-t:#a8231c; --red-soft:rgba(208,52,44,.1); --red-line:rgba(208,52,44,.28);
  --orange:#c2701a; --orange-t:#8a5708; --orange-soft:rgba(194,112,26,.1); --orange-line:rgba(194,112,26,.26);
  --yellow:#a8811a; --yellow-t:#7d5f06; --yellow-soft:rgba(168,129,26,.12); --yellow-line:rgba(168,129,26,.28);
  --green:#12775e; --green-t:#0a5c47; --green-soft:rgba(18,119,94,.1); --green-line:rgba(18,119,94,.26);
  --blue:#1f5fd0; --blue-t:#164a9e; --blue-soft:rgba(31,95,208,.1); --blue-line:rgba(31,95,208,.26);
  --purple:#6b3fd0; --purple-t:#4f27a3; --purple-soft:rgba(107,63,208,.1); --purple-line:rgba(107,63,208,.26);
  --shadow:0 1px 2px rgba(16,24,40,.06);
}

.dp-root, .dp-root * { box-sizing:border-box; }
.dp-root { font-family:'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
.dp-root button { font-family:inherit; color:inherit; }
.dp-root a { color:var(--acc); text-decoration:none; }
.dp-root a:hover { color:var(--acc-t); }
.dp-root :focus-visible { outline:2px solid var(--acc); outline-offset:2px; }

.dp-x { scrollbar-width:none; -ms-overflow-style:none; }
.dp-x::-webkit-scrollbar { display:none; }

/* Ховеры макета жили в атрибутах style-hover — переносим их правилами,
   значения не меняются. */
.dp-kpi > button:hover,
.dp-quick > button:hover { transform:translateY(-2px); }
.dp-dec-row:hover { background:var(--tile); }
.dp-link:hover { opacity:.8; }
.dp-btn-ghost:hover { border-color:var(--acc); color:var(--t1); }
.dp-btn-acc:hover { filter:brightness(1.15); }
.dp-week:hover { border-color:var(--acc-line); }
.dp-meet:hover { background:var(--tile); }

@media (prefers-reduced-motion: reduce) {
  .dp-root * { animation:none !important; transition:none !important; }
}

/* ── Точки перелома ───────────────────────────────────────────────────────
 * Спека DIRECTOR_PANEL_v9.md: ширина панели фиксированная 1400px, и если
 * места не хватает — нужна НАСТОЯЩАЯ точка перелома (KPI в меньшее число
 * колонок, шапка в две строки), а не растягивание или сжатие текущей сетки.
 * Пока места хватает — раскладка ровно та, что в макете, до пикселя.
 *
 * Меряем не окно, а саму область контента: ширина зависит ещё и от того,
 * свёрнут ли сайдбар, поэтому container query, а не media query.
 * Инлайновые стили перенесены из макета, поэтому переопределяем их !important.
 */
.dp-x { container-type: inline-size; container-name: dp; }

@container dp (max-width: 1399px) {
  .dp-root { width:100% !important; min-width:0 !important; }

  /* Пять карточек в три колонки не делятся нацело: вторая строка оставалась
     с пустым местом до 455px. Берём шесть долей — три карточки по две доли
     сверху и две по три снизу. Строки заполнены целиком, высота и содержимое
     карточек прежние. */
  .dp-kpi  { grid-template-columns:repeat(6, minmax(0,1fr)) !important; }
  .dp-kpi > button { grid-column:span 2; }
  .dp-kpi > button:nth-child(4),
  .dp-kpi > button:nth-child(5) { grid-column:span 3; }

  /* Три карточки в две колонки давали ту же дыру — до 682px пустоты справа от
     «Пульса компании». Он занимает вторую строку целиком: график считает свой
     viewBox по фактической ширине, поэтому на широкой карточке не искажается
     (раньше здесь стояла обратная оговорка — она устарела вместе с фиксированной
     шириной графика). */
  .dp-row2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
  .dp-row2 > :nth-child(3) { grid-column:1 / -1; }

  .dp-row3 { grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}

@container dp (max-width: 1000px) {
  /* Две колонки: четыре карточки парами, пятая занимает строку целиком —
     иначе рядом с ней снова пустует половина ряда. */
  .dp-kpi  { grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .dp-kpi > button { grid-column:auto; }
  .dp-kpi > button:nth-child(4) { grid-column:auto; }
  .dp-kpi > button:nth-child(5) { grid-column:1 / -1; }
  .dp-quick { grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  /* Шапка в две строки: приветствие сверху, дата и время под ним. */
  .dp-root > header { grid-template-columns:minmax(0,1fr) !important; row-gap:8px !important; }
  .dp-root > header > div:nth-child(2) { justify-self:start !important; }
}

@container dp (max-width: 720px) {
  .dp-kpi, .dp-row2, .dp-row3 { grid-template-columns:minmax(0,1fr) !important; }
  /* Одна колонка — растяжки не нужны, иначе они переопределяют раскладку. */
  .dp-kpi > button,
  .dp-kpi > button:nth-child(4),
  .dp-kpi > button:nth-child(5),
  .dp-row2 > :nth-child(3) { grid-column:auto !important; }
  .dp-quick { grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .dp-root { padding:16px 14px 20px !important; }
  .dp-root > header { grid-template-columns:minmax(0,1fr) !important; }
  .dp-root > header > div:nth-child(2) { justify-self:start !important; }
}

/* ── Телефон: содержимое строк, а не только рамки ─────────────────────────
 * Проверка на 360/375/390/414 показала: за карточки ничего не выходит, но
 * внутри колонки схлопываются и текст режется до нечитаемого — «Servi…»,
 * «Заку…», «W4 IT…». Ширины ниже отдают место названию, поэтому меняются
 * только на узком экране; на десктопе раскладка макета не трогается.
 */
@container dp (max-width: 720px) {
  /* Название решения переносится на вторую строку вместо «W4 IT…». */
  .dp-dec-head  { flex-wrap:wrap !important; gap:3px 8px !important; }
  .dp-dec-title { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
  .dp-decision-row { align-items:start !important; }
  .dp-dec-right { max-width:92px !important; }
}

@container dp (max-width: 500px) {
  /* Переключатель периода не помещается рядом с заголовком карточки: на 360px
     он вылезал на 59px за её край. Шапка переносится в две строки, а сам
     переключатель занимает ширину целиком равными долями. */
  section[aria-label="Пульс компании"] > div:first-child { flex-wrap:wrap !important; }
  .dp-periods { width:100% !important; }
  .dp-period  { flex:1 1 0 !important; text-align:center !important; padding:0 4px !important; }

  /* Колонка «Тренд» съедала строку: у большинства направлений истории нет,
     а кривая шириной 39px нечитаема. Убираем её, место уходит названию. */
  .dp-ops-grid { grid-template-columns:minmax(0,1fr) 40px 46px !important; gap:8px !important; }
  .dp-ops-grid > :nth-child(4) { display:none !important; }
  .dp-team-grid { grid-template-columns:minmax(0,1fr) 64px 46px !important; gap:8px !important; }
}

/* Переключатель периода в шапке «Пульса компании» — тот же слот, что в макете. */
.dp-period:hover:not([disabled]) { background:var(--tile) !important; color:var(--t1) !important; }
.dp-period[aria-pressed="true"]:hover { background:var(--acc-soft) !important; }