/* ClickLogic demo strip: a thin bar across the top of every demo screen (the products'
 * own apps, the desk, website pages). Same look on every product: a deep ink strip with
 * light menus and dialogs, as on the demo sign-in page. Everything is prefixed .cldemo-.
 *
 * Making room for it without covering the app:
 *   cldemo-spa   the products' single-page apps: <body> starts below the strip and becomes
 *                the containing block of the app's fixed elements (overlays, drawers, menus
 *                move down with it); full-height layouts (h-screen) lose the strip's height
 *   cldemo-desk  Frappe's desk scrolls the window: the page is pushed down and the desk's
 *                sticky navbar and page head stick below the strip
 *   cldemo-web   other Frappe pages: pushed down
 */
html { --cldemo-h: 40px; }
@media (max-width: 720px) { html { --cldemo-h: 46px; } }

html.cldemo-spa body {
	position: fixed !important;
	top: var(--cldemo-h) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	margin: 0 !important;
	transform: translateZ(0);
	overflow: auto;
}
html.cldemo-spa .h-screen { height: calc(100vh - var(--cldemo-h)) !important; }
html.cldemo-spa .min-h-screen { min-height: calc(100vh - var(--cldemo-h)) !important; }
html.cldemo-spa .h-dvh { height: calc(100dvh - var(--cldemo-h)) !important; }
html.cldemo-spa .min-h-\[100dvh\], html.cldemo-spa .min-h-dvh { min-height: calc(100dvh - var(--cldemo-h)) !important; }
html.cldemo-desk body, html.cldemo-web body { padding-top: var(--cldemo-h) !important; }
html.cldemo-desk .navbar.sticky-top, html.cldemo-desk header.navbar { top: var(--cldemo-h) !important; }
html.cldemo-desk .page-head { top: calc(var(--navbar-height, 48px) + var(--cldemo-h)) !important; }

