/*
 * css/ssss-shell.css — the nav shell (2026-10-04): COMPONENT sidebar (menu_side.php) + top-bar chrome.
 *
 * Design = "command deck" (design review 2026-10-04): a dark slate rail in the command-centre wall palette on the
 * left, light content and a quiet white top bar with ONE accent colour (brand orange) on the right. 44px family rows /
 * 40px page rows (.ssss-tap-44), an accordion per family (the current page's family is open server-side), a wire-tree
 * for the pages, a hover flyout when the rail is collapsed to 64px, an off-canvas drawer under 992px.
 *
 * Mounting: pageMaster.php adds body.ssss-has-side (and body.ssss-side-collapsed from localStorage) before first
 * paint; the sidebar is position:fixed on the left and the BODY is padded, so no page markup changes — #main / the
 * navbars (width:99.4% / 98.4%) keep sizing against the padded body. Nothing opens a wrapper, so the four pages
 * without pageFooter.php are unaffected.
 * Z-order (Bootstrap 5): dropdown 1000 · sticky 1020 · fixed 1030 · drawer backdrop 1040 · drawer 1045 ·
 * modal backdrop 1050 · modal 1055. The desktop panel sits at 1025 (under dropdown menus that may overlap it
 * from the navbar), the phone drawer at 1045 (above the page, under modals).
 * Wall mode (body.cc-wall, command_center_mgt.php) hides every piece of app chrome — this file follows.
 * Tokens: every colour is a --ssss-* token from css/ssss.css; the --ssss-side-* set is defined THERE (the nav-shell
 * block at the end of ssss.css) — tests/unit/TokensConsistencyTest.php and bin/ci-tripwires.sh #6 forbid raw-hex
 * custom properties anywhere else.
 */

/* ---------- panel ---------- */
.ssss-side {
	position: fixed; top: 0; bottom: 0; left: 0; z-index: 1025;
	width: var(--ssss-side-w); box-sizing: border-box;
	display: flex; flex-direction: column;
	background: var(--ssss-side-bg); color: var(--ssss-side-fg);
	border-right: 1px solid var(--ssss-side-line);
	font-size: 13.5px; line-height: 1.35;
	transition: width var(--ssss-dur-base) var(--ssss-ease-standard), transform var(--ssss-dur-base) var(--ssss-ease-standard);
}
.ssss-side-head {
	display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 14px; flex: 0 0 auto;
	background: var(--ssss-side-bg-deep); border-bottom: 1px solid var(--ssss-side-line);
}
.ssss-side-mark {
	flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ssss-side-accent); color: var(--ssss-on-orange);
}
.ssss-side-mark svg { width: 15px; height: 15px; fill: currentColor; }
.ssss-side-cap { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--ssss-side-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssss-side-toggle, .ssss-side-close {
	flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 6px; background: transparent; color: var(--ssss-side-dim); cursor: pointer; padding: 0;
}
.ssss-side-toggle:hover, .ssss-side-close:hover { background: var(--ssss-side-hover); color: var(--ssss-side-fg); }
.ssss-side-toggle:focus-visible, .ssss-side-close:focus-visible, .ssss-side-famhead:focus-visible, .ssss-side-link:focus-visible, .ssss-side-open:focus-visible { outline: 2px solid var(--ssss-side-accent); outline-offset: -2px; }
.ssss-side-toggle svg { fill: currentColor; transition: transform var(--ssss-dur-base) var(--ssss-ease-standard); }
.ssss-side-close svg { fill: currentColor; }
.ssss-side-close { display: none; }
.ssss-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 0 16px; scrollbar-width: thin; scrollbar-color: var(--ssss-side-active) transparent; }
.ssss-side-empty { padding: 14px 16px; color: var(--ssss-side-dim); font-size: 12.5px; }

