/* ==============================================================================================================
   ОБОЛОЧКА CRM — точь-в-точь эталон concept/forbion-crm (c-design, пакет v0.968.1). Решение владельца 30.09
   (дословно): «остаётся — без увеличения масштаба — всё остальное как в макете».
   Состав: левое меню (fc-side, 232 px / полоса 64 px), шапка (fc-top: поиск, «Создать», «Аналитика», рабочий день,
   «Ассистент раздела», тема, колокольчик, профиль), вход (login), общие детали — кнопки, поля, меню, аватар,
   пустое состояние, тост, диалог, «Данные не пришли» (fc-nodata), полоса стенда (fc-stand).
   Компоненты пакета (fc-*) — из web/fcx.css (единственный носитель пакета, интеграция 30.09): прежняя «часть 1» —
   дословные копии правил components.css — снята как дубль. Здесь — раскладка reference/screens.css, перенесённая на
   узлы CRM. Файл подключён ПОСЛЕДНИМ: оболочка общая для всех экранов, тела экранов её не трогают.
   ============================================================================================================== */

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ЧАСТЬ 2 — раскладка оболочки эталона (reference/screens.css: .app, .main, .content, .scrim, вход, .side-me, .top-me),
   перенесённая на узлы CRM: .shell = .app, .shell__main = .main, main#app = .content. Значения — эталонные, без правок.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Каркас: меню во всю высоту слева, справа — колонка «шапка + рабочая область». Документ не прокручивается (прокрутка —
   в рабочей области, как было), поэтому высоту держит сетка, а не sticky. */
.shell { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr);
  transition: grid-template-columns .32s cubic-bezier(.2,.8,.2,1); }
.shell--rail { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
.shell__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; grid-column: 2; grid-row: 1; }
/* Место колонок задано явно: выдвинутое меню (fixed) выпадает из сетки, и без этого рабочая область съезжала бы
   в первую колонку (64 px) — замер 800 px, разворот полосы. */
.shell > .fc-side { grid-column: 1; grid-row: 1; }
.shell--auth .shell__main { grid-column: 1; }
@media (max-width: 640px) { .shell__main { grid-column: 1; } }
.shell__main > .app { flex: 1; min-width: 0; min-height: 0; }
.shell--auth { grid-template-columns: minmax(0, 1fr); }
.shell--auth .shell__main > .topbar { display: none; }
.shell--auth .shell__main > .app { padding: 0; overflow-y: auto; }

/* Меню — .fc-side эталона: высота — колонка сетки (документ не прокручивается), свой слой над фоном страницы. */
.sidebar.fc-side { position: relative; height: auto; min-height: 0; z-index: 3; width: auto;
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; font-feature-settings: "lnum" 1, "tnum" 1; -webkit-font-smoothing: antialiased; }
.sidebar.fc-side[hidden] { display: none; }
.fc-side__nav { display: block; }
.fc-side__group-title .fc-ico { width: 14px; height: 14px; }
.fc-side__brand .topbar__brand { display: flex; align-items: center; text-decoration: none; border-radius: 6px; }
.fc-side__brand .topbar__brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Лок-ап «Жетон» — тот же файл пакета; на хвойном хроме в обеих темах — вариант для тёмного фона (белые клин и словомарка). */
.fc-side__brand .brand-img { height: 36px; width: 152px; display: block; }
.fc-side__brand .brand-img--light { display: none; }
.is-rail .fc-side__brand .topbar__brand { width: 18px; overflow: hidden; }
.is-rail .fc-side__brand .brand-img { width: auto; max-width: none; }

/* Подвал меню — .side-me эталона: аватар, имя, роль; вход в профиль. */
.side-me:focus-visible { outline: 2px solid var(--focus); }
.side-me b { display: block; font-size: 13px; color: var(--chrome-ink); overflow: hidden; text-overflow: ellipsis; }
.side-me .fc-side__who-role { font-size: 12px; color: var(--chrome-muted); }
.fc-side__who { min-width: 0; }

