/* Каркас рабочего места: слева меню разделов, справа шапка и панели.
   Подключать после tokens.css и до controls.css.
   Кнопки, поля, вкладки, окна и крошки остаются в controls.css.
   Экраны проекта (обзор, документы, табель, гант) остаются в своих файлах. */

:root {
  --pe-side-width: 220px;
}

/* Рабочее место вне проекта (настройки): цвета каркаса из --lg-*.
   Проект держит свои --pe-* в project_resource_economy.css и этот класс не ставит. */
.pe-shell--lg {
  /* Меню настроек шире меню проекта: длинные названия разделов и подменю. */
  --pe-side-width: 280px;
  --pe-blue: var(--lg-primary);
  --pe-blue-soft: var(--lg-primary-soft);
  --pe-blue-border: var(--lg-border);
  --pe-border: var(--lg-border);
  --pe-muted: var(--lg-muted);
  --pe-text: var(--lg-text);
  --pe-ok: var(--lg-success);
  --pe-warn: var(--lg-warning);
  --pe-bad: var(--lg-danger);
  --pe-surface: var(--lg-surface);
  --pe-soft: var(--lg-content-bg);
}

html[data-bs-theme="dark"] .pe-shell,
html[data-bs-theme="dark"] .lg-shell {
  --pe-blue: var(--lg-primary, var(--ask-accent, #6b8fb5));
  --pe-blue-soft: var(--lg-primary-soft, var(--ask-accent-soft, rgba(107, 143, 181, 0.18)));
  --pe-blue-border: var(--lg-border, var(--ask-border, rgba(255, 255, 255, 0.13)));
  --pe-border: var(--lg-border, var(--ask-border, rgba(255, 255, 255, 0.13)));
  --pe-muted: var(--lg-muted, var(--ask-text-secondary, #8a8f9e));
  --pe-text: var(--lg-text, var(--ask-text, #d0d3db));
  --pe-ok: var(--lg-success, var(--ask-success, #3daa74));
  --pe-warn: var(--lg-warning, var(--ask-warning, #c49040));
  --pe-bad: var(--lg-danger, var(--ask-danger, #d95555));
  --pe-surface: var(--lg-surface, var(--ask-surface, #262830));
  --pe-soft: var(--lg-content-bg, var(--ask-surface-muted, #22242b));
}

html[data-bs-theme="dark"] .pe-side-nav {
  background: var(--pe-surface);
  color: var(--pe-text);
  border-color: var(--pe-border);
}

html[data-bs-theme="dark"] .pe-side-nav__link {
  color: var(--pe-text);
}

/* Две колонки только вместе с меню. Без pe-side-nav оболочка — одна колонка. */
.pe-shell {
  min-width: 0;
}

.pe-shell:has(> .pe-side-nav) {
  display: grid;
  grid-template-columns: var(--pe-side-width) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  min-height: 70vh;
}

.pe-shell__main {
  min-width: 0;
}

.pe-side-nav {
  position: sticky;
  /* ниже фиксированного #page-topbar (70px), иначе меню уезжает под хидер */
  top: calc(70px + 0.75rem);
  max-height: calc(100dvh - 70px - 1.5rem);
  overflow: auto;
  z-index: 2;
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--lg-radius-section, 10px);
  padding: 0.85rem 0.65rem;
}

.pe-side-nav__section + .pe-side-nav__section {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--pe-border, #f3f4f6);
}

.pe-side-nav__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pe-muted, #566174);
  padding: 0 10px 4px;
}

.pe-side-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pe-side-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--pe-text, #202b3d);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
}

.pe-side-nav__link-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.pe-side-nav .lg-ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.pe-side-nav__link-text {
  min-width: 0;
}

.pe-side-nav__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--lg-chip-bg, #e5e7eb);
  color: var(--lg-chip-fg, #4b5563);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
}

.pe-side-nav__link:hover {
  background: var(--lg-hover, #f3f4f6);
  color: var(--pe-text);
}

.lg-shell .pe-side-nav__label {
  color: var(--lg-muted);
}

.lg-shell .pe-side-nav__link {
  color: var(--lg-text);
  font-weight: 400;
}

.lg-shell .pe-side-nav__link-main {
  gap: 8px;
}

.lg-shell .pe-side-nav__link:hover {
  background: var(--lg-hover);
  color: var(--lg-text);
}

.lg-shell .pe-side-nav__badge,
.lg-shell .pe-side-nav__link:hover .pe-side-nav__badge,
.lg-shell .pe-side-nav__link.is-active .pe-side-nav__badge {
  background: var(--lg-chip-bg);
  color: var(--lg-chip-fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-radius: var(--lg-radius-tag, 4px);
}

.pe-side-nav__link:hover .pe-side-nav__badge {
  background: var(--lg-chip-bg, #e5e7eb);
  color: var(--lg-chip-fg, #374151);
}

.pe-side-nav__link.is-active {
  background: var(--pe-blue-soft);
  color: var(--pe-blue);
  font-weight: 600;
}

.pe-side-nav__link.is-active .pe-side-nav__badge {
  background: var(--pe-blue-soft, #dbeafe);
  color: var(--pe-blue, #1d4ed8);
}

.pe-panel {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--lg-radius-section, 10px);
  padding: 1rem 1.1rem 1.05rem;
}

.pe-panel__head {
  margin-bottom: 0.85rem;
}

.pe-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* Строка параметра настроек: слева название и пояснение, справа значение. */
.pe-param {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 0.5rem 1.5rem;
  align-items: start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--lg-divider-subtle, #edf0f4);
}

.pe-param:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pe-param__title {
  display: block;
  margin: 0;
  font-size: var(--lg-type-body, 0.9375rem);
  font-weight: 500;
  color: var(--lg-text);
}

.pe-param > * {
  min-width: 0;
}

/* Длинные значения без пробелов (списки расширений, MIME-типы) переносятся, а не растягивают строку. */
.pe-param__title,
.pe-param__hint,
.pe-param__meta {
  overflow-wrap: anywhere;
}

.pe-param__hint,
.pe-param__meta {
  margin: 0.25rem 0 0;
  font-size: var(--lg-type-meta, 0.8125rem);
  line-height: var(--lg-line-meta, 1.125rem);
  color: var(--lg-muted);
}

.pe-param__meta .lg-tag {
  margin-left: 0.35rem;
}

.pe-param__control {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.pe-param__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.pe-param__form .lg-input {
  flex: 1 1 auto;
  min-width: 0;
}

.pe-param__confirm {
  flex-basis: 100%;
}

.pe-param__confirm .lg-attention {
  margin-bottom: 0.5rem;
}

.pe-param__saved,
.pe-param__error {
  flex-basis: 100%;
  font-size: var(--lg-type-meta, 0.8125rem);
}

.pe-param__saved {
  color: var(--lg-success);
}

.pe-param__error {
  color: var(--lg-danger);
}

@media (max-width: 767.98px) {
  .pe-param {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Поиск по настройкам в шапке раздела. */
.pe-settings-search {
  position: relative;
  width: min(100%, 320px);
}

/* Меню результатов — lg-popover из controls.css; ширину и раскладку пункта задаём сильнее его правил. */
.pe-shell--lg .pe-settings-search .pe-settings-search__results {
  width: min(420px, 90vw);
  max-width: min(420px, 90vw);
}

.pe-shell--lg .pe-settings-search .pe-settings-search__item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pe-shell--lg .pe-settings-search .pe-settings-search__item:hover,
.pe-shell--lg .pe-settings-search .pe-settings-search__item:focus-visible {
  background: var(--lg-hover);
  color: var(--lg-text);
}

.pe-settings-search__meta,
.pe-settings-search__empty {
  font-size: var(--lg-type-meta, 0.8125rem);
  color: var(--lg-muted);
}

.pe-settings-search__empty {
  margin: 0;
  padding: 8px 10px;
}

.pe-param.is-found {
  background: var(--lg-selected-bg);
  border-radius: var(--lg-radius);
}

/* Подменю раздела настроек: страницы активного раздела под его пунктом. */
.pe-side-nav__chevron {
  margin-left: auto;
}

.pe-side-nav .lg-ico.pe-side-nav__chevron {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

.pe-side-nav__sublist {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0 0 0 27px;
}

.pe-side-nav__sublabel {
  padding: 8px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pe-muted, #566174);
}

.pe-side-nav__sublink {
  display: block;
  padding: 5px 10px;
  border-radius: var(--lg-radius, 8px);
  color: var(--pe-text, #202b3d);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}

.pe-side-nav__sublink:hover {
  background: var(--lg-hover, #f3f4f6);
  color: var(--pe-text);
}

.pe-side-nav__sublink.is-active {
  background: var(--pe-blue-soft);
  color: var(--pe-blue);
  font-weight: 600;
}

/* Поле файла: crispy выводит «Сейчас: ссылка» и «Очистить» в одной flex-строке, на узком экране
   ссылка сжималась до столбика из символов. Ссылка занимает строку, флажок переносится ниже. */
.pe-shell--lg .input-group > .form-control.d-flex {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.pe-shell--lg .input-group > .form-control.d-flex > .text-break {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lg-shell.lg-dialog .pe-file-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.lg-shell.lg-dialog .pe-file-current a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Полоса страниц раздела — только на узком экране, где меню свёрнуто. */
.pe-shell--lg .nav.pe-settings-pages {
  display: none;
}

/* Кнопка меню разделов — кнопка lg-btn; .lg-shell .lg-btn задаёт display сильнее, чем .pe-drawer-toggle. */
.pe-shell--lg .pe-drawer-toggle.lg-btn {
  display: none;
}

/* Настройки на узком экране: вкладки в одну строку с прокруткой, а не в несколько строк. */
@media (max-width: 992px) {
  .pe-shell--lg .pe-drawer-toggle.lg-btn {
    display: inline-flex;
  }

  .pe-shell--lg .nav.pe-settings-pages {
    display: flex;
  }

  /* Раскрытое на телефоне меню настроек — список, а не ряд чипов: у пунктов есть подменю. */
  .pe-shell--lg .pe-side-nav__list {
    display: block;
  }

  /* Сильнее .lg-shell .pe-subtabs / .nav-tabs из controls.css: тот подключается позже. */
  .pe-shell--lg .nav.nav-tabs,
  .pe-shell--lg .nav.pe-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .pe-shell--lg .nav-tabs .nav-link,
  .pe-shell--lg .pe-subtabs .nav-link {
    white-space: nowrap;
  }
}

.pe-page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.15rem;
}

.pe-page-header__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.35rem;
}

.pe-page-header__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--pe-text);
  letter-spacing: -0.02em;
}

.pe-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.15rem;
  font-size: 0.86rem;
  color: var(--pe-text, #374151);
}

.pe-page-header__meta-label {
  color: var(--pe-muted);
  font-weight: 500;
}

.pe-page-header__dot {
  color: #d1d5db;
  margin: 0 0.35rem;
}

.pe-page-header__about {
  color: var(--lg-primary, var(--pe-blue, #2457c5));
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.pe-page-header__about:hover { text-decoration: underline; }

.pe-page-header__about[aria-expanded="true"] .bx-chevron-down {
  transform: rotate(180deg);
}

.pe-page-header__about .bx-chevron-down {
  display: inline-block;
  transition: transform 0.15s ease;
}

.pe-page-header__details {
  flex-basis: 100%;
  margin-top: 0.35rem;
}

.pe-page-header__details-body {
  padding: 0.85rem 1rem;
  border: 1px solid var(--pe-border, #e5e7eb);
  border-radius: var(--lg-radius, 6px);
  background: var(--pe-soft, #fafbfc);
}

.pe-page-header__details-body .pe-richtext p:last-child {
  margin-bottom: 0;
}

.pe-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pe-page-header__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
}

.pe-page-header__actions .communications-open-discussion i {
  font-size: 1rem;
  line-height: 1;
}

.pe-page-header__actions #favorits-btn.is-favorite,
.pe-page-header__actions #favorits-btn.is-favorite:hover,
.pe-page-header__actions #favorits-btn.is-favorite:focus {
  background: var(--lg-warning-soft);
  border-color: var(--bs-warning);
}

.pe-page-header__actions #favorits-btn.is-favorite .lg-ico,
.pe-page-header__actions #favorits-btn.is-favorite i,
.pe-page-header__actions #favorits-btn .bi-star-fill,
.pe-page-header__actions #favorits-btn .bxs-star {
  color: var(--bs-warning);
  fill: currentColor;
}

.pe-icon-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  border: 1px solid var(--pe-border);
  background: #fff;
  color: #4b5563;
}

.pe-icon-btn:hover { background: #f3f4f6; color: var(--pe-text); }

.pe-icon-btn.is-favorite,
.pe-icon-btn.is-favorite:hover,
.pe-icon-btn.btn-warning.is-favorite {
  color: var(--bs-warning) !important;
  background: var(--lg-warning-soft) !important;
  border-color: var(--bs-warning);
}

.pe-icon-btn.is-favorite i {
  color: var(--bs-warning);
}

.pe-drawer-toggle {
  display: none;
}

@media (max-width: 992px) {
  .pe-shell:has(> .pe-side-nav) {
    grid-template-columns: 1fr;
  }

  .pe-side-nav {
    position: static;
  }

  .pe-side-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .pe-drawer-toggle {
    display: inline-flex;
  }

  .pe-shell.is-nav-collapsed .pe-side-nav {
    display: none;
  }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  :root {
    --pe-side-width: 176px;
  }

  .pe-shell--lg {
    --pe-side-width: 240px;
  }

  .pe-side-nav__link {
    font-size: 13px;
    padding: 7px 8px;
  }
}