/* ---------- group eyebrow (監控裝置 / 環境與設備) ---------- */
.ssss-side-sect {
	display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ssss-side-faint); white-space: nowrap;
}
.ssss-side-sect::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ssss-side-line); }

/* ---------- family: 44px head (button = accordion, <a> when the family is a single page) ---------- */
.ssss-side-family { position: relative; margin: 1px 0; }
.ssss-side-famhead {
	position: relative; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
	min-height: var(--ssss-side-item-h); padding: 0 12px 0 14px;
	border: 0; border-radius: 0; background: transparent; -webkit-appearance: none; appearance: none;
	color: var(--ssss-side-dim); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: left;
	cursor: pointer; white-space: nowrap; text-decoration: none;
	transition: background var(--ssss-dur-fast) var(--ssss-ease-standard), color var(--ssss-dur-fast) var(--ssss-ease-standard);
}
.ssss-side-famhead:hover { background: var(--ssss-side-hover); color: var(--ssss-side-fg); text-decoration: none; }
.ssss-side-ico { flex: 0 0 18px; width: 18px; height: 18px; fill: currentColor; }
.ssss-side-famlabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ssss-side-count { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; font-size: 11.5px; font-weight: 400; color: var(--ssss-side-faint); font-variant-numeric: tabular-nums; }
.ssss-side-count:empty { display: none; }
/* on/total filled by side.js (act=sidecounts); tone = offline share (ok / warn ≤25% / bad) */
.ssss-side-count[data-tone="ok"] .ssss-side-count-on { color: var(--ssss-side-ok); }
.ssss-side-count[data-tone="warn"] .ssss-side-count-on { color: var(--ssss-orange-400); }
.ssss-side-count[data-tone="bad"] .ssss-side-count-on { color: var(--ssss-side-danger); }
.ssss-side-count-sep { opacity: .55; margin: 0 1px; }
/* caret of an accordion head (a chevron drawn from two borders, no extra markup) */
button.ssss-side-famhead::after {
	content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: 0 5px 3px 2px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .6;
	transform: rotate(45deg); transition: transform var(--ssss-dur-fast) var(--ssss-ease-standard);
}
.ssss-side-family.is-open > button.ssss-side-famhead::after { transform: rotate(225deg); margin: 3px 5px 0 2px; }
.ssss-side-family.is-open > .ssss-side-famhead { color: var(--ssss-side-fg); }
.ssss-side-family.is-active > .ssss-side-famhead { background: var(--ssss-side-active); color: var(--ssss-side-fg); }
.ssss-side-family.is-active > .ssss-side-famhead .ssss-side-ico { color: var(--ssss-side-accent); }
.ssss-side-family.is-active > .ssss-side-famhead::before {
	content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; height: auto; margin: 0; border: 0; box-shadow: none;
	border-radius: 0 2px 2px 0; background: var(--ssss-side-accent);
}

/* ---------- pages of a family: accordion body + wire tree ---------- */
.ssss-side-links { display: none; position: relative; padding: 2px 0 6px; }
.ssss-side-family.is-open > .ssss-side-links { display: block; }
.ssss-side-links::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 12px; width: 1px; background: var(--ssss-side-line); }
.ssss-side-link {
	position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--ssss-side-sub-h); padding: 0 12px 0 42px;
	color: var(--ssss-side-dim); text-decoration: none; font-size: 13px; white-space: nowrap;
	transition: background var(--ssss-dur-fast) var(--ssss-ease-standard), color var(--ssss-dur-fast) var(--ssss-ease-standard);
}
.ssss-side-link::before {
	content: ""; position: absolute; left: 19.5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
	background: var(--ssss-side-bg); border: 1px solid var(--ssss-side-faint); box-sizing: border-box;
}
.ssss-side-link .ssss-side-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ssss-side-link:hover { background: var(--ssss-side-hover); color: var(--ssss-side-fg); text-decoration: none; }
.ssss-side-link.is-active { color: var(--ssss-side-fg); font-weight: 700; }
.ssss-side-link.is-active::before { background: var(--ssss-side-accent); border-color: var(--ssss-side-accent); box-shadow: 0 0 0 3px rgba(255, 163, 40, .22); }
/* single-page family: the head IS the link — no node, no wire */
.ssss-side-link.ssss-side-famhead { padding-left: 14px; min-height: var(--ssss-side-item-h); font-size: 13.5px; }
.ssss-side-link.ssss-side-famhead .ssss-side-famlabel { white-space: normal; line-height: 1.25; }
.ssss-side-link.ssss-side-famhead::before { display: none; }
.ssss-side-family.is-active > .ssss-side-link.ssss-side-famhead::before { display: block; }

