/* layout.css — каркас: оболочка, левое меню (постоянное ≥1100px, выезжающее ниже), шапка с колокольчиком и меню
   пользователя, страница, утилиты. Только semantic- и component-токены. Вход/приглашение — components/auth.css. */

/* ---------- каркас ---------- */
.shell { --sidebar-w: 248px; min-height: 100vh; }
.content { min-width: 0; }

/* левое меню: ниже 1100px — выезжающая панель поверх содержимого; закрытая — visibility:hidden и inert (core.js:setNav),
   пункты не берут фокус по Tab; верхняя панель с кнопкой остаётся доступной */
.sidebar {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: var(--z-sidebar); width: 260px; max-width: 86vw;
  display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s3) var(--s4); overflow-y: auto;
  border-right: var(--border-w) solid var(--border); background: var(--surface-1); box-shadow: var(--shadow-sidebar);
  visibility: hidden; transform: translateX(-100%);
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.sidebar.open { visibility: visible; transform: none; transition: transform var(--dur) var(--ease), visibility 0s; }
.sidebar .brand { display: none; }   /* имя уже в верхней панели */
.scrim { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: var(--z-scrim); background: var(--overlay);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
.scrim.show { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .sidebar, .scrim { transition: none; } }

/* ≥1100px — постоянное меню слева (CRM открыта весь день): сетка «меню | содержимое», бургера и затемнения нет */
@media (min-width: 1100px) {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; width: auto; max-width: none; z-index: auto;
    visibility: visible; transform: none; transition: none; box-shadow: none; }
  .sidebar .brand { display: flex; }
  .scrim { display: none; }
  #menu-toggle, .topbar .brand { display: none; }
}

.brand { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); text-decoration: none; color: inherit; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent); font: var(--fw-semibold) var(--fs-xs) var(--mono); }
.brand-name { font-weight: var(--fw-medium); white-space: nowrap; }
.brand-name b { color: var(--accent); font-weight: var(--fw-semibold); }

/* пункты меню по группам (Работа, Знания…); заголовок группы — подпись, не ссылка */
.nav { display: flex; flex-direction: column; gap: var(--s3); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-title { padding: 0 var(--s3); margin: 0 0 var(--s1); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
.sidebar nav a {
  display: flex; align-items: center; gap: var(--s3); min-height: var(--nav-h); padding: 0 var(--s3);
  border-radius: var(--r); text-decoration: none; color: var(--fg-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar nav a:hover { background: var(--surface-2); color: var(--fg); }
.sidebar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--fg); font-weight: var(--fw-semibold); }
.sidebar nav a[aria-current="page"] .icon { color: var(--accent); }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* счётчик у пункта меню и у колокольчика (registerBadge/setBadge в core.js); число — не единственный сигнал: есть и текст для скринридера */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center; background: var(--notice); color: var(--on-notice);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1; font-variant-numeric: tabular-nums; }

/* режим правки меню (js/navedit.js): заголовок с кнопкой-карандашом, ручки и пунктирная обводка пунктов,
   плейсхолдер на месте вставки; движение гасится при prefers-reduced-motion (в самом скрипте) */
.sidebar-top { display: flex; align-items: center; gap: var(--s1); min-height: var(--control-h); }
.nav-head { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-head-title { margin-right: auto; padding-left: var(--s3); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
/* вне режима правки заголовок «Разделы» только для скринридера (рядом бренд); в режиме правки бренд уступает место */
.sidebar:not(.editing) .nav-head-title { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
.sidebar.editing .sidebar-top .brand { display: none; }
.sidebar.editing .nav-head { flex: 1; margin-left: 0; }
.nav-head .btn { color: var(--fg-muted); }
.nav-head .btn:hover, .nav-head .btn:focus-visible { color: var(--fg); }
.nav-head .btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.nav-hint { margin: 0; padding: 0 var(--s3); font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-muted); }
.nav-grip { display: none; order: 2; margin-left: auto; align-items: center; justify-content: center;
  align-self: stretch; width: 36px; margin-right: -8px; color: var(--fg-muted); cursor: grab; touch-action: none; }
.sidebar.editing .nav-grip { display: inline-flex; }
.sidebar.editing nav { user-select: none; -webkit-user-select: none; }
.sidebar.editing nav a { outline: var(--border-w) dashed var(--border-strong); outline-offset: -1px;
  cursor: grab; -webkit-user-drag: none; }
.sidebar.editing nav a:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: -2px; }
.sidebar.editing .nav-badge { order: 1; margin-left: 0; }
.nav-ph { flex: none; box-sizing: border-box; border-radius: var(--r); background: var(--accent-soft);
  border: var(--border-w) dashed var(--accent); }
.sidebar nav a.dragging { z-index: var(--z-drag); box-sizing: border-box; background: var(--surface-1); color: var(--fg);
  outline: var(--border-w) solid var(--accent); box-shadow: var(--shadow-md); cursor: grabbing; }
.sidebar nav a.dragging .nav-grip { cursor: grabbing; color: var(--accent); }

/* ---------- шапка: меню (<1100px), бренд, колокольчик, меню пользователя ---------- */
.topbar { display: flex; align-items: center; gap: var(--s2); position: sticky; top: 0; z-index: var(--z-topbar);
  height: var(--topbar-h); padding: 0 var(--s4); background: var(--surface-1); border-bottom: var(--border-w) solid var(--border); }
.topbar-spacer { flex: 1; min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: var(--s1); }
.bell { position: relative; }
.bell .nav-badge { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; margin: 0; }
.user-menu-wrap { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--control-h); max-width: 260px;
  padding: 0 var(--s2) 0 var(--s1); border: var(--border-w) solid transparent; border-radius: var(--r-pill);
  background: transparent; color: var(--fg); font: var(--fw-medium) var(--fs-md) var(--font); cursor: pointer;
  transition: background var(--dur-fast) var(--ease); }
.user-btn:hover { background: var(--surface-2); }
.user-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); }
.user-btn .icon { width: 16px; height: 16px; color: var(--fg-muted); }
.user-btn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-head { display: flex; gap: var(--s3); align-items: flex-start; }
.user-head-name { font-weight: var(--fw-semibold); }
@media (max-width: 640px) { .user-btn-name { display: none; } }

