/* =================================================================
   Custom Left Sidebar Navigation — Redesign — sidebar.css
   Same visual system as redisign/design-system (tokens, spacing,
   radius, shadows) — sidebar-link is a plain icon+label row like
   the demo, not a fixed 68px icon column. Collapsed state shows an
   icon rail with hover tooltips, same as the design-system demo.
   ================================================================= */

:root {
	/* Values below are copied 1:1 from the redisign-preview.html demo
	   artifact's own :root — not re-derived — so the plugin front-end
	   matches it exactly instead of approximately. */
	--clsnr-w:          248px;
	--clsnr-w-sm:       72px;
	--clsnr-banner-h:   80px;
	--clsnr-topbar-h:   60px;
	--clsnr-bottomnav-h: 60px;

	--clsnr-bg:         #ffffff;
	--clsnr-bg-2:       #eef0f6;
	--clsnr-border:     #e2e4ee;
	--clsnr-border-default: #cbcedd;
	--clsnr-text:       #1a1b2e;
	--clsnr-text-2:     #5d6180;
	--clsnr-text-muted: #7d829e;
	--clsnr-hover:      #eef0f6;
	--clsnr-active-bg:  #eff6ff;
	--clsnr-active-txt: #1d4ed8;
	--clsnr-red:        #ef4444;
	--clsnr-purple:     #2563eb;
	--clsnr-purple-hover: #1d4ed8;
	--clsnr-shadow:     none;
	--clsnr-z:          35;
	--clsnr-dur:        .15s;
	--clsnr-ease:       cubic-bezier(.4,0,.2,1);
	--clsnr-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Same scale as redisign/design-system/tokens.css, prefixed
	   so this plugin's front-end reads as one system with the demo. */
	--clsnr-space-1:  4px;
	--clsnr-space-2:  8px;
	--clsnr-space-3:  12px;
	--clsnr-space-4:  16px;
	--clsnr-space-5:  20px;
	--clsnr-radius-sm: 6px;
	--clsnr-radius-md: 10px;
	--clsnr-radius-lg: 14px;
	--clsnr-radius-xl: 20px;
	--clsnr-radius-pill: 999px;
	--clsnr-shadow-sm: 0 1px 2px rgb(26 27 46 / 6%);
	--clsnr-shadow-md: 0 4px 12px rgb(26 27 46 / 8%), 0 1px 3px rgb(26 27 46 / 6%);
	--clsnr-shadow-lg: 0 12px 32px rgb(26 27 46 / 14%);
	--clsnr-focus-ring: 0 0 0 3px rgba(37,99,235,.28);
}

/* Тёмная тема (SOTIKS Dark Mode, 7.4) — эти --clsnr-* переменные были
   захардкожены один раз "как в demo-артефакте" (см. комментарий выше) и с
   тех пор жили отдельно от design-system/tokens.css, без своего
   [data-theme="dark"]-переопределения вообще — сайдбар/шапка оставались
   белыми при включённой тёмной теме, пока остальной сайт уже переключался
   (карточки ленты и т.п. используют tokens.css напрямую). Ссылаемся на уже
   готовые тёмные значения tokens.css вместо своих hex — один источник
   правды, не вторая палитра, которую придётся держать в синхроне вручную. */
:root[data-theme="dark"] {
	--clsnr-bg:             var(--bg-surface);
	--clsnr-bg-2:           var(--bg-surface-2);
	--clsnr-border:         var(--border-subtle);
	--clsnr-border-default: var(--border-default);
	--clsnr-text:           var(--text-primary);
	--clsnr-text-2:         var(--text-secondary);
	--clsnr-text-muted:     var(--text-muted);
	--clsnr-hover:          var(--bg-surface-2);
	--clsnr-active-bg:      var(--brand-subtle);
	--clsnr-active-txt:     var(--brand-subtle-text);
	--clsnr-purple:         var(--brand);
	--clsnr-purple-hover:   var(--brand-hover);
	--clsnr-shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
	--clsnr-shadow-md: 0 4px 14px rgb(0 0 0 / 40%);
	--clsnr-shadow-lg: 0 16px 40px rgb(0 0 0 / 50%);
}

/* ── Base typography — this is what most of the "looks different
   from the demo" gap actually is: the demo sets font/antialiasing
   on its whole page, but native <button> elements (search, notif,
   modal-trigger, collapse — a third of this sidebar's rows) don't
   inherit font-family/size from an ancestor by default in any
   browser, so they were quietly falling back to the browser's UI
   font while <a> rows (WP menu links) rendered correctly. ── */
.clsnr-sidebar,
.clsnr-top-notice,
.clsnr-search-panel,
.clsnr-modal,
.clsnr-s-nav-panel-mobile,
#clsnr-profile-panel {
	font-family: var(--clsnr-font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.clsnr-sidebar *, .clsnr-sidebar *::before, .clsnr-sidebar *::after,
.clsnr-top-notice *, .clsnr-search-panel *, .clsnr-modal *,
.clsnr-s-nav-panel-mobile *, #clsnr-profile-panel * {
	box-sizing: border-box;
}
.clsnr-sidebar button, .clsnr-sidebar input, .clsnr-sidebar textarea, .clsnr-sidebar select,
.clsnr-search-panel button, .clsnr-search-panel input,
.clsnr-modal button, .clsnr-s-nav-panel-mobile button,
#clsnr-profile-panel button {
	font-family: inherit;
}

/* ── Visibility helpers for builder items ── */
.clsnr-mobile-only  { display: none !important; }
.clsnr-desktop-only { display: flex !important; }

@media (max-width: 768px) {
	.clsnr-mobile-only  { display: flex !important; }
	.clsnr-desktop-only { display: none !important; }
}

/*
 * Гасит АБСОЛЮТНО ЛЮБЫЕ transition внутри body на самом первом кадре
 * страницы (custom-left-sidebar-redesign.php → add_body_class()) — сервер
 * всегда рендерит body.clsnr-collapsed (даже на мобильном, где это
 * значение вообще не имеет смысла — там колонка прячется целиком в пользу
 * нижнего таб-бара), а sidebar.js досчитывает и поправляет финальное
 * состояние уже ПОСЛЕ первой отрисовки. Без этого класса тот момент между
 * первой отрисовкой и пересчётом JS был виден невооружённым глазом:
 * сайдбар "сначала открыт, потом сам сворачивается" на десктопе, а на
 * мобильном топбар с этим же классом сперва получает по ошибке отступ
 * слева (десктопное правило body.clsnr-collapsed .clsnr-topbar{left:...}
 * специфичнее мобильного .clsnr-topbar{left:0}) и потом "приезжает" в
 * left:0, ровно то самое "шапка едет справа налево" при каждом переходе
 * между страницами (это обычная навигация, не SPA — сценарий повторяется
 * на КАЖДОЙ загрузке). sidebar.js снимает clsnr-preload сразу после того,
 * как выставит корректное состояние — дальше (клик по кнопке свернуть/
 * развернуть, обычный скролл) анимации как обычно включены.
 */
body.clsnr-preload,
body.clsnr-preload * { transition: none !important; }

/* ── Body push ── */
body.clsnr-active {
	padding-left: var(--clsnr-w) !important;
	margin-left:  0 !important;
	transition:   padding-left var(--clsnr-dur) var(--clsnr-ease);
	background:   #ffffff !important;
}

body.clsnr-active.clsnr-collapsed {
	padding-left: var(--clsnr-w-sm) !important;
}

/* ── Hide theme header ── */
body.clsnr-active #masthead,
body.clsnr-active .site-header,
body.clsnr-active #header-wrap,
body.clsnr-active header.site-header { display: none !important; }

body.clsnr-active .site,
body.clsnr-active #page,
body.clsnr-active .site-content,
body.clsnr-active #content,
body.clsnr-active .wrap {
	margin-top:  0 !important;
	padding-top: 0 !important;
	background:  #ffffff !important;
}

/* ── Admin Bar — desktop only ── */
@media (min-width: 769px) {
	body.admin-bar .clsnr-sidebar { top: 32px !important; }
}
@media (min-width: 769px) and (max-width: 782px) {
	body.admin-bar .clsnr-sidebar { top: 46px !important; }
}

/* =================================================================
   TOP BANNER
   ================================================================= */