/* ---------- footer: fleet status card (side.js, act=sidecounts) ---------- */
.ssss-side-foot {
	flex: 0 0 auto; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 14px; box-sizing: border-box;
	border: 0; border-top: 1px solid var(--ssss-side-line); border-radius: 0; -webkit-appearance: none; appearance: none; text-align: left;
	background: var(--ssss-side-bg-deep); color: var(--ssss-side-dim); font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer;
}
.ssss-side-foot[hidden] { display: none; }
.ssss-side-foot:hover { color: var(--ssss-side-fg); }
.ssss-side-foot:focus-visible { outline: 2px solid var(--ssss-side-accent); outline-offset: -2px; }
.ssss-side-foot-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ssss-side-faint); }
.ssss-side-foot[data-state="ok"] .ssss-side-foot-dot { background: var(--ssss-side-ok); box-shadow: 0 0 0 3px rgba(76, 201, 138, .18); }
.ssss-side-foot[data-state="warn"] .ssss-side-foot-dot { background: var(--ssss-orange-400); box-shadow: 0 0 0 3px rgba(255, 183, 87, .18); }
.ssss-side-foot[data-state="bad"] .ssss-side-foot-dot { background: var(--ssss-side-danger); box-shadow: 0 0 0 3px rgba(240, 140, 134, .18); }
.ssss-side-foot-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssss-side-foot-n { color: var(--ssss-side-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ssss-side-foot-ts { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; font-size: 10.5px; color: var(--ssss-side-faint); }

/* ---------- desktop: fixed panel + body padding; 64px icon rail with hover flyouts when collapsed ---------- */
@media (min-width: 992px) {
	body.ssss-has-side { padding-left: var(--ssss-side-w); transition: padding-left var(--ssss-dur-base) var(--ssss-ease-standard); }
	body.ssss-has-side.ssss-side-collapsed { padding-left: var(--ssss-side-w-rail); }
	body.ssss-side-collapsed .ssss-side { width: var(--ssss-side-w-rail); }
	body.ssss-side-collapsed .ssss-side-scroll { overflow: visible; }
	body.ssss-side-collapsed .ssss-side-head { padding: 0; justify-content: center; }
	body.ssss-side-collapsed .ssss-side-mark, body.ssss-side-collapsed .ssss-side-cap { display: none; }
	body.ssss-side-collapsed .ssss-side-toggle svg { transform: rotate(180deg); }
	body.ssss-side-collapsed .ssss-side-sect { justify-content: center; padding: 10px 0 6px; }
	body.ssss-side-collapsed .ssss-side-sect span { display: none; }
	body.ssss-side-collapsed .ssss-side-sect::after { flex: 0 0 24px; width: 24px; }
	body.ssss-side-collapsed .ssss-side-famhead { width: 44px; height: 44px; min-height: 0; margin: 2px auto; padding: 0; justify-content: center; border-radius: 8px; }
	body.ssss-side-collapsed .ssss-side-famhead .ssss-side-ico { flex-basis: 20px; width: 20px; height: 20px; }
	body.ssss-side-collapsed .ssss-side-famlabel, body.ssss-side-collapsed button.ssss-side-famhead::after { display: none; }
	/* rail: the family's total as a small badge on the icon button (the on/total pair lives in the flyout title) */
	body.ssss-side-collapsed .ssss-side-famhead .ssss-side-count { position: absolute; top: 3px; right: 3px; min-width: 15px; padding: 0 3px; border-radius: 8px; line-height: 15px; font-size: 9.5px; text-align: center; background: var(--ssss-side-active); color: var(--ssss-side-fg); }
	body.ssss-side-collapsed .ssss-side-famhead .ssss-side-count-on, body.ssss-side-collapsed .ssss-side-famhead .ssss-side-count-sep { display: none; }
	body.ssss-side-collapsed .ssss-side-foot { padding: 8px 0; flex-direction: column; gap: 4px; }
	body.ssss-side-collapsed .ssss-side-foot-label, body.ssss-side-collapsed .ssss-side-foot-ts { display: none; }
	body.ssss-side-collapsed .ssss-side-foot-text { font-size: 11px; }
	body.ssss-side-collapsed .ssss-side-family.is-active > .ssss-side-famhead::before { left: -10px; top: 8px; bottom: 8px; }
	/* the page list becomes a flyout beside the rail, shown on hover / keyboard focus */
	body.ssss-side-collapsed .ssss-side-family > .ssss-side-links {
		display: none; position: absolute; left: calc(100% + 6px); top: 0; width: 224px; z-index: 1030; padding: 0 0 6px;
		background: var(--ssss-side-bg); border: 1px solid var(--ssss-side-line); border-radius: 8px;
		box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
	}
	body.ssss-side-collapsed .ssss-side-family:hover > .ssss-side-links, body.ssss-side-collapsed .ssss-side-family:focus-within > .ssss-side-links { display: block; }
	body.ssss-side-collapsed .ssss-side-links::before {
		content: attr(data-label); position: static; display: block; width: auto; height: auto; margin: 0 0 4px; padding: 10px 14px 8px;
		background: none; border-bottom: 1px solid var(--ssss-side-line); color: var(--ssss-side-fg); font-size: 12.5px; font-weight: 700; white-space: nowrap;
	}
	/* invisible bridge over the 6px gap so the pointer can travel from the rail into the flyout */
	body.ssss-side-collapsed .ssss-side-links::after { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; }
	body.ssss-side-collapsed .ssss-side-link { padding-left: 14px; min-height: 38px; }
	body.ssss-side-collapsed .ssss-side-link::before { display: none; }
	body.ssss-side-collapsed .ssss-side-link.is-active { box-shadow: inset 3px 0 0 var(--ssss-side-accent); }
	.ssss-side-open { display: none; }
	.ssss-side-backdrop { display: none; }
	/* css/ssss.css:125 gives the hamburger display:inline-flex for its 44px tap target, which also beats Bootstrap's
	   .navbar-expand-lg hide on desktop — the shell's top bar has no collapsed menu to toggle there */
	body.ssss-has-side #navMenu .navbar-toggler { display: none; }
}

/* ---------- phone / tablet: off-canvas drawer ---------- */
@media (max-width: 991.98px) {
	/* the collapsed top bar's hamburger floated mid-bar on tablets (frontend audit [10075]) */
	#navMenu .navbar-toggler { margin-left: auto; }
	.ssss-side { width: min(300px, 86vw); z-index: 1045; transform: translateX(-104%); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
	body.ssss-side-drawer .ssss-side { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .35); }
	.ssss-side-toggle { display: none; }
	.ssss-side-close { display: inline-flex; }
	.ssss-side-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(11, 15, 20, .55); }
	.ssss-side-backdrop[hidden] { display: none; }
	body.ssss-side-drawer { overflow: hidden; }
	.ssss-side-open {
		display: inline-flex; align-items: center; justify-content: center; gap: 6px;
		min-width: 44px; height: 44px; padding: 0 12px; margin-right: 8px;
		border: 0; border-radius: 8px; background: var(--ssss-side-bg); color: var(--ssss-side-fg);
		font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
	}
	.ssss-side-open svg { fill: currentColor; }
}

/* ---------- top bar (only when the shell is mounted): quiet white chrome, orange as the one accent ---------- */
.ssss-brand-name { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--ssss-on-surface); vertical-align: middle; }
.ssss-brand-name::before { content: ""; flex: 0 0 4px; width: 4px; height: 18px; border-radius: 2px; background: var(--ssss-orange-500); }
.ssss-brand-info { font-size: 12.5px; font-weight: 500; color: var(--ssss-on-surface-muted); margin-left: .6rem; vertical-align: middle; }
.ssss-tenant {
	display: inline-flex; align-items: center; margin-left: .6rem; height: 22px; padding: 0 10px; vertical-align: middle;
	border: 1px solid var(--ssss-orange-500); border-radius: 999px; background: rgba(255, 163, 40, .08);
	font-size: 12px; font-weight: 600; color: var(--ssss-orange-text); white-space: nowrap;   /* [32] the SA's only cue for the tenant: was 3.33:1, now 6.23:1 */
}
/* platform-level page (pageMaster $__ssssPlatformScope): not any community's — blue, like the「全平台共用」badge */
.ssss-tenant.ssss-tenant-platform { border-color: #0d6efd; background: rgba(13, 110, 253, .08); color: #0a58ca; }
/* header tenant switcher (owner 2026-10-21): the badge as a button for an SA / an RA with several tenants (helper/tenant_switch.php) */
button.ssss-tenant-switch { gap: 5px; font-family: inherit; line-height: 1; cursor: pointer; }
button.ssss-tenant-switch:hover { background: rgba(255, 163, 40, .2); }
button.ssss-tenant-switch.ssss-tenant-platform:hover { background: rgba(13, 110, 253, .16); }
button.ssss-tenant-switch:focus-visible { outline: 2px solid var(--ssss-orange-500); outline-offset: 2px; }
button.ssss-tenant-switch svg { flex: 0 0 auto; }
button.ssss-tenant-switch .ssss-tenant-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a phone: the name shortens, the chevron stays */
.ssss-tswitch-msg { padding: 6px 2px; font-size: 13px; color: var(--ssss-on-surface-muted); }
.ssss-tswitch-list { list-style: none; margin: 0; padding: 0; }
.ssss-tswitch-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 12px; margin-bottom: 6px;
	border: 1px solid var(--ssss-border); border-radius: 8px; background: var(--ssss-surface-0); text-align: left; color: var(--ssss-on-surface); cursor: pointer; }