/* Шапка — .fc-top эталона: полупрозрачная поверхность с размытием (v2). */
.topbar.fc-top { position: sticky; top: 0; z-index: var(--z-sticky, 20); min-height: 0; box-shadow: none;
  background: color-mix(in srgb, var(--bg-surface) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; font-feature-settings: "lnum" 1, "tnum" 1; -webkit-font-smoothing: antialiased; }
.topbar.fc-top::after { display: none; }
.topbar.fc-top { flex-wrap: nowrap; padding: 0 16px; gap: 10px; }
.fc-top__search .fc-input--search { width: 100%; margin: 0; font: inherit; text-align: left; color: inherit; }
.fc-top__search[hidden] { display: none; }
.fc-top__search .fc-input__affix .fc-ico { width: 16px; height: 16px; }
.whoami.fc-top__right { color: inherit; }
.fc-top .fc-btn--icon .fc-ico { width: 18px; height: 18px; }

/* Профиль в шапке — .top-me эталона: аватар, имя, стрелка; меню профиля. */
.top-me--on { background: var(--bg-hover); }

/* Аватар оболочки — .fc-avatar пакета поверх аватара CRM (фото — поверх инициалов, как было). */
.shell-av { position: relative; display: inline-flex; flex: none; }
.shell-av > .avatar.fc-avatar { width: var(--s); height: var(--s); font-size: calc(var(--s) * .38); letter-spacing: 0; }
.fc-side__foot .shell-av > .avatar.fc-avatar { box-shadow: none; }

/* Рабочий день — .fc-workday эталона: пилюля успеха «Рабочий день · 4:12» (перерыв и «Начать» — нейтральная). */
.fc-top .workday-hd__btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill);
  background: var(--success-soft); color: var(--success); border: 0; font: 700 12px/1 var(--font-sans); font-feature-settings: "lnum" 1, "tnum" 1; cursor: pointer; white-space: nowrap; box-shadow: none; }
.fc-top .workday-hd__btn:hover { border: 0; color: var(--success); filter: brightness(1.03); }
.fc-top .workday-hd__btn--paused, .fc-top .workday-hd__btn--start, .fc-top .workday-hd__btn--done { background: var(--neutral-soft); color: var(--neutral); }
.fc-top .workday-hd__btn .workday-hd__chevron, .fc-top .workday-hd__btn .workday-hd__dot { display: none; }
.fc-top .workday-hd__btn .workday-hd__ic svg { width: 14px; height: 14px; }

/* Колокольчик — .fc-bell эталона: кнопка-иконка, точка вместо числа (число — в подписи кнопки). */
.fc-top .bell__btn { width: var(--control-md); height: var(--control-md); padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); box-shadow: none; cursor: pointer; position: relative; }
.fc-top .bell__btn:hover { background: var(--bg-hover); color: var(--ink); }
.fc-top .bell__btn svg { width: 18px; height: 18px; }
.fc-top .bell__count { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-surface); font-size: 0; line-height: 0; color: transparent; }

/* Узкие экраны — как эталон: 641–900 меню полосой иконок (64 px), разворот — поверх; ≤ 640 — выезжает из-за края. */
@media (max-width: 900px) and (min-width: 641px) {
  .shell { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
  .shell.nav-open .fc-side { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 45; box-shadow: var(--shadow-3); }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: var(--bg-overlay); z-index: 44; }
}
@media (max-width: 640px) {
  .shell, .shell--rail { grid-template-columns: minmax(0, 1fr); }
  .shell .fc-side { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 45; transform: translateX(-102%); transition: transform .2s; }
  .shell.nav-open .fc-side { transform: none; box-shadow: var(--shadow-3); }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: var(--bg-overlay); z-index: 44; }
    }