/* ---------- страница ---------- */
main { padding: var(--s5) var(--s6); max-width: 1280px; outline: none; }
main.wide { max-width: none; }    /* доска, календарь, дашборды — на всю ширину */
main:focus-visible { outline: none; }   /* фокус на main — для скринридера после смены экрана, рамка не нужна */

.page-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-head p { margin-top: var(--s1); }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
/* подзаголовок раздела страницы (h2/h3 прямо в main, не в .card-head) — общая дистанция от соседей */
.section-title { margin: var(--s6) 0 var(--s2); }
.section-title:first-child { margin-top: 0; }
/* экран заменяется на соседний той же рамки: старый чуть бледнеет (с задержкой — быстрый переход не мигает) */
main.switching { opacity: .55; pointer-events: none; transition: opacity var(--dur-fast) ease var(--dur); }
@media (prefers-reduced-motion: reduce) { main.switching { transition: none; } }
.skeleton-box { padding: var(--s1) 0; }
.pager { display: flex; justify-content: center; margin-top: var(--s4); }

/* текст из md(): абзацы, списки, заголовки-строки, таблицы; домен внешней ссылки — рядом с ней */
.md { line-height: var(--lh-body); overflow-wrap: anywhere; }
.md > * + * { margin-top: var(--s2); }
.md ul, .md ol { margin: 0; padding-left: var(--s5); }
.md li + li { margin-top: var(--s1); }
.md .md-h { font-weight: var(--fw-semibold); }
.md a { color: var(--link); }
.md a:hover { color: var(--link-hover); }
.md .md-table { margin-top: var(--s2); }
.link-domain { color: var(--fg-muted); font-size: var(--fs-xs); }

/* ---------- адаптив каркаса (брейкпоинты: см. tokens.css) ---------- */
@media (max-width: 900px) {
  main { padding: var(--s4); }
}
@media (max-width: 640px) {
  .topbar { padding: 0 var(--s2); }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; }
}

/* ---------- утилиты: отступы по шкале, перенос, тон текста (вместо style="…" в разметке из JS) ---------- */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--s1); } .mt-1h { margin-top: var(--s1h); } .mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mb-1 { margin-bottom: var(--s1); } .mb-1h { margin-bottom: var(--s1h); } .mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); }
.min-w-0 { min-width: 0; } .wrap-any { overflow-wrap: anywhere; }
.items-start { align-items: flex-start; }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.col-meter { min-width: 170px; }
.fieldset-scroll { border: 0; padding: 0; margin: var(--s4) 0; max-height: 50vh; overflow-y: auto; }
.tone-danger { color: var(--danger); } .tone-accent { color: var(--accent); } .tone-muted { color: var(--fg-muted); }
.tone-success { color: var(--success); } .tone-warn { color: var(--warn); }