.ssss-tswitch-item:hover:not(:disabled), .ssss-tswitch-item:focus-visible { border-color: var(--ssss-orange-500); background: rgba(255, 163, 40, .08); }
.ssss-tswitch-item.is-current { border-color: var(--ssss-orange-500); background: rgba(255, 163, 40, .12); }
.ssss-tswitch-item:disabled { opacity: .6; cursor: progress; }
.ssss-tswitch-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ssss-tswitch-cur { padding: 1px 8px; border-radius: 999px; background: var(--ssss-orange-500); color: #fff; font-size: 11px; font-weight: 600; }
.ssss-tswitch-sub { font-size: 12px; color: var(--ssss-on-surface-muted); }
body.ssss-has-side #divMaster { margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 12px !important; padding-right: 12px !important; }  /* ≥ the .row's 12px negative margin, or the page scrolls sideways */
body.ssss-has-side #divMaster > .row { align-items: center; min-height: 48px; border-bottom-color: var(--ssss-border) !important; }
body.ssss-has-side #navMenu.navbar { padding: 0 12px; background: var(--ssss-surface-0); border-bottom: 1px solid var(--ssss-border); }
body.ssss-has-side #navMenu .navbar-text { padding-top: 0; padding-bottom: 0; }  /* the hide-menu icon's wrapper must not inflate the 44px bar */
body.ssss-has-side #navMenu .navbar-nav .nav-item .nav-link {
	position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px;
	border-right: 0; font-size: 14px; border-radius: 0;
}
body.ssss-has-side #navMenu .navbar-nav .nav-item .nav-link:hover { background: var(--ssss-surface-1); }
body.ssss-has-side #navMenu .navbar-nav .nav-item .nav-link.active::before {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ssss-orange-500);
}
.ssss-nav-ico { flex: 0 0 16px; width: 16px; height: 16px; fill: currentColor; color: var(--ssss-on-surface-muted); }
.nav-link.active .ssss-nav-ico { color: var(--ssss-orange-600); }
body.ssss-has-side #navMenu .dropdown-menu { border-color: var(--ssss-border); box-shadow: var(--ssss-elev-2); }