/* ── Вход — .login эталона: слева хвойная панель с лок-апом и тремя фактами, справа форма 380 px ── */
.login-screen { min-height: 100%; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); font-feature-settings: "lnum" 1, "tnum" 1; -webkit-font-smoothing: antialiased; }
.login__side { background: var(--chrome-bg); color: var(--chrome-ink); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: relative; overflow: hidden;
  --logo-wedge: #FFFFFF; --logo-ink: #FFFFFF; }
.login__logo { display: flex; }
/* Эталон: .fc-logo 152 px в коробке высотой 52 (svg вписан по ширине) — лок-ап 152 × 36 по центру коробки. */
.login__logo .brand-img { height: 52px; width: 152px; object-fit: contain; display: block; }
.login__logo .brand-img--light { display: none; }
.login__form { display: grid; align-content: center; justify-items: center; padding: 32px 16px; background: var(--bg-surface); overflow-y: auto; }
.login__fact b { font-weight: 700; }
.login__copy { font-size: 12px; color: var(--chrome-muted); }
.login__card h1 { margin: 0; }
.login__row { display: flex; justify-content: space-between; align-items: center; }
.login__status { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.login__status:empty { display: none; }
.login__status--error { color: var(--danger); }
.login__status--ok { color: var(--success); }
.login__card .fc-input input { min-width: 0; }
.login__card .password-toggle { all: unset; display: inline-flex; color: var(--muted); cursor: pointer; }
.login__card details.login__service > summary { list-style: none; }
.login__card details.login__service > summary::-webkit-details-marker { display: none; }
.login__card details.login__service[open] > summary { margin-bottom: 8px; }
@media (max-width: 860px) { .login-screen { grid-template-columns: minmax(0, 1fr); } }


/* Экраны входа CRM (сброс, смена, приглашение) — в карточке эталона: прежняя рамка .login снята, поля — как у формы. */
.login__form > .login { width: min(380px, 100%); max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  display: grid; gap: 14px; align-content: start; }
.login__form > .login::before { display: none; }
.login__card > .login__row { margin: 0; }
.login__card .login__link { align-self: auto; justify-self: start; font-size: 13.5px; padding: 0; }
.login__card .login__row .login__link { margin-left: auto; }
.login__card .login__service { border-top: 0; padding-top: 0; margin-top: 0; }
.login__card .login__service > summary { color: var(--ink-2); }
.login__card .login__service-body { margin-top: 10px; gap: 14px; display: grid; }
.login__card .login__title { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.005em; margin: 0; }
.login__card .field { display: grid; gap: 6px; }
.login__card .field__label { font-size: 12px; line-height: 16px; font-weight: 650; color: var(--ink-2); }
.login__card .input { height: var(--control-lg); min-height: var(--control-lg); padding: 0 10px; font: 500 14px/20px var(--font-sans); }
.login__card .muted, .login__card .login__done p { color: var(--muted); margin: 0; }
.login__card .login__done p:first-child { color: var(--ink); }
.login__card .pw-field.fc-input { position: relative; }
.login__card .pw-field.fc-input .pw-field__input { padding-right: 0; }
.login__card .pw-field.fc-input .pw-field__toggle { position: static; transform: none; flex: none; }
.login__card .login__submit { width: 100%; }
.login__card .login__submit:disabled { opacity: .6; cursor: default; }

/* Меню «Создать» и профиля — места эталона (.top-plus, .top-menu). */
.top-create { position: relative; display: inline-flex; }
.has-instance-badge .top-menu, .has-instance-badge-unknown .top-menu { top: calc(var(--topbar) + 32px); }
.fc-menu__item { font: 600 13.5px/1 var(--font-sans); color: var(--ink); cursor: pointer; width: 100%; text-align: left; }
.fc-menu__item > span { flex: 1; min-width: 0; }

/* Ассистент раздела в шапке — IconButton эталона (ghost, чернила ink-2); открытое окно — мягкая подложка ИИ. */
.fc-top .section-assistant-btn { color: var(--ink-2); border: 0; }
.fc-top .section-assistant-btn:hover { color: var(--ink); }
.fc-top .section-assistant-btn.icon-btn--on { background: var(--ai-soft); color: var(--ai); }
.fc-top .theme-btn { font-size: inherit; line-height: 1; border: 0; }

/* Полоса экземпляра — StandBar эталона (fc-stand): предупреждение warning-soft со значком; не опознан — danger-soft. */
.instance-badge.fc-stand { font-family: var(--font-sans); }
.instance-badge.fc-stand .instance-badge__what { font-weight: 750; letter-spacing: .02em; text-transform: uppercase; font-size: 11.5px; }
.instance-badge.fc-stand .instance-badge__detail { color: var(--ink-2); opacity: 1; min-width: 0; }

/* Пустое состояние эталона: у CRM есть общий .hero (карточка «Мой день») — внутри рисунка fc-empty__art2 он не
   действует (замер 30.09: вокруг плитки рисовалась карточка 104 px). */
.fc-empty__art2 .hero { display: block; gap: 0; flex-wrap: nowrap; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }

/* NoData эталона на прежнем узле отказа (.load-failed): текст — чернилами, не цветом предупреждения. */
.fc-nodata.load-failed { border-color: var(--line-strong); }
.fc-nodata .load-failed__text { flex: 1; min-width: 0; margin: 0; color: var(--ink); }
.fc-nodata .load-failed__text .fc-caption { display: block; }
.fc-nodata.load-failed--compact { padding: 10px 12px; gap: 10px; }
.fc-nodata.load-failed--compact .fc-icotile { --s: 36px; }

/* Место тостов — .fc-toasts эталона (правый нижний угол 16 px, с учётом выреза экрана). Клики проходят сквозь. */
.toast-root { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; }

/* «Быстрые клавиши» (меню «Создать»). */
.shortcuts { display: grid; gap: 8px; }
.shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shortcut__keys { display: inline-flex; gap: 4px; }