/* the strip's own copy of Geist (a unique family name, so a product's own fonts are untouched) */
@font-face {
	font-family: "ClickLogic Geist";
	src: url("/assets/clicklogic_demo/fonts/geist-latin.woff2") format("woff2");
	font-weight: 100 900; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* menus, the guide, dialogs: light, as on the demo sign-in page */
.cldemo-root {
	--cl-ink: #0f1a2b;
	--cl-panel: #ffffff;
	--cl-panel-2: #f6f8fa;
	--cl-canvas: #f3f5f8;
	--cl-line: #e3e7ed;
	--cl-line-2: #d1d7e0;
	--cl-fg: #0f1a2b;
	--cl-text: #3a4557;
	--cl-mute: #667085;
	--cl-faint: #8b94a4;
	--cl-signal: #0891a3;
	--cl-warn: #b45309;
	--cl-pop: 0 16px 40px -12px rgba(15, 26, 43, 0.24), 0 2px 6px rgba(15, 26, 43, 0.07);
	--cl-font: "ClickLogic Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font: 13px/1.45 var(--cl-font);
	color: var(--cl-text);
	letter-spacing: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
.cldemo-root *, .cldemo-root *::before, .cldemo-root *::after { box-sizing: border-box; }
.cldemo-root button { font: inherit; color: inherit; }
.cldemo-root :focus-visible { outline: 2px solid var(--cl-signal); outline-offset: 2px; }
.cldemo-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the strip: deep ink, so it reads as the demo's frame, not part of the product ---------- */
.cldemo-strip {
	--cl-fg: #eef2f7;
	--cl-mute: #9ba6b7;
	--cl-faint: #6f7b8e;
	--cl-line: rgba(255, 255, 255, 0.13);
	--cl-line-2: rgba(255, 255, 255, 0.2);
	--cl-signal: #22d3e6;
	position: fixed; top: 0; left: 0; right: 0; height: var(--cldemo-h);
	z-index: 2147483000;
	display: flex; align-items: center; gap: 12px;
	padding: 0 12px 0 14px;
	background: var(--cl-ink);
	color: var(--cl-fg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 1px 3px rgba(15, 26, 43, 0.22);
}
.cldemo-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.cldemo-mark { width: 18px; height: 18px; flex: none; }
.cldemo-tag {
	padding: 4px 7px; border-radius: 5px;
	font: 600 10.5px/1 var(--cl-font); letter-spacing: 0.12em;
	color: #a5f3fc; background: rgba(34, 211, 230, 0.14); box-shadow: inset 0 0 0 1px rgba(34, 211, 230, 0.22);
}
.cldemo-sep { width: 1px; height: 16px; background: var(--cl-line-2); flex: none; }
.cldemo-note { color: var(--cl-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cldemo-note b { color: var(--cl-fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.cldemo-root.is-warn .cldemo-note b { color: #fbbf24; }

.cldemo-ctrls { display: flex; align-items: center; gap: 6px; flex: none; }
.cldemo-pick { position: relative; }
.cldemo-pbtn, .cldemo-tbtn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 28px; padding: 0 9px; border-radius: 7px; cursor: pointer;
	background: rgba(255, 255, 255, 0.04); border: 1px solid var(--cl-line);
	color: var(--cl-fg);
	transition: border-color 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}
.cldemo-pbtn:hover, .cldemo-tbtn:hover { border-color: var(--cl-line-2); background: rgba(255, 255, 255, 0.08); }
.cldemo-pbtn[aria-expanded="true"], .cldemo-tbtn[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.1); }
.cldemo-pbtn .cldemo-k { color: var(--cl-faint); font-size: 11.5px; }
.cldemo-pbtn .cldemo-v { font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.cldemo-pbtn .cldemo-v small { color: var(--cl-mute); font-weight: 400; font-size: 12px; }
.cldemo-pbtn .cldemo-chev { width: 13px; height: 13px; color: var(--cl-mute); }
.cldemo-pmark { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.cldemo-av {
	width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center;
	font: 600 9px/1 var(--cl-font); letter-spacing: 0.02em; color: #fff; background: var(--cldemo-acc, #2a6fb0);
}
.cldemo-tbtn { color: var(--cl-mute); }
.cldemo-tbtn:hover { color: var(--cl-fg); }
.cldemo-exit:hover { border-color: rgba(248, 113, 113, 0.5); color: #fecaca; }

/* ---------- menus ---------- */
.cldemo-menu {
	position: fixed; top: calc(var(--cldemo-h) + 6px);
	min-width: 260px; max-width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto;
	margin: 0; padding: 6px; list-style: none;
	background: var(--cl-panel); border: 1px solid var(--cl-line); border-radius: 11px;
	box-shadow: var(--cl-pop);
	z-index: 2147483001;
}
.cldemo-opt { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; cursor: pointer; color: var(--cl-fg); }
.cldemo-opt.is-active { background: var(--cl-canvas); }
.cldemo-opt .cldemo-ot { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cldemo-opt .cldemo-om { font-weight: 500; font-size: 13.5px; color: var(--cl-fg); }
.cldemo-opt .cldemo-os { color: var(--cl-mute); font-size: 12px; line-height: 1.35; }
.cldemo-opt .cldemo-tick { color: var(--cl-ink); visibility: hidden; }
.cldemo-opt[aria-selected="true"] .cldemo-tick { visibility: visible; }
.cldemo-opt .cldemo-av {
	width: 28px; height: 28px; font-size: 10.5px;
	color: color-mix(in srgb, var(--cldemo-acc, #2a6fb0) 72%, #0f1a2b);
	background: color-mix(in srgb, var(--cldemo-acc, #2a6fb0) 13%, #fff);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cldemo-acc, #2a6fb0) 22%, transparent);
}
.cldemo-opt .cldemo-pmark { width: 24px; height: 24px; border-radius: 6px; }
.cldemo-mfoot { padding: 8px 10px 4px; color: var(--cl-faint); font-size: 11.5px; border-top: 1px solid var(--cl-line); margin-top: 4px; }

/* ---------- guide panel ---------- */
.cldemo-panel {
	position: fixed; top: calc(var(--cldemo-h) + 6px); right: 10px;
	width: 380px; max-width: calc(100vw - 16px); max-height: calc(100vh - var(--cldemo-h) - 20px);
	display: flex; flex-direction: column;
	background: var(--cl-panel); border: 1px solid var(--cl-line); border-radius: 13px;
	box-shadow: var(--cl-pop);
	overflow: hidden; z-index: 2147483001;
}
.cldemo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--cl-line); }
.cldemo-kicker { color: var(--cl-mute); font-size: 11.5px; font-weight: 500; }
.cldemo-title { font-size: 15px; font-weight: 600; margin-top: 2px; color: var(--cl-fg); }
.cldemo-body { overflow-y: auto; padding: 12px 16px 14px; overscroll-behavior: contain; }
.cldemo-note-box { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: var(--cl-panel-2); border: 1px solid var(--cl-line); border-left: 3px solid var(--cl-signal); font-size: 12.5px; color: var(--cl-text); }
.cldemo-sec { padding: 10px 0; border-top: 1px solid var(--cl-line); }
.cldemo-sec:first-of-type { border-top: 0; }
.cldemo-h3 { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cl-mute); }
.cldemo-h2 { margin: 6px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--cl-fg); }
.cldemo-p { margin: 0 0 8px; color: var(--cl-text); }
.cldemo-where { margin: 0 0 6px; color: var(--cl-mute); font-size: 12px; }
.cldemo-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cldemo-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer; text-decoration: none;
	background: var(--cl-panel); border: 1px solid var(--cl-line-2); color: var(--cl-fg);
	font-size: 12.5px; font-weight: 500;
	box-shadow: 0 1px 2px rgba(15, 26, 43, 0.05);
}
.cldemo-btn:hover { border-color: #b4bdca; background: var(--cl-canvas); color: var(--cl-fg); text-decoration: none; }
.cldemo-primary { background: var(--cl-ink); border-color: var(--cl-ink); color: #fff; }
.cldemo-primary:hover { background: #1d2c45; border-color: #1d2c45; color: #fff; }
.cldemo-quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--cl-mute); }
.cldemo-x { min-height: 28px; width: 28px; padding: 0; background: transparent; border-color: transparent; box-shadow: none; color: var(--cl-mute); }
.cldemo-mini { min-height: 24px; padding: 0 8px; font-size: 11.5px; }
.cldemo-guide { border: 1px solid var(--cl-line); border-radius: 10px; padding: 0 10px; margin: 6px 0; background: var(--cl-panel); }
.cldemo-guide[open] { padding-bottom: 10px; background: var(--cl-panel-2); }
.cldemo-guide-t { cursor: pointer; padding: 9px 0; font-weight: 600; color: var(--cl-fg); list-style-position: inside; }
.cldemo-steps { margin: 0 0 8px; padding-left: 18px; color: var(--cl-text); }
.cldemo-steps li { margin: 3px 0; }
.cldemo-ai { border: 1px solid var(--cl-line); border-radius: 10px; padding: 10px; margin: 6px 0; background: var(--cl-panel); }
.cldemo-ai-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--cl-fg); margin-bottom: 4px; }
.cldemo-badge { flex: none; font: 600 10px/1 var(--cl-font); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; }
.cldemo-badge-live { background: #ecfeff; color: #0e7490; box-shadow: inset 0 0 0 1px #a5f3fc; }
.cldemo-badge-simulated { background: #fffbeb; color: #b45309; box-shadow: inset 0 0 0 1px #fde68a; }
.cldemo-badge-rules { background: #eef2ff; color: #4338ca; box-shadow: inset 0 0 0 1px #c7d2fe; }
.cldemo-badge-planned { background: var(--cl-canvas); color: var(--cl-mute); box-shadow: inset 0 0 0 1px var(--cl-line); }
.cldemo-try { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.cldemo-try code { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 6px; background: var(--cl-canvas); color: var(--cl-fg); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: normal; word-break: break-word; border: 1px solid var(--cl-line); }
.cldemo-mobile-only { display: none; }

/* ---------- toast and dialogs ---------- */
.cldemo-toast {
	position: fixed; top: calc(var(--cldemo-h) + 8px); left: 50%; transform: translateX(-50%);
	display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); width: max-content;
	padding: 9px 10px 9px 14px; border-radius: 9px; z-index: 2147483001;
	background: var(--cl-panel); color: var(--cl-text);
	border: 1px solid var(--cl-line); border-left: 3px solid var(--cl-warn);
	box-shadow: var(--cl-pop);
}
.cldemo-modal-bg { position: fixed; inset: 0; z-index: 2147483002; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 26, 43, 0.45); backdrop-filter: blur(2px); }
.cldemo-modal { width: 440px; max-width: 100%; padding: 22px 22px 18px; border-radius: 14px; background: var(--cl-panel); border: 1px solid var(--cl-line); box-shadow: 0 24px 64px -16px rgba(15, 26, 43, 0.4); color: var(--cl-text); }
.cldemo-modal .cldemo-row { margin-top: 14px; }
.cldemo-busy { position: fixed; inset: 0; z-index: 2147483002; display: grid; place-items: center; background: rgba(243, 245, 248, 0.82); color: var(--cl-fg); font-size: 14px; }
.cldemo-busy span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--cl-panel); border: 1px solid var(--cl-line); box-shadow: var(--cl-pop); }
.cldemo-busy i { width: 8px; height: 8px; border-radius: 2px; background: var(--cl-signal); animation: cldemo-blink 1s ease-in-out infinite; }
@keyframes cldemo-blink { 50% { opacity: 0.25; } }

/* ---------- small screens: DEMO, product, person and a menu ---------- */
@media (max-width: 1100px) {
	.cldemo-pbtn .cldemo-k { display: none; }
	.cldemo-pbtn .cldemo-v small { display: none; }
}
@media (max-width: 720px) {
	.cldemo-strip { gap: 8px; padding: 0 8px 0 10px; }
	.cldemo-sep, .cldemo-note, .cldemo-tlabel { display: none; }
	.cldemo-id { flex: none; }
	.cldemo-ctrls { flex: 1; justify-content: flex-end; min-width: 0; }
	.cldemo-pick { min-width: 0; }
	.cldemo-pbtn { height: 32px; padding: 0 8px; max-width: 100%; }
	.cldemo-pbtn .cldemo-v { max-width: 96px; }
	.cldemo-person .cldemo-v { display: none; }
	.cldemo-tbtn { height: 32px; padding: 0 9px; }
	.cldemo-exit { display: none; }
	.cldemo-mobile-only { display: block; }
	.cldemo-menu { left: 8px !important; right: 8px !important; max-width: none; min-width: 0; }
	.cldemo-panel { left: 8px; right: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cldemo-root * { transition: none !important; animation: none !important; }
}
@media print {
	.cldemo-root { display: none !important; }
	html.cldemo-spa body { position: static !important; transform: none; overflow: visible; }
	html.cldemo-desk body, html.cldemo-web body { padding-top: 0 !important; }
}