/* ---------- top bar fit (2026-10-06): never wider than the content column ----------
   Beside the 236px panel the full Chinese bar (eight sections + 語言 + the hide icon, as an SA sees it) needs a ~1310px
   window, ~1370 with both count bubbles, so below that it pushed the page up to 220px sideways (111px at 1100) and the
   shrinking flex items broke a label one character per line (指/揮/中/心; at 1280 still 2 and 3 lines). Two layers:
   1. ≥992: a label never breaks, and the section list wraps to a second row when it still does not fit (English labels,
      a narrow window). When the bar fits - Chinese from 1366 - both rules change nothing.
   2. 992-1365: compact metrics (13px labels, 6px side padding, the caret riding the 4px flex gap) and 語言 shown as its
      icon + caret, the word kept for screen readers (plus a title tooltip in menu.php). The full Chinese bar then fits
      one row from 992; the two count bubbles can push the last section to row two until ~1060.
   ≥1366 (the common laptop width up) keeps its metrics; only the full SA bar with both bubbles still takes two rows
   there, up to ~1370. */
@media (min-width: 992px) {
	body.ssss-has-side #navMenu #navbarSupportedContent { min-width: 0; }
	body.ssss-has-side #navMenu #navbarSupportedContent > .navbar-nav:first-child { flex-wrap: wrap; min-width: 0; }
	body.ssss-has-side #navMenu .navbar-nav .nav-item .nav-link { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1365.98px) {
	body.ssss-has-side #navMenu.navbar { padding: 0 6px; }  /* + the first section's 6px = the banner's 12px text inset */
	/* pageMaster.php's `.dropdown { margin-right: 10px }` is meant for the account menu but lands on every dropdown section */
	body.ssss-has-side #navMenu .navbar-nav .nav-item { margin-right: 0; }
	body.ssss-has-side #navMenu .navbar-nav .nav-item .nav-link { gap: 4px; padding: 0 6px; font-size: 13px; }
	body.ssss-has-side #navMenu .navbar-nav .nav-item .nav-link.active::before { left: 6px; right: 6px; }
	body.ssss-has-side #navMenu .navbar-nav .dropdown-toggle::after { margin-left: 0; }
	body.ssss-has-side #navMenu .nav3-count { margin-left: 0; }
	body.ssss-has-side #navDD-lang > .ssss-text-black {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
		overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
	body.ssss-has-side #navMenu #divMenuHide { margin-left: 4px !important; }  /* menu.php writes margin-left:1rem inline */
}