.clsnr-top-notice {
	position: relative;
	height: var(--clsnr-banner-h);
	background: var(--clsnr-banner-bg, #3b82f6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(37, 99, 235, .14);
}

.clsnr-top-notice__inner {
	width: 100%;
	max-width: 1320px;
	padding: 0 18px 0 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.clsnr-top-notice__text {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
}

.clsnr-top-notice__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 168px;
	height: 48px;
	padding: 0 24px;
	border-radius: var(--clsnr-radius-lg);
	background: var(--clsnr-banner-btn-bg, #fff);
	color: var(--clsnr-banner-btn-color, #111827);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	border: none;
	box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
	cursor: pointer;
}

.clsnr-top-notice__close {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: .92;
	z-index: 2;
	flex-shrink: 0;
}
.clsnr-top-notice__close:hover { opacity: 1; }

.clsnr-top-notice__close svg {
	width: 18px;
	height: 18px;
	display: block;
	overflow: visible;
}

/* =================================================================
   SIDEBAR
   ================================================================= */
.clsnr-sidebar {
	position:        fixed;
	top:             0;
	left:            0;
	bottom:          0;
	z-index:         var(--clsnr-z);
	width:           var(--clsnr-w);
	display:         flex;
	flex-direction:  column;
	background:      var(--clsnr-bg);
	border-right:    1px solid var(--clsnr-border);
	box-shadow:      var(--clsnr-shadow-sm);
	transition:      width var(--clsnr-dur) var(--clsnr-ease);
	/*
	 * НЕ view-transition-name здесь (было — но снято): любой элемент с
	 * view-transition-name получает собственный stacking context (спека
	 * View Transitions), а на мобильном .clsnr-sidebar — position:static,
	 * z-index:auto (см. медиа-запрос ниже) — весь его контент, включая
	 * вложенный .clsnr-s-bottom (нижний таб-бар со своим z-index), оказался
	 * запертым в этом контексте и начал располагаться по порядку DOM, а не
	 * по z-index: контент страницы (идущий в разметке позже) стал
	 * перекрывать таб-бар целиком. .clsnr-topbar/.clsnr-s-bottom ниже
	 * оставлены с именем — они всегда position:fixed, там эта проблема не
	 * возникает (у fixed-элементов свой stacking context и так уже есть).
	 */
	/* NOT overflow:hidden — every row/label already clips its own text
	   independently (.clsnr-s-item, .clsnr-s-logo, .clsnr-s-item-text
	   all set their own overflow:hidden), so clipping here bought
	   nothing for the collapse animation but was cutting off every
	   anchored popover (notifications, profile, workday) that
	   positions itself at left:100% — outside the sidebar's own box,
	   exactly what an ancestor overflow:hidden clips away. */
	overflow:        visible;
}

body.clsnr-collapsed .clsnr-sidebar {
	width: var(--clsnr-w-sm);
}

/* =================================================================
   LOGO / BRAND ROW
   ================================================================= */
.clsnr-s-logo {
	display:         flex;
	align-items:     center;
	gap:             var(--clsnr-space-3);
	height:          var(--clsnr-topbar-h);
	min-height:      var(--clsnr-topbar-h);
	padding:         0 var(--clsnr-space-4);
	flex-shrink:     0;
	text-decoration: none !important;
	color:           var(--clsnr-text-2) !important;
	overflow:        hidden;
	white-space:     nowrap;
	border-bottom:   1px solid var(--clsnr-border);
	background:      none !important;
	box-shadow:      none !important;
	transition:      gap var(--clsnr-dur) var(--clsnr-ease),
	                 padding var(--clsnr-dur) var(--clsnr-ease);
}

.clsnr-s-logo-icon {
	width:           32px;
	height:          32px;
	min-width:       32px;
	border-radius:   var(--clsnr-radius-md);
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	flex-shrink:     0;
}

.clsnr-s-logo-icon img,
.clsnr-s-logo-icon svg {
	width:      20px;
	height:     20px;
	object-fit: contain;
	display:    block;
}

.clsnr-s-logo-text {
	font-size:     14px !important;
	font-weight:   700 !important;
	text-transform: none !important;
	letter-spacing: -.01em !important;
	line-height:   1.3 !important;
	color:         var(--clsnr-text-2) !important;
	overflow:      hidden;
	white-space:   nowrap;
	text-overflow: ellipsis;
	opacity:       1;
	max-width:     160px;
	transition:    opacity var(--clsnr-dur) var(--clsnr-ease),
	               max-width var(--clsnr-dur) var(--clsnr-ease);
}

/* Центрирование иконки логотипа — тот же приём, что у .clsnr-s-item выше
   (padding, честно анимируемый transition, а не дискретный justify-content):
   32px-иконка окажется по центру 72px рельса при padding по 20px с каждой
   стороны. */
body.clsnr-collapsed .clsnr-s-logo {
	gap:     0;
	padding: 0 calc((var(--clsnr-w-sm) - 32px) / 2);
}

body.clsnr-collapsed .clsnr-s-logo-text {
	opacity:        0;
	max-width:      0;
	overflow:       hidden;
	pointer-events: none;
}

/* =================================================================
   SCROLL AREA
   ================================================================= */
.clsnr-s-scroll {
	flex:       1;
	overflow-y: auto;
	overflow-x: hidden;
	padding:    var(--clsnr-space-3);
	display:    flex;
	flex-direction: column;
	gap:        2px;
	scrollbar-width: thin;
	scrollbar-color: var(--clsnr-border) transparent;
}

.clsnr-s-scroll::-webkit-scrollbar       { width: 4px; }
.clsnr-s-scroll::-webkit-scrollbar-thumb { background: var(--clsnr-border); border-radius: 2px; }

/* =================================================================
   NAV ITEMS — plain icon+label row, same shape as .sidebar-link
   in redisign/design-system/layout.css (no fixed icon column).
   ================================================================= */
.clsnr-s-nav-list,
.clsnr-s-nav-sub {
	list-style: none;
	margin:     0;
	padding:    0;
}

.clsnr-s-nav-item,
.clsnr-s-nav-item--child { margin: 0; }

/* button.clsnr-s-item (search / notifications / modal / collapse) picks
   up default button chrome from some themes (grey box, visible border)
   unless explicitly reset with !important — a plain class-selector
   reset loses to a theme's own `button{...}` rule in some cascades. */
/* Woodmart and the stock BuddyBoss theme both apply heavy global
   styling to bare `a`/`button` elements — uppercase text-transform,
   letter-spacing, bold font-weight, their own line-height, even
   text-shadow in some Woodmart button skins. Every property below
   that a theme is realistically likely to touch is pinned with
   !important so this sidebar looks the same on every theme instead
   of inheriting whatever the active theme's buttons look like. */
.clsnr-s-item {
	display:         flex;
	align-items:     center;
	gap:             11px;
	padding:         8px 10px;
	margin:          1px 0;
	border-radius:   8px !important;
	color:           var(--clsnr-text-2) !important;
	text-decoration: none !important;
	font-size:       13px !important;
	font-weight:     500 !important;
	font-style:      normal !important;
	text-transform:  none !important;
	letter-spacing:  normal !important;
	line-height:     1.4 !important;
	text-shadow:     none !important;
	white-space:     nowrap;
	cursor:          pointer;
	background:      none !important;
	border:          none !important;
	box-shadow:      none !important;
	outline:         none !important;
	appearance:      none;
	-webkit-appearance: none;
	/* Пункты навигации — не текст, долгий тап/выделение здесь выглядит как
	   веб-страница, а не нативное меню приложения. */
	-webkit-user-select: none; user-select: none;
	-webkit-touch-callout: none;
	width:           100%;
	min-height:      36px;
	text-align:      left !important;
	transition:      background var(--clsnr-dur), color var(--clsnr-dur),
	                 gap var(--clsnr-dur) var(--clsnr-ease),
	                 padding var(--clsnr-dur) var(--clsnr-ease);
	overflow:        hidden;
	position:        relative;
	-webkit-tap-highlight-color: transparent;
}

.clsnr-s-item:focus {
	outline:    none;
	box-shadow: none;
}

.clsnr-s-item:hover,
.clsnr-s-item:focus-visible {
	background: var(--clsnr-hover) !important;
	color:      var(--clsnr-text) !important;
	outline:    none;
}

.clsnr-s-nav-item.is-active > .clsnr-s-item {
	background:  var(--clsnr-active-bg) !important;
	color:       var(--clsnr-active-txt) !important;
	font-weight: 600 !important;
}
.clsnr-s-nav-item.is-active > .clsnr-s-item:hover {
	background: var(--clsnr-active-bg) !important;
}

/* ── Icon ── */
.clsnr-s-item-icon {
	position:        relative; /* якорь для .clsnr-s-badge (точка в углу) — см. ниже */
	width:           17px;
	height:          17px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	color:           inherit;
}

.clsnr-s-item-icon svg,
.clsnr-s-item-icon img,
.clsnr-s-item-icon .clsnr-nav-icon,
.clsnr-s-item-icon .clsnr-collapse-icon {
	width:   17px !important;
	height:  17px !important;
	display: block !important;
	color:   inherit;
	flex-shrink: 0;
}

.clsnr-s-item-icon .clsnr-nav-icon--bb {
	font-size:   17px;
	line-height: 1;
}

.clsnr-s-item-icon img {
	object-fit: contain;
}

/* Custom uploaded icon (any SVG/PNG picked in the button builder) — a
   plain <img> can't ever match the module icons' size/colour because an
   externally-referenced SVG keeps its own hardcoded fill and CSS can't
   reach inside it, no matter what width/height/color rules target the
   <img> tag itself. Rendered as a CSS mask instead: the uploaded file
   becomes a stencil and `background-color: currentColor` paints it, so
   it's pixel-for-pixel the same size and colour as every built-in icon,
   and follows hover/active colour changes exactly like they do. Also
   sidesteps WP Dark Mode's automatic image-recolouring, which otherwise
   only targets <img> tags and was outlining this one in dark mode. */
.clsnr-s-item-icon-custom {
	width:      22px;
	height:     22px;
	flex-shrink: 0;
	display:    block;
	background-color: currentColor;
	-webkit-mask-image: var(--clsnr-icon-url);
	        mask-image: var(--clsnr-icon-url);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

/* ── Label — hides when collapsed ──
   Иконка не должна дёргаться при сворачивании — раньше .clsnr-s-item на
   collapsed менял padding НА ДРУГОЕ ЗНАЧЕНИЕ мгновенно (var(--clsnr-space-2)
   вместо 8px 10px), пока сама ширина сайдбара (.clsnr-sidebar) и ширина
   текста ещё плавно анимировались — рассинхрон читался как рывок иконки.
   Теперь padding строки не меняется вообще (та же раскладка, что в
   развёрнутом виде), а gap и ширина текста уходят в 0 плавно — вместе с
   этим justify-content:center (он не интерполируется сам, но пересчитывает
   позицию заново на каждом кадре по текущей, ещё анимирующейся ширине
   контента) визуально даёт иконке плавно съехать к центру рельса, а не
   прыгнуть туда одним кадром. */
.clsnr-s-item-text {
	flex:        1 1 auto;
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align:  left !important;
	opacity:     1;
	max-width:   160px;
	transition:  opacity var(--clsnr-dur) var(--clsnr-ease),
	             max-width var(--clsnr-dur) var(--clsnr-ease);
}

body.clsnr-collapsed .clsnr-s-item-text {
	opacity:        0;
	pointer-events: none;
	flex:           0 1 0;
	max-width:      0;
	overflow:       hidden;
}

/* Центрирование иконки в свёрнутом рельсе — НЕ через justify-content:center
   (пробовали: несмотря на то, что позиция пересчитывается каждый кадр по
   текущей ширине контента, сам justify-content не участвует в CSS-
   transition/интерполяции — это дискретное свойство, которое на каких-то
   кадрах даёт видимый скачок, а не гладкое движение). Вместо этого считаем
   ГОРИЗОНТАЛЬНЫЙ PADDING, при котором 17px-иконка окажется по центру
   48px-содержимого рельса (72px ширина рельса минус 12px*2 padding
   .clsnr-s-scroll) — padding честно анимируется (transition на padding
   у .clsnr-s-item выше), поэтому иконка плавно едет к центру, а не прыгает. */
body.clsnr-collapsed .clsnr-s-item {
	gap:     0;
	padding: 8px calc((var(--clsnr-w-sm) - var(--clsnr-space-3) * 2 - 17px) / 2);
}

/* Иконка профиля — не 17px SVG, а 28px круглый аватар (.clsnr-s-avatar,
   !important), поэтому центрирующий padding общего правила выше (расчитан
   под 17px) уводил её правее центра рельса. Тот же приём, но с реальной
   шириной аватара. */
body.clsnr-collapsed .clsnr-s-profile {
	padding: 8px calc((var(--clsnr-w-sm) - var(--clsnr-space-3) * 2 - 28px) / 2);
}

/* Tooltip on hover when the rail is collapsed — same pattern as
   .sidebar-link:hover::after in design-system/layout.css. */
@media (min-width: 769px) {
	body.clsnr-collapsed .clsnr-s-item {
		position: relative;
	}

	body.clsnr-collapsed .clsnr-s-item:hover::after,
	body.clsnr-collapsed .clsnr-s-item:focus-visible::after {
		content: attr(data-label);
		position: absolute;
		left: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%);
		background: #18253d;
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		line-height: 1;
		padding: 8px 12px;
		border-radius: var(--clsnr-radius-md);
		white-space: nowrap;
		box-shadow: var(--clsnr-shadow-lg);
		pointer-events: none;
		z-index: 3;
	}
}

/* ── Corner dot (unread indicator on the icon itself) — для мест, где
   пункт меню показан ТОЛЬКО иконкой без подписи (свёрнутый рельс сайдбара,
   нижний таб-бар на мобильном): .clsnr-s-badge-inline (число рядом с
   текстом, ниже) там теряется вместе со спрятанным текстом — сама иконка
   никак не показывала, что есть непрочитанные. Пустой элемент (без цифр,
   просто кружок) — скрыт по умолчанию, включается точечно в двух местах
   ниже (body.clsnr-collapsed и .clsnr-s-bottom), где .clsnr-s-badge-inline
   одновременно прячется, чтобы не задваивать индикатор. */
.clsnr-s-badge {
	display:      none;
	position:     absolute;
	top:          0;
	right:        0;
	width:        9px;
	height:       9px;
	background:   var(--clsnr-red);
	border-radius: 50%;
	border:       2px solid var(--clsnr-bg);
}
body.clsnr-collapsed .clsnr-s-item-icon .clsnr-s-badge {
	display: block;
}
body.clsnr-collapsed .clsnr-s-badge-inline {
	display: none;
}

/* ── Inline badge (unread count) — sits between icon and text. Layout/
   shape (display/height/padding/border-radius) now come from the kit's
   .badge (see markup: class="badge badge-dot-none clsnr-s-badge-inline"
   in templates/sidebar.php) — this rule only overrides what needs to stay
   different from the kit default: solid blue fill instead of the kit's
   light brand tint (kit .badge-brand is a tinted chip, not a solid pill),
   plus the tighter size this counter has always had. Used by the SOTIKS
   Notification Hub button specifically. ── */
.clsnr-s-badge-inline {
	justify-content: center;
	flex-shrink:   0;
	min-width:     20px;
	height:        20px;
	padding:       0 6px;
	margin:        0 var(--clsnr-space-1);
	background:    var(--clsnr-brand-bg, #2563eb);
	color:         #fff;
	font-size:     11px;
	font-weight:   700;
	line-height:   1;
}

/* ── Fluent Forms submission counter — compact row, same shape as
   any other sidebar item, just non-interactive with a 2-line label. ── */
.clsnr-s-formcount {
	cursor:        default;
	background:    var(--clsnr-bg-2) !important;
	border-radius: var(--clsnr-radius-md);
	margin-bottom: var(--clsnr-space-2);
}
.clsnr-s-formcount:hover,
.clsnr-s-formcount:focus-visible {
	background: var(--clsnr-bg-2) !important;
	color:      var(--clsnr-text-2);
}
.clsnr-s-formcount .clsnr-s-item-icon { color: var(--clsnr-purple); }
.clsnr-s-formcount-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
.clsnr-s-formcount-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--clsnr-text-muted);
}
.clsnr-s-formcount-nums {
	font-size: 12px;
	color: var(--clsnr-text-2);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.clsnr-s-formcount-nums b {
	color: var(--clsnr-active-txt);
	font-weight: 700;
}
body.clsnr-collapsed .clsnr-s-formcount { justify-content: center; }

/* ── GS Motivator "Мотивация" row — fixed row above the dark-mode
   toggle, same shape as .clsnr-s-formcount above. Rank 1-3 get a
   metal-tone gradient background; other places look like a plain
   sidebar item. Multiple matched tables rotate through via sidebar.js
   (fade between .clsnr-s-motivation-place text + the --rank-N modifier
   class, data-ranks JSON attr set in templates/sidebar.php). ── */
.clsnr-s-motivation {
	background:    var(--clsnr-bg-2) !important;
	border-radius: var(--clsnr-radius-md);
	margin-bottom: var(--clsnr-space-2);
	transition:    background var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-s-motivation:hover,
.clsnr-s-motivation:focus-visible {
	color: var(--clsnr-text);
}
.clsnr-s-motivation .clsnr-s-item-icon { color: var(--clsnr-purple); }
.clsnr-s-motivation-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
.clsnr-s-motivation-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--clsnr-text-muted);
}
.clsnr-s-motivation-place {
	font-size: 12px;
	font-weight: 700;
	color: var(--clsnr-text-2);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: opacity .25s var(--clsnr-ease);
}
.clsnr-s-motivation-place.is-fading { opacity: 0; }

.clsnr-s-motivation--rank-1 {
	background: linear-gradient(135deg, rgba(245,159,0,.28), rgba(245,159,0,.08)) !important;
	box-shadow: inset 0 0 0 1px rgba(245,159,0,.35);
}
.clsnr-s-motivation--rank-1 .clsnr-s-item-icon,
.clsnr-s-motivation--rank-1 .clsnr-s-motivation-place { color: #a15c00; }

.clsnr-s-motivation--rank-2 {
	background: linear-gradient(135deg, rgba(142,162,181,.32), rgba(142,162,181,.08)) !important;
	box-shadow: inset 0 0 0 1px rgba(142,162,181,.4);
}
.clsnr-s-motivation--rank-2 .clsnr-s-item-icon,
.clsnr-s-motivation--rank-2 .clsnr-s-motivation-place { color: #47607a; }

.clsnr-s-motivation--rank-3 {
	background: linear-gradient(135deg, rgba(205,122,46,.3), rgba(205,122,46,.08)) !important;
	box-shadow: inset 0 0 0 1px rgba(205,122,46,.38);
}
.clsnr-s-motivation--rank-3 .clsnr-s-item-icon,
.clsnr-s-motivation--rank-3 .clsnr-s-motivation-place { color: #8a4715; }

:root[data-theme="dark"] .clsnr-s-motivation--rank-1 .clsnr-s-item-icon,
:root[data-theme="dark"] .clsnr-s-motivation--rank-1 .clsnr-s-motivation-place { color: #ffce70; }
:root[data-theme="dark"] .clsnr-s-motivation--rank-2 .clsnr-s-item-icon,
:root[data-theme="dark"] .clsnr-s-motivation--rank-2 .clsnr-s-motivation-place { color: #cdd7e0; }
:root[data-theme="dark"] .clsnr-s-motivation--rank-3 .clsnr-s-item-icon,
:root[data-theme="dark"] .clsnr-s-motivation--rank-3 .clsnr-s-motivation-place { color: #e6ab7c; }

body.clsnr-collapsed .clsnr-s-motivation { justify-content: center; }

/* ── Submenu ── */
.clsnr-s-nav-sub {
	max-height:   0;
	overflow:     hidden;
	transition:   max-height var(--clsnr-dur) var(--clsnr-ease);
}

.clsnr-s-nav-item--has-sub.is-sub-open > .clsnr-s-nav-sub {
	max-height: 800px;
}

/* Row = the item's own link + (when it has children) a separate arrow
   button — click on the link navigates, click on the arrow expands/
   collapses .clsnr-s-nav-sub below. Kept as its own wrapper (rather than
   flexing the <li> itself) so the nested <ul class="clsnr-s-nav-sub">,
   the row's next sibling inside the same <li>, still stacks underneath
   instead of joining the row's flex line. */
.clsnr-s-nav-row {
	display:     flex;
	align-items: center;
	gap:         2px;
}

.clsnr-s-nav-row > .clsnr-s-item {
	flex:     1 1 auto;
	width:    auto;
	min-width: 0;
}

.clsnr-s-nav-toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           30px;
	height:          30px;
	margin:          1px 4px 1px 0;
	padding:         0;
	border:          none !important;
	border-radius:   8px !important;
	background:      none !important;
	color:           var(--clsnr-text-2) !important;
	cursor:          pointer;
	appearance:      none;
	-webkit-appearance: none;
	outline:         none;
}

.clsnr-s-nav-toggle:hover,
.clsnr-s-nav-toggle:focus-visible {
	background: var(--clsnr-hover) !important;
	color:      var(--clsnr-text) !important;
}

.clsnr-s-nav-toggle-icon {
	width:      12px;
	height:     12px;
	flex-shrink: 0;
	transition: transform var(--clsnr-dur) var(--clsnr-ease);
}

.clsnr-s-nav-item--has-sub.is-sub-open > .clsnr-s-nav-row > .clsnr-s-nav-toggle .clsnr-s-nav-toggle-icon {
	transform: rotate(-180deg);
}

/* Icon-only collapsed rail has no room for a second click target next to
   the link, and the submenu accordion itself doesn't render open there
   either — same as before, when this was a ::after chevron. */
body.clsnr-collapsed .clsnr-s-nav-toggle {
	display: none;
}

.clsnr-s-nav-item--child .clsnr-s-item {
	padding-left: calc(var(--clsnr-space-3) + 20px + var(--clsnr-space-3));
	font-size:    12.5px;
	font-weight:  500;
}

body.clsnr-collapsed .clsnr-s-nav-item--child .clsnr-s-item {
	padding-left: var(--clsnr-space-2);
}

/* ── No-menu fallback ── */
.clsnr-no-menu {
	padding:    var(--clsnr-space-3) var(--clsnr-space-2);
	font-size:  13px;
	color:      var(--clsnr-text-2);
	line-height: 1.5;
}
.clsnr-no-menu a { color: var(--clsnr-purple); }

/* =================================================================
   BOTTOM SECTION (search / notifications / modal / profile / collapse)
   ================================================================= */
.clsnr-s-bottom {
	flex-shrink:   0;
	padding:       var(--clsnr-space-3);
	display:       flex;
	flex-direction: column;
	gap:           2px;
	border-top:    1px solid var(--clsnr-border);
	background:    transparent;
}

/* ── Profile ── */
.clsnr-s-avatar {
	width:           28px !important;
	height:          28px !important;
	border-radius:   50% !important;
	overflow:        hidden;
	background:      var(--clsnr-active-bg);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}
.clsnr-s-avatar img,
.clsnr-s-avatar .avatar {
	width:         28px !important;
	height:        28px !important;
	border-radius: 50% !important;
	display:       block !important;
	object-fit:    cover;
}

.clsnr-s-profile-name {
	font-weight: 600;
	color:       var(--clsnr-text-2);
}

/* ── RTT workday (store-shift-planner) — plain row + anchored popover.
   No live status, so no semantic working/break colour states here
   any more — just the local-scanner warning (still genuinely
   semantic: red/amber for "something's wrong with the hardware"
   regardless of theme accent) and the four action buttons. */
.clsnr-workday-panel { width: 300px; }
.clsnr-workday-panel-body { padding: var(--clsnr-space-4); }

.clsnr-workday-scanner-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #b91c1c;
	background: #fef2f2;
	padding: 4px 10px 4px 8px;
	border-radius: var(--clsnr-radius-pill);
	white-space: nowrap;
	margin-bottom: var(--clsnr-space-3);
}
.clsnr-workday-scanner-status::before {
	content: '';
	width: 6px; height: 6px; border-radius: 50%;
	background: #dc2626;
	box-shadow: 0 0 0 3px rgba(220,38,38,.16);
	flex-shrink: 0;
}

.clsnr-workday-agent-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 var(--clsnr-space-3);
	padding: var(--clsnr-space-2) var(--clsnr-space-3);
	border-radius: var(--clsnr-radius-md);
	background: #fef2f2;
	border: 1px solid #fecaca;
}
.clsnr-workday-agent-row[hidden] { display: none; }
.clsnr-workday-agent-status {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: #b91c1c;
	line-height: 1.35;
}
.clsnr-workday-agent-status::before { content: '⚠'; font-size: 13px; flex-shrink: 0; }
.clsnr-workday-agent-retry {
	flex-shrink: 0;
	border: 1px solid #fca5a5;
	background: #fff;
	color: #b91c1c;
	font-size: 11.5px;
	font-weight: 700;
	padding: 6px 11px;
	border-radius: var(--clsnr-radius-sm);
	cursor: pointer;
	transition: background var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-workday-agent-retry:hover { background: #fef2f2; }
.clsnr-workday-agent-retry:disabled { opacity: .6; cursor: wait; }

.clsnr-workday-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--clsnr-space-2);
}
.clsnr-workday-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid var(--clsnr-border);
	background: var(--clsnr-bg-2);
	color: var(--clsnr-text-2);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 8px;
	border-radius: var(--clsnr-radius-md);
	cursor: pointer;
	text-align: center;
	transition: background var(--clsnr-dur) var(--clsnr-ease), border-color var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-workday-btn:hover:not(:disabled) { background: var(--clsnr-hover); border-color: var(--clsnr-border-default); }
.clsnr-workday-btn:disabled { opacity: .5; cursor: wait; }
.clsnr-workday-btn--primary { background: #059669; border-color: #059669; color: #fff; }
.clsnr-workday-btn--primary:hover:not(:disabled) { background: #047857; border-color: #047857; }
.clsnr-workday-btn--danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.clsnr-workday-btn--danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }

.clsnr-workday-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	padding: var(--clsnr-space-3);
	margin-top: var(--clsnr-space-4);
	font-size: 13px;
	font-weight: 600;
	color: var(--clsnr-purple);
	text-decoration: none;
	border-top: 1px solid var(--clsnr-border);
	border-radius: var(--clsnr-radius-md);
}
.clsnr-workday-more:hover { background: var(--clsnr-bg-2); }

/* Fingerprint scan modal */
.clsnr-workday-scan {
	position: fixed;
	inset: 0;
	z-index: calc(var(--clsnr-z) + 10);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--clsnr-space-4);
	background: rgba(17, 24, 39, .5);
	backdrop-filter: blur(2px);
}
.clsnr-workday-scan[hidden] { display: none; }
.clsnr-workday-scan-card {
	max-width: 320px;
	width: 100%;
	padding: 28px 22px;
	border-radius: var(--clsnr-radius-lg);
	background: var(--clsnr-bg);
	text-align: center;
	box-shadow: var(--clsnr-shadow-lg);
}
.clsnr-workday-scan-icon {
	margin: 0 auto 16px;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	background: var(--clsnr-bg-2);
}
.clsnr-workday-scan-card p { margin: 0; font-size: 14px; font-weight: 600; color: var(--clsnr-text-2); }

/* ── Dark mode toggle ──
   Own icon (moon/sun, swaps with .is-dark) + optional label + pill —
   .sotiks-theme-toggle-btn is the shared hook (assets/js/toggle.js,
   plugin sotiks-dark-mode) used both by the sidebar row below and by the
   topbar icon button (templates/topbar.php). */
.clsnr-s-darkmode-row { justify-content: flex-start; }

.clsnr-darkmode-icon { display: none; }
.sotiks-theme-toggle-btn:not(.is-dark) .clsnr-darkmode-icon--moon { display: block; }
.sotiks-theme-toggle-btn.is-dark .clsnr-darkmode-icon--sun { display: block; }

/* Light/dark пара для загруженных картинок (clsnr_icon_swap_markup()) —
   логотип в шапке меню, иконки пунктов WP-меню. display:contents на
   обёртке — она сама не участвует в лэйауте, поэтому существующие
   селекторы размера/цвета конкретного места (например
   .clsnr-s-item-icon img) видят <img> внутри так, как будто обёртки нет
   вообще, без дублирования правил под каждый контекст. */
.clsnr-icon-swap { display: contents; }
/* !important — вызывающий код (например nav_icon в sidebar.php) кладёт
   свой display:block в inline style="" ради явных width/height, а
   inline style побеждает внешний CSS без !important; без него оба
   варианта показывались одновременно вместо переключения. Селектор из
   ДВУХ классов (.clsnr-icon-swap .clsnr-icon-swap-dark, не просто
   .clsnr-icon-swap-dark) — специфичность 0,2,0, чтобы гарантированно
   перебивать .clsnr-s-item-icon img (0,1,1 + !important, задаёт всем
   картинкам в строке сайдбара display:block!important под свой
   единый размер) — иначе там побеждала генерика по специфичности, и
   тёмный/светлый вариант иконки показывались одновременно рядом. */
.clsnr-icon-swap .clsnr-icon-swap-dark { display: none !important; }
html[data-theme="dark"] .clsnr-icon-swap .clsnr-icon-swap-light { display: none !important; }
html[data-theme="dark"] .clsnr-icon-swap .clsnr-icon-swap-dark { display: block !important; }

.clsnr-darkmode-pill {
	position:      relative;
	width:         32px;
	height:        18px;
	min-width:     32px;
	border-radius: var(--clsnr-radius-pill);
	background:    var(--clsnr-border-default);
	flex-shrink:   0;
	margin-left:   auto;
	transition:    background var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-darkmode-pill-thumb {
	position:      absolute;
	top:           2px;
	left:          2px;
	width:         14px;
	height:        14px;
	border-radius: 50%;
	background:    #fff;
	box-shadow:    0 1px 2px rgba(17,24,39,.3);
	transition:    transform var(--clsnr-dur) var(--clsnr-ease);
}
#clsnr-darkmode-toggle.is-dark .clsnr-darkmode-pill { background: var(--clsnr-purple); }
#clsnr-darkmode-toggle.is-dark .clsnr-darkmode-pill-thumb { transform: translateX(14px); }

/* Collapsed rail: only the icon stays (same treatment every other
   sidebar row gets), the pill has nowhere to go so it's dropped. */
body.clsnr-collapsed .clsnr-darkmode-pill { display: none; }

/* ── Collapse button ── */
.clsnr-collapse-btn {
	color: var(--clsnr-text-2);
}
.clsnr-collapse-btn:hover {
	color: var(--clsnr-text);
}

.clsnr-collapse-icon {
	width:      16px !important;
	height:     16px !important;
	display:    block;
	transform:  rotate(0deg);
	transition: transform var(--clsnr-dur) var(--clsnr-ease);
}

body.clsnr-collapsed .clsnr-collapse-icon {
	transform: rotate(180deg);
}

/* =================================================================
   SEARCH MODAL — macOS Spotlight style
   ================================================================= */

/* Full-screen overlay */
.clsnr-search-panel {
	position:   fixed;
	inset:      0;
	z-index:    50;
	display:    flex;
	align-items: flex-start;
	justify-content: center;
	padding:    12vh 16px 0;
	opacity:    0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

.clsnr-search-panel.is-open {
	opacity:    1;
	visibility: visible;
	pointer-events: auto;
}

/* Blurred dark backdrop */
.clsnr-search-backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(17, 24, 39, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor:     pointer;
}

/* Spotlight card */
.clsnr-search-box {
	position:      relative;
	width:         100%;
	max-width:     640px;
	background:    rgba(255, 255, 255, 0.98);
	border-radius: var(--clsnr-radius-xl);
	box-shadow:    var(--clsnr-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	overflow:      hidden;
	transform:     scale(0.96) translateY(-10px);
	opacity:       0;
	transition:    transform .22s cubic-bezier(0.34, 1.56, 0.64, 1),
	               opacity .2s ease;
}

.clsnr-search-panel.is-open .clsnr-search-box {
	transform: scale(1) translateY(0);
	opacity:   1;
}

/* Input row */
.clsnr-search-inner {
	display:       flex;
	align-items:   center;
	padding:       0 10px 0 20px;
	gap:           10px;
	border-bottom: 1px solid var(--clsnr-border);
	min-height:    64px;
}

.clsnr-search-icon-wrap {
	color:       var(--clsnr-text-muted);
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	padding-top: 1px;
}

/* Override WP/BP form defaults */
.clsnr-search-inner form {
	flex:        1;
	display:     flex;
	align-items: center;
	margin:      0;
	padding:     0;
	border:      none;
	background:  transparent;
	min-width:   0;
}

.clsnr-search-inner form label {
	flex:      1;
	min-width: 0;
	margin:    0;
}

.clsnr-search-inner form .screen-reader-text {
	position:   absolute;
	width:      1px;
	height:     1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
}

.clsnr-search-inner input[type="search"],
.clsnr-search-inner input[type="text"],
.clsnr-search-inner .search-field-top,
.clsnr-search-inner .search-field {
	width:       100% !important;
	flex:        1;
	padding:     18px 0 !important;
	border:      none !important;
	outline:     none !important;
	background:  transparent !important;
	box-shadow:  none !important;
	font-size:   16px !important;
	font-weight: 400;
	color:       var(--clsnr-text);
	line-height: 1.4;
	-webkit-appearance: none;
	appearance:  none;
}

.clsnr-search-inner input[type="search"]::placeholder,
.clsnr-search-inner input[type="text"]::placeholder,
.clsnr-search-inner .search-field::placeholder {
	color:   var(--clsnr-text-muted) !important;
	opacity: 1;
}

/* Hide the form's own submit button */
.clsnr-search-inner button[type="submit"],
.clsnr-search-inner input[type="submit"] {
	display: none !important;
}

/* Close (×) button */
.clsnr-search-close-btn {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	color:           var(--clsnr-text-muted);
	border-radius:   var(--clsnr-radius-md);
	transition:      background .15s, color .15s;
}

.clsnr-search-close-btn:hover {
	background: var(--clsnr-hover);
	color:      var(--clsnr-text);
}

/* Footer hints */
.clsnr-search-footer {
	padding:     10px 20px 12px;
	display:     flex;
	align-items: center;
}

.clsnr-search-hint {
	font-size:   12px;
	color:       var(--clsnr-text-muted);
	display:     flex;
	align-items: center;
	gap:         5px;
	flex-wrap:   wrap;
}

.clsnr-search-hint kbd {
	font-family:         inherit;
	font-size:           11px;
	padding:             2px 6px;
	background:          var(--clsnr-bg-2);
	border:              1px solid var(--clsnr-border);
	border-bottom-width: 2px;
	border-radius:       var(--clsnr-radius-sm);
	color:               var(--clsnr-text-2);
	line-height:         1.5;
	display:             inline-block;
}

.clsnr-search-hint-sep {
	color:  var(--clsnr-border);
	margin: 0 1px;
}

/* Admin bar offset on desktop */
@media (min-width: 769px) {
	body.admin-bar .clsnr-search-panel { padding-top: calc(12vh + 32px); }
}

/* ── Mobile — centered like desktop ── */
@media (max-width: 768px) {
	.clsnr-search-panel {
		align-items:     center;
		justify-content: center;
		padding:         0 16px;
	}

	.clsnr-search-box {
		width:         100%;
		max-width:     100%;
		transform:     scale(0.94) translateY(16px);
		opacity:       0;
	}

	.clsnr-search-panel.is-open .clsnr-search-box {
		transform: scale(1) translateY(0);
		opacity:   1;
	}

	.clsnr-search-inner {
		min-height:    60px;
		padding-left:  16px;
		padding-right: 6px;
	}

	/* 16px prevents iOS auto-zoom on input focus */
	.clsnr-search-inner input[type="search"],
	.clsnr-search-inner input[type="text"],
	.clsnr-search-inner .search-field-top,
	.clsnr-search-inner .search-field {
		padding:   16px 0 !important;
	}

	.clsnr-search-hint { display: none; }
}

/* =================================================================
   NOTIFICATIONS
   ================================================================= */

/* ── Notification/profile popover panel — anchored purely in CSS to
   its trigger button's own wrapper (.clsnr-s-anchor, position:relative)
   — no JS position math. Shared by the own profile dropdown. ── */
.clsnr-s-anchor { position: relative; }
.clsnr-notif-panel {
	position:      absolute;
	left:          100%;
	bottom:        -4px;
	margin-left:   8px;
	width:         360px;
	max-width:     calc(100vw - var(--clsnr-w) - 16px);
	max-height:    480px;
	background:    var(--clsnr-bg);
	border-radius: var(--clsnr-radius-lg);
	border:        1px solid var(--clsnr-border);
	z-index:       calc(var(--clsnr-z) + 4);
	box-shadow:    var(--clsnr-shadow-lg);
	display:       flex;
	flex-direction: column;
	overflow:      hidden;
	opacity:       0;
	visibility:    hidden;
	transform:     translateX(-6px);
	transition:    opacity var(--clsnr-dur) var(--clsnr-ease),
	               visibility var(--clsnr-dur) var(--clsnr-ease),
	               transform var(--clsnr-dur) var(--clsnr-ease);
}
body.clsnr-collapsed .clsnr-notif-panel {
	max-width: calc(100vw - var(--clsnr-w-sm) - 16px);
}
.clsnr-notif-panel.is-open {
	opacity:    1;
	visibility: visible;
	transform:  translateX(0);
}
.clsnr-notif-head { display:flex; align-items:center; justify-content:space-between; padding:var(--clsnr-space-4); border-bottom:1px solid var(--clsnr-border); flex-shrink:0; }
.clsnr-notif-head h3 { margin:0; font-size:14px; font-weight:700; color:var(--clsnr-text-2); }
.clsnr-notif-view-all { font-size:12px; font-weight:600; color:var(--clsnr-purple); text-decoration:none; }
.clsnr-notif-list { flex:1; overflow-y:auto; padding:4px 0; }
.clsnr-profile-menu-list { list-style: none; margin: 0; padding: 0; }
.clsnr-notif-item { padding:10px var(--clsnr-space-4); border-bottom:1px solid var(--clsnr-border); }
.clsnr-notif-item.is-new { background:var(--clsnr-active-bg); }
.clsnr-notif-item__link { display:block; text-decoration:none; color:inherit; }
.clsnr-notif-item__text { margin:0 0 2px; font-size:13px; color:var(--clsnr-text-2); line-height:1.4; }
.clsnr-notif-item__time { font-size:11px; color:var(--clsnr-text-muted); }
.clsnr-notif-empty { padding:24px var(--clsnr-space-4); text-align:center; color:var(--clsnr-text-muted); font-size:13px; }

/* =================================================================
   MODAL
   ================================================================= */
.clsnr-modal {
	position: fixed; inset: 0; z-index: calc(var(--clsnr-z) + 10);
	display: flex; align-items: center; justify-content: center;
	padding: var(--clsnr-space-4);
	visibility: hidden; opacity: 0;
	transition: opacity var(--clsnr-dur) var(--clsnr-ease), visibility var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-modal.is-open { visibility: visible; opacity: 1; }
.clsnr-modal__backdrop {
	position: absolute; inset: 0; cursor: pointer;
	background: rgba(17, 24, 39, .5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.clsnr-modal__box {
	position: relative; background: var(--clsnr-bg); border-radius: var(--clsnr-radius-lg);
	width: 100%; max-width: 560px; max-height: min(640px, 90vh); overflow-y: auto;
	box-shadow: var(--clsnr-shadow-lg);
	transform-origin: center;
	animation: clsnr-pop-in .22s var(--clsnr-ease);
}
.clsnr-modal__box::-webkit-scrollbar { width: 8px; }
.clsnr-modal__box::-webkit-scrollbar-thumb { background: var(--clsnr-border); border-radius: 8px; }
@keyframes clsnr-pop-in {
	from { transform: scale(.96) translateY(10px); opacity: 0; }
	to   { transform: scale(1)   translateY(0);    opacity: 1; }
}
.clsnr-modal__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--clsnr-space-4); padding: var(--clsnr-space-5);
	border-bottom: 1px solid var(--clsnr-border);
}
.clsnr-modal__head h2 {
	margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--clsnr-text);
}
.clsnr-modal__close {
	flex: 0 0 auto; background: var(--clsnr-bg-2); border: none; cursor: pointer;
	width: 32px; height: 32px; padding: 0; color: var(--clsnr-text-muted); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s var(--clsnr-ease), color .15s var(--clsnr-ease);
}
.clsnr-modal__close:hover { background: var(--clsnr-active-bg); color: var(--clsnr-active-txt); }
.clsnr-modal__close svg { width: 16px; height: 16px; }
.clsnr-modal__body { padding: var(--clsnr-space-5); font-size: 14px; color: var(--clsnr-text-2); line-height: 1.7; }
.clsnr-modal__body a:not([class]) {
	color: var(--clsnr-purple); font-weight: 600; text-decoration: none;
}
.clsnr-modal__body a:not([class]):hover { text-decoration: underline; }

@media (max-width: 640px) {
	.clsnr-modal { padding: 0; align-items: flex-end; }
	.clsnr-modal__box {
		max-width: none; width: 100%; max-height: 86vh;
		border-radius: var(--clsnr-radius-lg) var(--clsnr-radius-lg) 0 0;
		animation: clsnr-sheet-in .22s var(--clsnr-ease);
	}
	@keyframes clsnr-sheet-in {
		from { transform: translateY(100%); opacity: 0; }
		to   { transform: translateY(0);     opacity: 1; }
	}
}

/* =================================================================
   OVERLAY (shared by mobile drawer + modal)
   ================================================================= */
.clsnr-overlay {
	position: fixed; inset: 0; background: rgba(17,24,39,.45);
	z-index: calc(var(--clsnr-z) + 5); opacity: 0; visibility: hidden;
	transition: opacity var(--clsnr-dur), visibility var(--clsnr-dur); cursor: pointer;
}
.clsnr-overlay.is-visible { opacity: 1; visibility: visible; }

/* =================================================================
   TOP BAR — independent on/off from the sidebar (topbar_enabled).
   Box starts exactly where the sidebar's fixed column ends (left:
   var(--clsnr-w)/var(--clsnr-w-sm)) instead of full-bleed + padding,
   so the two never need z-index math to avoid overlapping each
   other's background.
   ================================================================= */
body.clsnr-topbar-on.clsnr-active { padding-top: var(--clsnr-topbar-h) !important; }

.clsnr-topbar {
	position: fixed; top: 0; left: var(--clsnr-w); right: 0;
	height: var(--clsnr-topbar-h);
	z-index: var(--clsnr-z);
	display: flex; align-items: center; gap: var(--clsnr-space-4);
	padding: 0 var(--clsnr-space-5);
	background: var(--clsnr-bg);
	border-bottom: 1px solid var(--clsnr-border);
	transition: left var(--clsnr-dur) var(--clsnr-ease);
	font-family: var(--clsnr-font);
	font-size: 14px;
	/* Персистентный элемент через MPA View Transitions — см. тот же
	   комментарий у .clsnr-sidebar выше. */
	view-transition-name: sotiks-topbar;
}
.clsnr-topbar *, .clsnr-topbar *::before, .clsnr-topbar *::after { box-sizing: border-box; }
.clsnr-topbar button, .clsnr-topbar input { font-family: inherit; }

body.clsnr-collapsed .clsnr-topbar { left: var(--clsnr-w-sm); }

/* =================================================================
   Window Controls Overlay (десктоп, Windows/macOS Chrome/Edge, PWA
   установлено с display_override:"window-controls-overlay" в
   manifest — inc/pwa.php) — затягиваем .clsnr-topbar прямо в полосу
   заголовка окна вместо пустой системной полосы сверху. Мобильные и
   браузер-без-установки этот media query просто не матчат — там всё
   как было. env(titlebar-area-*) браузер обновляет сам при ресайзе
   окна/изменении области системных кнопок, доп. JS не нужен.
   ================================================================= */
@media (display-mode: window-controls-overlay) {
	.clsnr-topbar {
		left:   env(titlebar-area-x, 0);
		top:    env(titlebar-area-y, 0);
		width:  env(titlebar-area-width, 100%);
		height: env(titlebar-area-height, var(--clsnr-topbar-h));
		/* Пустая область топбара становится зоной перетаскивания окна
		   (как в нативных приложениях) — кликабельные элементы внутри
		   явно помечены no-drag ниже, иначе они перестанут отвечать
		   на клики/наведение. */
		-webkit-app-region: drag;
		        app-region: drag;
	}
	body.clsnr-collapsed .clsnr-topbar { left: env(titlebar-area-x, 0); }

	.clsnr-topbar button,
	.clsnr-topbar a,
	.clsnr-topbar input,
	.clsnr-topbar [role="button"],
	.clsnr-topbar .dropdown {
		-webkit-app-region: no-drag;
		        app-region: no-drag;
	}

	/* Сайдбар начинается НИЖЕ полосы заголовка, а не под ней — иначе
	   верх рельса (лого) окажется перекрыт системными кнопками
	   свернуть/закрыть, которые всегда рисуются поверх страницы. */
	.clsnr-sidebar { top: env(titlebar-area-height, var(--clsnr-topbar-h)); }

	/* Высота топбара теперь динамическая (обычно уже 60px) — отступ
	   контента под неё считаем от той же env-переменной, а не от
	   фиксированного токена. */
	body.clsnr-topbar-on.clsnr-active {
		padding-top: env(titlebar-area-height, var(--clsnr-topbar-h)) !important;
	}
}

/*
 * WP admin bar: 32px tall from 783px viewport width up, 46px below that
 * (WP core's own breakpoint, wp-admin/css/admin-bar.css) — all the way
 * down to the narrowest phones, not just tablets. The previous pair of
 * rules bounded the 46px case from below at min-width:769px, so real
 * phones (< 769px) matched NEITHER rule and .clsnr-topbar kept its base
 * top:0 — drawn right under/behind the taller mobile admin bar instead
 * of below it. min-width/max-width now split cleanly at 783px, no gap.
 */
@media (min-width: 783px) {
	body.admin-bar .clsnr-topbar { top: 32px; }
}
@media (max-width: 782px) {
	body.admin-bar .clsnr-topbar { top: 46px; }
	/*
	 * WP core делает #wpadminbar position:absolute (не fixed) начиная с
	 * этой же ширины (782px) — на телефоне админ-бар прокручивается
	 * вместе со страницей и пропадает из вьюпорта после скролла на его
	 * высоту. .clsnr-topbar же всегда position:fixed — без этого класса
	 * она держала бы отступ 46px и после того, как админ-бар уже уехал,
	 * оставляя пустую полосу сверху. .clsnr-topbar-adminbar-scrolled
	 * ставится/снимается по scroll в assets/js/sidebar.js (порог — те же
	 * 46px, высота мобильного админ-бара).
	 */
	body.admin-bar.clsnr-topbar-adminbar-scrolled .clsnr-topbar { top: 0; }
}

.clsnr-tb-title {
	font-size: 16px; font-weight: 700; color: var(--clsnr-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	flex-shrink: 0; max-width: 40%;
}
.clsnr-tb-spacer { flex: 1; }

/* ── Mega-menu nav (clsnr_topbar location) ── */
.clsnr-tb-nav-list { display: flex; align-items: center; gap: var(--clsnr-space-2); height: 100%; }
.clsnr-tb-item { position: relative; display: flex; align-items: center; height: 100%; }
.clsnr-tb-link {
	display: flex; align-items: center; gap: var(--clsnr-space-2);
	padding: var(--clsnr-space-2) var(--clsnr-space-3);
	border-radius: var(--clsnr-radius-md);
	font-size: 13px; font-weight: 600; color: var(--clsnr-text-2);
	white-space: nowrap; cursor: pointer;
	transition: background var(--clsnr-dur) var(--clsnr-ease), color var(--clsnr-dur) var(--clsnr-ease);
	-webkit-user-select: none; user-select: none;
	-webkit-touch-callout: none;
}
.clsnr-tb-link:hover { background: var(--clsnr-hover); color: var(--clsnr-text); }
.clsnr-tb-item.is-active > .clsnr-tb-link { background: var(--clsnr-active-bg); color: var(--clsnr-active-txt); }
.clsnr-tb-link-icon svg, .clsnr-tb-link-icon img { width: 17px; height: 17px; display: block; }
/* Точка-индикатор непрочитанных на пункте шапки, ведущем на уведомления
   (CLSNR_Topbar_Walker::is_notif_url()) — тот же .clsnr-s-badge, что и в
   сайдбаре, здесь показывается всегда (без body.clsnr-collapsed — верхняя
   панель и так icon-only), поэтому нужен свой якорь position:relative. */
.clsnr-tb-link-icon { position: relative; }
.clsnr-tb-link-icon .clsnr-s-badge { display: block; }
.clsnr-tb-item--has-sub.is-open > .clsnr-tb-link { background: var(--clsnr-hover); color: var(--clsnr-text); }

/* Mega-menu dropdown panel — anchored under its trigger */
.clsnr-tb-sub {
	position: absolute; top: 100%; left: 0; margin-top: 6px;
	min-width: 220px; max-width: 480px;
	background: var(--clsnr-bg); border: 1px solid var(--clsnr-border);
	border-radius: var(--clsnr-radius-lg); box-shadow: var(--clsnr-shadow-lg);
	padding: var(--clsnr-space-2);
	z-index: var(--clsnr-z);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--clsnr-dur) var(--clsnr-ease), visibility var(--clsnr-dur) var(--clsnr-ease), transform var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-tb-item--has-sub.is-open .clsnr-tb-sub { opacity: 1; visibility: visible; transform: none; }
.clsnr-tb-sub-list { display: flex; flex-direction: column; gap: 2px; }
.clsnr-tb-sub-list .clsnr-tb-item { height: auto; }
.clsnr-tb-sub-list .clsnr-tb-link { width: 100%; }

/* ── Custom builder buttons flagged "показывать в шапке" ── */
.clsnr-tb-btn {
	position: relative; /* якорь для .clsnr-s-badge, если кнопка ведёт на уведомления */
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: var(--clsnr-radius-md);
	color: var(--clsnr-text-2); flex-shrink: 0;
	transition: background var(--clsnr-dur) var(--clsnr-ease), color var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-tb-btn:hover { background: var(--clsnr-hover); color: var(--clsnr-text); }
.clsnr-tb-btn .clsnr-s-badge { display: block; }
.clsnr-tb-btn svg { width: 17px; height: 17px; }
.clsnr-tb-btn-icon-custom {
	width: 17px; height: 17px; display: block; background-color: currentColor;
	-webkit-mask-image: var(--clsnr-icon-url); mask-image: var(--clsnr-icon-url);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}

/* ── Profile dropdown — icon-only trigger (name/login live inside the
   opened panel, not next to the button) ── */
.clsnr-tb-anchor { position: relative; flex-shrink: 0; }
.clsnr-tb-profile-btn {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow var(--clsnr-dur) var(--clsnr-ease), transform var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-tb-profile-btn:hover { box-shadow: 0 0 0 2px var(--clsnr-border-default); }
.clsnr-tb-profile-btn:active { transform: scale(.94); }
.clsnr-tb-profile-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--clsnr-purple); }
.clsnr-tb-profile-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: block; }
.clsnr-tb-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clsnr-tb-profile-avatar--lg { width: 56px; height: 56px; }
.clsnr-tb-profile-name { font-size: 13px; font-weight: 600; color: var(--clsnr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clsnr-tb-profile-login { font-size: 12px; color: var(--clsnr-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.clsnr-tb-profile-panel {
	position: absolute; top: 100%; right: 0; margin-top: 10px;
	width: 260px; max-width: calc(100vw - 32px);
	background: var(--clsnr-bg); border: 1px solid var(--clsnr-border);
	border-radius: var(--clsnr-radius-lg); box-shadow: var(--clsnr-shadow-lg);
	overflow: hidden;
	z-index: var(--clsnr-z);
	opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
	transform-origin: top right;
	transition: opacity var(--clsnr-dur) var(--clsnr-ease), visibility var(--clsnr-dur) var(--clsnr-ease), transform var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-tb-profile-panel.is-open { opacity: 1; visibility: visible; transform: none; }
/* Clickable — links straight to profile.php, same as before but now
   the whole avatar/name/@login block is the click target, not just a
   static header. */
.clsnr-tb-profile-panel-head {
	position: relative;
	display: flex; align-items: center; gap: var(--clsnr-space-3);
	padding: var(--clsnr-space-4); background: var(--clsnr-bg-2);
	border-bottom: 1px solid var(--clsnr-border);
	text-decoration: none; color: inherit;
	transition: background var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-tb-profile-panel-head:hover { background: var(--clsnr-hover); }

/* Cover photo — darkened (gradient overlay below) but no longer blurred,
   by request, so the photo itself stays sharp; the ::after gradient still
   keeps name/@login readable regardless of the photo's own colors. Only
   present when clsnr_get_profile_cover_url() actually found one (BuddyBoss
   member cover-image component); no cover photo feature of our own exists
   today, this is purely "pick it up if/when one is there". */
.clsnr-tb-profile-panel-head.clsnr-has-cover {
	background-color: transparent; /* the ::before/::after layers below replace it */
	overflow: hidden;
	isolation: isolate;
}
.clsnr-tb-profile-panel-head.clsnr-has-cover::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--clsnr-cover-url);
	background-size: cover; background-position: center;
	z-index: 0;
}
.clsnr-tb-profile-panel-head.clsnr-has-cover::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5));
	z-index: 1;
}
.clsnr-tb-profile-panel-head.clsnr-has-cover .clsnr-tb-profile-avatar,
.clsnr-tb-profile-panel-head.clsnr-has-cover .clsnr-tb-profile-panel-meta {
	position: relative; z-index: 2;
}
.clsnr-tb-profile-panel-head.clsnr-has-cover .clsnr-tb-profile-avatar {
	box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.clsnr-tb-profile-panel-head.clsnr-has-cover .clsnr-tb-profile-name,
.clsnr-tb-profile-panel-head.clsnr-has-cover .clsnr-tb-profile-login {
	color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

.clsnr-tb-profile-panel-meta { min-width: 0; flex: 1; }

/* List (icon + visible label) — text uses the theme's own font and
   the same weight as the main sidebar menu (.clsnr-s-item is 500,
   see below), not the plugin's own hardcoded --clsnr-font stack, by
   direct request. Only a divider BETWEEN rows — nothing above the
   first row or below the last ("Выйти"), no stray top/bottom lines. */
.clsnr-tb-profile-menu {
	padding: var(--clsnr-space-1) 0;
}
.clsnr-tb-profile-menu .clsnr-notif-item {
	padding: 0; border-bottom: none;
}
.clsnr-tb-profile-menu .clsnr-notif-item + .clsnr-notif-item {
	border-top: 1px solid var(--clsnr-border);
}
.clsnr-tb-profile-menu .clsnr-notif-item__link {
	display: flex; align-items: center; gap: var(--clsnr-space-3);
	padding: var(--clsnr-space-3) var(--clsnr-space-4);
	font-family: var(--font-sans, var(--clsnr-font));
	font-size: 14px; font-weight: 500; color: var(--clsnr-text-2);
	transition: background var(--clsnr-dur) var(--clsnr-ease), color var(--clsnr-dur) var(--clsnr-ease);
}
.clsnr-tb-profile-menu .clsnr-notif-item__link:hover { background: var(--clsnr-hover); color: var(--clsnr-text); }
.clsnr-tb-profile-menu .clsnr-notif-item__icon { flex-shrink: 0; display: block; }
.clsnr-tb-profile-menu .clsnr-notif-item__icon svg,
.clsnr-tb-profile-menu .clsnr-notif-item__icon img { width: 18px; height: 18px; display: block; }

/* Кастомная загруженная иконка "Выйти" — тот же mask-приём, что и у
   custom strip-иконок (см. .clsnr-s-item-icon-custom выше): следует за
   текущим цветом текста сама, без отдельной тёмной копии файла. */
.clsnr-tb-profile-menu .clsnr-notif-item__icon .clsnr-nav-icon--custom-mask {
	width: 18px; height: 18px; display: block; flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: var(--clsnr-icon-url);
	        mask-image: var(--clsnr-icon-url);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}
.clsnr-tb-profile-menu .clsnr-notif-item__text { margin: 0; font: inherit; color: inherit; }

/* Строка "Тёмная тема" (SOTIKS Dark Mode, 7.4) — та же раскладка, что и у
   остальных пунктов меню профиля, но переключатель справа вместо перехода
   по ссылке, поэтому cursor не pointer и hover не подсвечивает как ссылку. */
.clsnr-tb-profile-menu .clsnr-notif-item--toggle .clsnr-notif-item__link {
	justify-content: space-between;
	cursor: default;
}
.clsnr-tb-profile-menu .clsnr-notif-item--toggle .clsnr-notif-item__link:hover {
	background: none; color: var(--clsnr-text-2);
}
.clsnr-tb-profile-menu .clsnr-notif-item--toggle .clsnr-notif-item__text { flex: 1; }
.sotiks-theme-switch { flex-shrink: 0; }

/* Top-bar mega-menu — icon-only trigger row (text stays in the DOM for
   screen readers + a title tooltip on hover; only the top-level bar
   items, not the dropdown panel's own list — CLSNR_Topbar_Walker). */
.clsnr-tb-link--icon-only {
	width: 40px; height: 40px; padding: 0;
	justify-content: center; gap: 0;
}
.clsnr-tb-link--icon-only .clsnr-tb-link-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 768px) {
	/*
	 * Раньше вся мега-меню-навигация (.clsnr-tb-nav, WP-меню локации
	 * clsnr_topbar) целиком пряталась на мобильном — включая ПРОСТЫЕ
	 * пункты верхнего уровня без выпадающего подменю (иконка-ссылка без
	 * детей, например "Уведомления"), у которых на мобильном ничего не
	 * ломается — им не нужен ни доп. интерактив, ни место под панель.
	 * Прячем только пункты С подменю (.clsnr-tb-item--has-sub) — для них
	 * мобильный UI действительно ещё не продуман (сама механика открытия
	 * — assets/js/sidebar.js, scoped на .clsnr-tb-item--has-sub). Простые
	 * пункты остаются видимыми иконками в шапке, как на десктопе.
	 */
	.clsnr-tb-item--has-sub { display: none; }
	/*
	 * Заголовок страницы (flex-shrink:0 в базовом правиле) и иконки справа
	 * (.clsnr-tb-btn/.clsnr-tb-anchor — тоже flex-shrink:0, сжимается
	 * только .clsnr-tb-spacer) на узком экране в сумме легко не помещаются
	 * — пара кастомных кнопок из конструктора шапки + тёмная тема + профиль
	 * уже превышают ширину вьюпорта. Spacer первым съедает всё свободное
	 * место, но дальше сжиматься нечему — иконкам, которым не хватило
	 * места, просто уезжали за правый край экрана (position:fixed без
	 * скролла — не обрезаются, а именно невидимы, недостижимы). Даём
	 * заголовку сжиматься первым (он не так критичен — многоточие и так
	 * его обрезает), а сам topbar — со скроллом вбок как гарантированный
	 * запасной вариант, если даже минимального заголовка не хватит: иконки
	 * остаются доступны прокруткой, а не пропадают совсем.
	 */
	.clsnr-topbar {
		left: 0; padding: 0 var(--clsnr-space-4); overflow-x: auto;
		/* cubic-bezier — тот же плавный "decelerate", что и у свайпа вкладок
		   (themes/sotiks-base/assets/js/swipe-tabs.js), вместо линейного
		   ease по умолчанию, который на глаз читается как более резкий/
		   механический рывок, а не плавное движение. will-change — эта
		   анимация завязана на scroll (частые кадры), просим браузер
		   заранее подготовить отдельный композитный слой, а не пересчитывать
		   его на лету при каждом кадре скролла (частая причина заметных
		   "рывков" transform-анимаций именно во время скролла на телефонах).
		*/
		transition: transform .28s cubic-bezier(.22,.61,.36,1);
		will-change: transform;
	}
	.clsnr-tb-title { max-width: 50%; flex-shrink: 1; min-width: 60px; }
	/* Автоскрытие при скролле вниз (assets/js/sidebar.js:autoHideTopbarOnScroll) —
	   уезжает вверх за собственную высоту, появляется обратно при скролле вверх. */
	body.clsnr-topbar--hidden .clsnr-topbar { transform: translateY(-100%); }
}

/* =================================================================
   MOBILE — bottom nav bar (icon + label tabs) and a left-side
   slide-in drawer for the full menu, matching the demo's
   .bottom-nav / .mobile-drawer pattern exactly (not the old
   bottom-sheet-with-drag-handle panel).
   ================================================================= */
.clsnr-s-nav-panel-mobile { display: none; }

@media (max-width: 768px) {

	body.clsnr-active,
	body.clsnr-active.clsnr-collapsed {
		padding-left:   0 !important;
		padding-bottom: calc(var(--clsnr-bottomnav-h) + env(safe-area-inset-bottom)) !important;
	}

	.clsnr-top-notice { height: 72px; }
	/*
	 * padding-right было 12px — .clsnr-top-notice__close висит абсолютно
	 * поверх .clsnr-top-notice (right:10px, width:30px, т.е. занимает
	 * right-10..right-40), а .inner на мобильном switch'ится с
	 * justify-content:center (десктоп) на space-between — кнопку CTA
	 * прижимало вплотную к правому краю .inner (тоже около right-12),
	 * прямо под крестик закрытия. С 12px padding кнопка и крестик
	 * физически перекрывались — отсюда "крестика нет" (визуально
	 * погребён под кнопкой). 52px — с запасом больше footprint'а крестика
	 * (10 + 30 + отступ), кнопка больше в эту область не заезжает.
	 */
	/* Левый паддинг 78px (унаследован от десктопных 96px) на мобильном
	   ничему конкретному не соответствует — сайдбар тут не рейл слева
	   (на телефоне он превращается в нижний таб-бар, .clsnr-top-notice
	   на него никак не завязан), никакой иконки в этой области тоже нет.
	   Текст сдвигаем к левому краю, оставляя такой же скромный отступ,
	   как и с обычной стороны контейнера. */
	.clsnr-top-notice__inner { padding: 0 52px 0 16px; gap: 12px; justify-content: space-between; }
	.clsnr-top-notice__text { font-size: 12px; text-align: left; }
	.clsnr-top-notice__btn { min-width: 120px; height: 40px; padding: 0 16px; font-size: 13px; border-radius: var(--clsnr-radius-md); }
	.clsnr-top-notice__close { right: 10px; width: 30px; height: 30px; }

	/* Desktop rail's own box is not shown on phones — only its
	   .clsnr-s-bottom child (repositioned to a fixed tab bar below)
	   stays visible. Note: this can NOT be `.clsnr-sidebar{display:none}`
	   — .clsnr-s-bottom lives inside <aside class="clsnr-sidebar">, and a
	   `display:none` ancestor hides all descendants regardless of their
	   own `position:fixed`, which was silently killing the whole bottom
	   tab bar (and with it the "Меню" button) on mobile. */
	.clsnr-sidebar {
		position:   static;
		width:      auto;
		height:     auto;
		min-height: 0;
		background: none;
		border:     none;
		box-shadow: none;
		z-index:    auto;
	}
	.clsnr-s-logo,
	.clsnr-s-scroll { display: none; }

	/* ── Bottom tab bar ── */
	.clsnr-s-bottom {
		position:       fixed;
		left: 0; right: 0; bottom: 0;
		z-index:        var(--clsnr-z);
		flex-direction: row;
		align-items:    stretch;
		width:          100%;
		height:         var(--clsnr-bottomnav-h);
		padding:        0 var(--clsnr-space-1);
		padding-bottom: env(safe-area-inset-bottom);
		gap:            0;
		background:     var(--clsnr-bg);
		border-top:     1px solid var(--clsnr-border);
		box-shadow:     0 -4px 20px rgba(17,24,39,.06);
		/* Персистентный элемент через MPA View Transitions — на мобильном
		   именно этот блок (а не статичный .clsnr-sidebar-обёртка) реально
		   висит фиксированно и должен оставаться на месте между страницами. */
		view-transition-name: sotiks-bottom-nav;
	}

	.clsnr-s-anchor { display: contents; }

	.clsnr-s-item {
		flex: 1 1 0;
		flex-direction:  column;
		justify-content: center;
		gap:             2px;
		padding:         6px 2px;
		min-height:      0;
		border-radius:   0 !important;
		font-size:       10px !important;
		margin:          0;
		color:           var(--clsnr-text-muted) !important;
	}
	.clsnr-s-item:hover,
	.clsnr-s-item:focus-visible { background: transparent !important; color: var(--clsnr-text-muted) !important; }
	.clsnr-s-item.is-active,
	.clsnr-mobile-menu-btn.is-active { color: var(--clsnr-purple) !important; }

	.clsnr-s-item-icon { width: 22px; height: 22px; }
	.clsnr-s-item-icon svg { width: 22px !important; height: 22px !important; }

	/* Подписи под иконками в нижнем мобильном таб-баре убраны — только
	   иконки. Scoped к .clsnr-s-bottom, тот же приём, что и раньше: не
	   трогает подписи в шторке "Меню" (.clsnr-s-nav-panel-mobile), у неё
	   свой левосторонний .clsnr-s-item-text (см. ниже). */
	.clsnr-s-bottom .clsnr-s-item-text {
		display: none !important;
	}
	.clsnr-s-bottom .clsnr-s-item { gap: 0; }

	/* Тот же случай "только иконка", что и у свёрнутого десктопного рельса
	   (body.clsnr-collapsed выше, см. .clsnr-s-badge) — число-бейдж рядом с
	   текстом здесь тоже теряется вместе со спрятанной подписью, показываем
	   точку прямо на иконке вместо него. */
	.clsnr-s-bottom .clsnr-s-item-icon .clsnr-s-badge {
		display: block;
	}
	.clsnr-s-bottom .clsnr-s-badge-inline {
		display: none;
	}

	/* Notif panel becomes a sheet above the tab bar (no room beside
	   the button on a phone screen). */
	.clsnr-notif-panel {
		position:    fixed;
		left:        12px;
		right:       12px;
		bottom:      calc(var(--clsnr-bottomnav-h) + env(safe-area-inset-bottom) + 8px);
		margin-left: 0;
		width:       auto;
		max-width:   none;
	}
	body.clsnr-collapsed .clsnr-notif-panel { max-width: none; }

	/* Profile menu — same bottom-sheet treatment as the "Меню" panel
	   (.clsnr-s-nav-panel-mobile) instead of the small floating card the
	   other anchored panels (notifications, workday) use: full width,
	   docked to the screen edge, rounded top corners, slides up from
	   translateY(100%). ID selector so it wins over the shared
	   .clsnr-notif-panel card rule above regardless of source order. */
	#clsnr-profile-panel {
		left:           0;
		right:          0;
		bottom:         0;
		margin-left:    0;
		width:          auto;
		max-width:      none;
		max-height:     min(80vh, 640px);
		border-radius:  var(--clsnr-radius-lg) var(--clsnr-radius-lg) 0 0;
		padding-bottom: calc(var(--clsnr-bottomnav-h) + env(safe-area-inset-bottom));
		transform:      translateY(100%);
	}
	#clsnr-profile-panel.is-open { transform: translateY(0); }
	#clsnr-profile-panel.is-dragging { transition: none; }
	#clsnr-profile-panel::before {
		content:       '';
		display:       block;
		width:         36px;
		height:        4px;
		border-radius: 999px;
		background:    var(--clsnr-border-default, var(--clsnr-border));
		margin:        10px auto 6px;
	}
	#clsnr-profile-panel .clsnr-notif-list { max-height: none; }

	.clsnr-mobile-menu-btn { display: flex !important; }
	.clsnr-collapse-btn    { display: none !important; }

	/* The switch-track pill only makes sense in the wide desktop row —
	   in the narrow icon-above-label mobile tab-bar column there's no
	   room for it and it was breaking the row's layout. The icon alone
	   still shows and still toggles the theme on click, same as before. */
	.clsnr-darkmode-pill { display: none !important; }

	/* Per-button mobile tab bar constructor (admin setting) — a button
	   can stay enabled in the desktop sidebar but be left out of the
	   phone tab bar, or vice versa for profile (see .clsnr-s-profile
	   below, which used to be force-hidden here unconditionally). */
	.clsnr-mobile-bar-hide { display: none !important; }

	/* ── Bottom sheet (full menu) — slides up from under the tab bar ── */
	.clsnr-s-nav-panel-mobile {
		display:        block;
		position:       fixed;
		left:           0;
		right:          0;
		bottom:         0;
		top:            auto;
		max-height:     min(80vh, 640px);
		width:          auto;
		background:     var(--clsnr-bg);
		border-radius:  var(--clsnr-radius-lg) var(--clsnr-radius-lg) 0 0;
		box-shadow:     var(--clsnr-shadow-lg);
		transform:      translateY(100%);
		transition:     transform var(--clsnr-dur) var(--clsnr-ease);
		z-index:        calc(var(--clsnr-z) + 6);
		overflow:       hidden;
		padding-bottom: calc(var(--clsnr-bottomnav-h) + env(safe-area-inset-bottom));
	}
	.clsnr-s-nav-panel-mobile.is-open { transform: translateY(0); }
	/* Drag-to-dismiss in progress — JS drives transform directly per
	   frame, so the CSS transition would fight the touch and lag it. */
	.clsnr-s-nav-panel-mobile.is-dragging { transition: none; }

	.clsnr-s-nav-panel-mobile__inner {
		max-height: min(80vh, 640px);
		overflow-y: auto;
		padding:    0 var(--clsnr-space-3) var(--clsnr-space-3);
		display:    flex;
		flex-direction: column;
		gap:        2px;
	}

	/* Grab handle — signals the panel is a draggable-feeling sheet even
	   though closing is by tap-outside/Escape, not an actual drag gesture. */
	.clsnr-s-nav-panel-mobile__handle {
		display:         flex;
		justify-content: center;
		padding:         10px 0 6px;
	}
	.clsnr-s-nav-panel-mobile__grab {
		width:         36px;
		height:        4px;
		border-radius: 999px;
		background:    var(--clsnr-border-default, var(--clsnr-border));
	}

	.clsnr-s-nav-panel-mobile .clsnr-desktop-only { display: flex !important; }

	.clsnr-s-nav-panel-mobile .clsnr-s-item {
		flex-direction:  row;
		justify-content: flex-start;
		gap:             var(--clsnr-space-3);
		padding:         var(--clsnr-space-2) var(--clsnr-space-3);
		min-height:      40px;
		border-radius:   var(--clsnr-radius-md) !important;
		font-size:       13px !important;
		color:           var(--clsnr-text-2) !important;
	}
	.clsnr-s-nav-panel-mobile .clsnr-s-item:hover { background: var(--clsnr-hover) !important; color: var(--clsnr-text) !important; }

	.clsnr-s-nav-panel-mobile .clsnr-s-item-icon { width: 20px; height: 20px; }
	.clsnr-s-nav-panel-mobile .clsnr-s-item-icon svg { width: 18px !important; height: 18px !important; }

	.clsnr-s-nav-panel-mobile .clsnr-s-item-text {
		opacity:     1 !important;
		display:     block !important;
		visibility:  visible !important;
		flex:        1 1 auto !important;
		width:       auto !important;
		min-width:   0 !important;
		max-width:   none !important;
		font-size:   13px;
		font-weight: 500;
		text-align:  left;
		overflow:    hidden !important;
		text-overflow: ellipsis;
		white-space: nowrap !important;
	}

	.clsnr-s-nav-panel-mobile .clsnr-s-nav-item.is-active > .clsnr-s-item {
		background: var(--clsnr-active-bg);
		color:      var(--clsnr-active-txt);
		font-weight: 600;
	}

	/* Mobile-only builder items */
	.clsnr-mobile-only { display: flex !important; }
}