/* ---------- wall mode / print: no chrome ---------- */
body.cc-wall .ssss-side, body.cc-wall .ssss-side-open, body.cc-wall .ssss-side-backdrop { display: none !important; }
body.cc-wall.ssss-has-side { padding-left: 0 !important; }
@media print { .ssss-side, .ssss-side-open, .ssss-side-backdrop { display: none !important; } body.ssss-has-side { padding-left: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .ssss-side, body.ssss-has-side, .ssss-side-toggle svg, button.ssss-side-famhead::after { transition: none !important; } }

/* ---------- first-login tour (js/ssss/tour.js; first-run wizard part C, 2026-10-05) ----------
   A non-modal dialog plus a highlight ring around the step's anchor. The ring's 200vmax box-shadow dims the rest of
   the page but takes no pointer events. Both sit at 1070: above the sidebar (1025) / drawer (1045) / Bootstrap modal
   (1055 - the tour closes itself when a modal opens), below tooltips (1080) and the toast (99999).
   While it runs (body.ssss-tour-on) a layer the user opens from an anchor - a navbar dropdown, the account menu, the
   phone drawer with its backdrop - is lifted to 1071+, over the dim and the dialog, until it closes again. */
.ssss-tour-ring {
	position: fixed; z-index: 1069; box-sizing: border-box; pointer-events: none;
	border-radius: var(--ssss-radius-sm);
	box-shadow: 0 0 0 3px var(--ssss-orange-500), 0 0 0 200vmax rgba(var(--ssss-on-surface-rgb), .45);
	transition: top var(--ssss-dur-base) var(--ssss-ease-standard), left var(--ssss-dur-base) var(--ssss-ease-standard),
		width var(--ssss-dur-base) var(--ssss-ease-standard), height var(--ssss-dur-base) var(--ssss-ease-standard);
}
.ssss-tour-ring.is-center { box-shadow: 0 0 0 200vmax rgba(var(--ssss-on-surface-rgb), .45); transition: none; }
.ssss-tour {
	position: fixed; z-index: 1070; box-sizing: border-box; width: min(360px, calc(100vw - 32px));
	padding: 16px 18px 14px; background: var(--ssss-surface-0); color: var(--ssss-on-surface);
	border: 1px solid var(--ssss-border); border-top: 3px solid var(--ssss-orange-500); border-radius: var(--ssss-radius-md);
	box-shadow: var(--ssss-elev-4); font-size: 14px; line-height: 1.5; text-align: left;
}
.ssss-tour:focus { outline: none; }
.ssss-tour[hidden], .ssss-tour-ring[hidden], .ssss-tour [hidden] { display: none !important; }
.ssss-tour-count { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--ssss-on-surface-muted); }
.ssss-tour-title { margin: 4px 0 6px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ssss-on-surface); }
.ssss-tour-body { margin: 0; color: var(--ssss-on-surface); }
.ssss-tour-tenant { margin: 10px 0 0; padding-left: 8px; border-left: 3px solid var(--ssss-orange-500); font-weight: 600; color: var(--ssss-on-surface); }
.ssss-tour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ssss-tour-spacer { flex: 1 1 auto; }
.ssss-tour-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px;
	border: 1px solid var(--ssss-border-strong); border-radius: var(--ssss-radius-sm); background: var(--ssss-surface-0);
	color: var(--ssss-on-surface); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer;
	white-space: nowrap;   /* a phone used to break a button label over two lines (frontend audit [10044]) */
}
.ssss-tour-btn:hover { background: var(--ssss-surface-2); }
.ssss-tour-btn:focus-visible { outline: 2px solid var(--ssss-focus); outline-offset: 2px; }
.ssss-tour-btn--primary { border-color: var(--ssss-orange-500); background: var(--ssss-orange-500); color: var(--ssss-on-orange); }
.ssss-tour-btn--primary:hover { background: var(--ssss-orange-400); }
.ssss-tour-btn--link { padding: 0 6px; border-color: transparent; background: transparent; color: var(--ssss-on-surface-muted); font-weight: 500; }
.ssss-tour-btn--link:hover { background: transparent; color: var(--ssss-on-surface); text-decoration: underline; }
/* page tour only: link to the platform tour, next to Skip */
.ssss-tour-global { padding: 0 6px; }
/* top-left launcher in the banner (pageMaster #ssssTourBtn): this page's tour, or the platform tour */
.ssss-tour-launch {
	display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin-left: 8px; padding: 0 10px; vertical-align: middle;
	border: 1px solid var(--ssss-border-strong); border-radius: var(--ssss-radius-sm); background: var(--ssss-surface-0);
	color: var(--ssss-on-surface-muted); font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; cursor: pointer;
}
.ssss-tour-launch:hover { background: var(--ssss-surface-2); color: var(--ssss-on-surface); }
.ssss-tour-launch:focus-visible { outline: 2px solid var(--ssss-focus); outline-offset: 2px; }
/* the user-manual download beside it (#ssssManualBtn) is a link in the same dress */
a.ssss-tour-launch, a.ssss-tour-launch:hover, a.ssss-tour-launch:focus { text-decoration: none; }
/* the two launchers travel together when the banner wraps: never the manual alone on a second line */
.ssss-banner-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; vertical-align: middle; white-space: nowrap; }
.ssss-banner-tools .ssss-tour-launch { margin-left: 0; }
/* desktop shell: the banner's right half (weather, bells, account) takes only the width it needs, so a long
   tenant badge and the launchers still fit on one line beside the system name */
@media (min-width: 992px) { body.ssss-has-side #divMaster > .row > .col + .col { flex: 0 0 auto; width: auto; } }
@media (max-width: 575.98px) { .ssss-tour-launch { min-height: 36px; padding: 0 8px; } .ssss-tour-launch-txt { display: none; } }
/* phone top bar (frontend audit [88]): the system name wrapped to two lines and the two halves split 50/50, each
   wrapping again (140 px at 375). The name stays on one line with an ellipsis, the right half (weather, bells,
   account) takes the width it needs, the left half the rest (123 px). Nothing is moved or hidden. */
@media (max-width: 575.98px) {
	body.ssss-has-side #divMaster > .row > #divBanner { flex: 1 1 0; min-width: 0; }
	body.ssss-has-side #divMaster > .row > #divBanner + .col { flex: 0 0 auto; width: auto; max-width: 58%; }
	#divBanner .ssss-brand-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
	#divBanner .ssss-brand-name::before { display: inline-block; vertical-align: -3px; margin-right: 8px; }
	#divBanner .ssss-tenant { margin-left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
	#divBanner .ssss-banner-tools { margin-left: 6px; }
}
/* polite status region that reads each later step out: off-screen, still in the accessibility tree */
.ssss-tour-live {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* menus a step points at stay usable: what opens from an anchor goes over the dim and the dialog */
body.ssss-tour-on #navMenu .dropdown-menu, body.ssss-tour-on #divUserDropDown .dropdown-content { z-index: 1071; }
/* phone / tablet: docked bottom-centre (the anchors live in the top bar); 44px tap targets. js/ssss/tour.js sets
   top / left / width from window.visualViewport: a page wider than the phone made the layout viewport (what
   bottom:16px measured from) bigger than the screen and the dialog landed off-screen (frontend audit [10039]). */
@media (max-width: 991.98px) {
	.ssss-tour.is-docked { right: auto; bottom: auto; transform: none; }
	.ssss-tour.is-docked .ssss-tour-btn { min-height: 44px; }
	/* the drawer step 3 tells the user to open: drawer over its backdrop over the tour; closing it shows the tour again */
	body.ssss-tour-on .ssss-side-backdrop { z-index: 1071; }
	body.ssss-tour-on .ssss-side { z-index: 1072; }
}
/* Windows High Contrast / forced colours drop every box-shadow (ring and dim): an outline, coloured by the
   system palette (currentColor), still marks the anchor */
@media (forced-colors: active) {
	.ssss-tour-ring { outline: 3px solid; outline-offset: 0; }
	.ssss-tour-ring.is-center { outline: 0; }
}
body.cc-wall .ssss-tour, body.cc-wall .ssss-tour-ring { display: none !important; }
@media print { .ssss-tour, .ssss-tour-ring { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ssss-tour-ring { transition: none !important; } }