/*
 * The organization chart: a canvas of cards you can pan, zoom, fold and search.
 *
 * The card, the toolbar, the mini-map in the corner and the zoom buttons. The chart itself
 * is drawn by assets/js/orgchart.js; these are the clothes it wears.
 */

.cw-oc{
	--oc-a:var(--accent,#6c4ef5);
	--oc-ink:var(--ink,#1d2327);
	--oc-muted:var(--muted,#646970);
	--oc-line:var(--line,#e2e4e7);
	--oc-soft:var(--soft,#f2f2f5);
	--oc-card:var(--card,var(--white,#fff));
	--oc-r:12px;
	position:relative;
	color:var(--oc-ink);
}

/* ------------------------------------------------------------------ the toolbar */

.cw-oc__bar{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px 14px;
	padding:12px 14px;
	border:1px solid var(--oc-line);
	border-radius:var(--oc-r);
	background:var(--oc-card);
}

.cw-oc__find{
	position:relative;
	display:flex;
	align-items:center;
	gap:8px;
	flex:1 1 240px;
	min-width:200px;
}

.cw-oc__findic{
	position:absolute;
	left:11px;
	top:50%;
	transform:translateY(-50%);
	display:grid;
	place-items:center;
	color:var(--oc-muted);
	pointer-events:none;
}

.cw-oc__findic svg{ width:16px; height:16px; }

.cw-oc__find input{
	flex:1 1 auto;
	min-width:0;
	height:38px;
	padding:0 12px 0 34px;
	border:1px solid var(--oc-line);
	border-radius:9px;
	background:var(--oc-soft);
	color:var(--oc-ink);
	font:inherit;
	font-size:14px;
	line-height:1;
}

.cw-oc__find input:focus{
	outline:none;
	border-color:var(--oc-a);
	box-shadow:0 0 0 3px rgba(108,78,245,.14);
}

.cw-oc__count{
	flex:none;
	min-width:62px;
	font-size:12px;
	color:var(--oc-muted);
	text-align:right;
}

.cw-oc__group{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	color:var(--oc-muted);
}

.cw-oc__group select{
	height:38px;
	padding:0 10px;
	border:1px solid var(--oc-line);
	border-radius:9px;
	background:var(--oc-card);
	color:var(--oc-ink);
	font:inherit;
	font-size:13.5px;
}

.cw-oc__group select:focus{
	outline:none;
	border-color:var(--oc-a);
}

.cw-oc__acts{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px;
}

.cw-oc__btn{
	height:34px;
	padding:0 12px;
	border:1px solid var(--oc-line);
	border-radius:8px;
	background:var(--oc-card);
	color:var(--oc-ink);
	font:inherit;
	font-size:13px;
	font-weight:500;
	cursor:pointer;
	white-space:nowrap;
}

.cw-oc__btn:hover{
	border-color:var(--oc-a);
	color:var(--oc-a);
}

.cw-oc__btn:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(108,78,245,.18);
}

.cw-oc__btn--icon{
	width:34px;
	padding:0;
	display:grid;
	place-items:center;
}

.cw-oc__btn--icon svg{ width:16px; height:16px; }

.cw-oc__btn.is-on{
	background:var(--oc-a);
	border-color:var(--oc-a);
	color:#fff;
}

/* ------------------------------------------------------------------ the canvas */

.cw-oc__view{
	position:relative;
	height:640px;
	margin-top:14px;
	border:1px solid var(--oc-line);
	border-radius:var(--oc-r);
	background:var(--oc-soft);
	background-image:radial-gradient(circle,rgba(16,24,40,.08) 1px,transparent 1px);
	background-size:22px 22px;
	overflow:hidden;
	cursor:grab;
	touch-action:none;
	overscroll-behavior:contain;
}

.cw-oc__view.is-dragging{ cursor:grabbing; }

.cw-oc__view:fullscreen{
	height:100vh;
	border-radius:0;
}

.cw-oc__stage{
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	transform-origin:0 0;
}

.cw-oc__lines{
	position:absolute;
	top:0;
	left:0;
	overflow:visible;
	pointer-events:none;
}

.cw-oc__line{
	fill:none;
	stroke:#c3c8d2;
	stroke-width:1.6;
	stroke-linecap:round;
}

.cw-oc__cards{
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
}

/* ------------------------------------------------------------------ a card */

.cw-oc__card{
	position:absolute;
	left:0;
	top:0;
	width:236px;
	height:92px;
	box-sizing:border-box;
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:14px 14px 12px;
	background:var(--oc-card);
	border:1px solid var(--oc-line);
	border-radius:var(--oc-r);
	box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.06);
	color:var(--oc-ink);
	transition:box-shadow .15s ease,border-color .15s ease,opacity .15s ease;
}

.cw-oc__card:hover{
	box-shadow:0 2px 5px rgba(16,24,40,.07),0 12px 26px rgba(16,24,40,.10);
}

.cw-oc__av{
	flex:none;
	width:40px;
	height:40px;
	border-radius:50%;
	background:var(--oc-a);
	background-size:cover;
	background-position:center;
	color:#fff;
	display:grid;
	place-items:center;
	font-size:13px;
	font-weight:600;
	line-height:1;
}

.cw-oc__flag{
	position:absolute;
	left:40px;
	top:40px;
	width:20px;
	height:20px;
	border-radius:50%;
	background:var(--oc-card);
	border:1px solid var(--oc-line);
	display:grid;
	place-items:center;
	font-size:11px;
	line-height:1;
	overflow:hidden;
}

.cw-oc__txt{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}

.cw-oc__name{
	font-size:14px;
	font-weight:700;
	line-height:1.25;
	color:var(--oc-ink);
	text-decoration:none;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.cw-oc__name:hover{
	color:var(--oc-a);
	text-decoration:underline;
}

.cw-oc__title{
	font-size:12px;
	line-height:1.3;
	color:var(--oc-muted);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.cw-oc__dept{
	align-self:flex-start;
	max-width:100%;
	margin-top:2px;
	padding:1px 8px;
	border-radius:999px;
	background:rgba(108,78,245,.10);
	background:color-mix(in srgb,var(--oc-a) 12%,transparent);
	color:var(--oc-a);
	font-size:11px;
	line-height:1.5;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* The expander under a card with people under it. */
.cw-oc__pill{
	position:absolute;
	left:50%;
	top:calc(100% + 6px);
	transform:translateX(-50%);
	height:24px;
	padding:0 11px;
	border:1px solid var(--oc-line);
	border-radius:999px;
	background:var(--oc-card);
	color:var(--oc-muted);
	font:inherit;
	font-size:11.5px;
	font-weight:600;
	line-height:1;
	white-space:nowrap;
	cursor:pointer;
	box-shadow:0 1px 2px rgba(16,24,40,.06);
}

.cw-oc__pill:hover{
	border-color:var(--oc-a);
	color:var(--oc-a);
}

.cw-oc__pill:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(108,78,245,.18);
}

/* A department or a legal entity: the head of a column. */
.cw-oc__card--group{
	height:44px;
	align-items:center;
	padding:0 14px;
	background:var(--oc-soft);
}

.cw-oc__gname{
	font-size:13px;
	font-weight:700;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.cw-oc__gcount{
	flex:none;
	margin-left:10px;
	padding:1px 8px;
	border:1px solid var(--oc-line);
	border-radius:999px;
	background:var(--oc-card);
	color:var(--oc-muted);
	font-size:11.5px;
	font-weight:600;
}

/* What the search found. */
.cw-oc__card.is-path{
	border-color:rgba(108,78,245,.45);
}

.cw-oc__card.is-hit{
	border-color:var(--oc-a);
	box-shadow:0 0 0 3px rgba(108,78,245,.16),0 8px 20px rgba(16,24,40,.10);
}

.cw-oc__card.is-dim{
	opacity:.3;
}

/* ------------------------------------------------------------------ the mini-map */

.cw-oc__mini{
	position:absolute;
	left:14px;
	bottom:14px;
	width:176px;
	height:118px;
	border:1px solid var(--oc-line);
	border-radius:10px;
	background:rgba(255,255,255,.94);
	box-shadow:0 4px 14px rgba(16,24,40,.10);
	overflow:hidden;
	cursor:pointer;
}

.cw-oc__mini svg{
	display:block;
	width:100%;
	height:100%;
}

.cw-oc__mnode{ fill:#b9bec9; }

.cw-oc__mgroup{ fill:var(--oc-a); opacity:.5; }

.cw-oc__mwin{
	fill:rgba(108,78,245,.14);
	stroke:var(--oc-a);
	stroke-width:1.2;
}

/* ------------------------------------------------------------------ the zoom buttons */

.cw-oc__zoom{
	position:absolute;
	right:14px;
	bottom:14px;
	display:flex;
	align-items:center;
	gap:4px;
	padding:5px;
	border:1px solid var(--oc-line);
	border-radius:10px;
	background:rgba(255,255,255,.94);
	box-shadow:0 4px 14px rgba(16,24,40,.10);
}

.cw-oc__zbtn{
	width:30px;
	height:30px;
	display:grid;
	place-items:center;
	border:1px solid transparent;
	border-radius:7px;
	background:transparent;
	color:var(--oc-ink);
	cursor:pointer;
}

.cw-oc__zbtn:hover{
	background:var(--oc-soft);
}

.cw-oc__zbtn:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(108,78,245,.18);
}

.cw-oc__zbtn svg{ width:15px; height:15px; }

.cw-oc__pct{
	min-width:52px;
	height:30px;
	border:1px solid var(--oc-line);
	border-radius:7px;
	background:transparent;
	color:var(--oc-ink);
	font:inherit;
	font-size:12px;
	font-weight:600;
	cursor:pointer;
}

.cw-oc__pct:hover{
	border-color:var(--oc-a);
	color:var(--oc-a);
}

/* ------------------------------------------------------------------ the notes */

.cw-oc__empty{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	margin:0;
	padding:9px 16px;
	border:1px solid var(--oc-line);
	border-radius:999px;
	background:var(--oc-card);
	color:var(--oc-muted);
	font-size:13px;
	box-shadow:0 4px 14px rgba(16,24,40,.08);
}

.cw-oc__nojs{
	margin-top:14px;
	padding:18px 22px;
	border:1px solid var(--oc-line);
	border-radius:var(--oc-r);
	background:var(--oc-card);
}

.cw-oc__nojs ul{ list-style:none; margin:0; padding:0 0 0 18px; }
.cw-oc__nojs > ul{ padding-left:0; }
.cw-oc__nojs li{ margin:4px 0; }

/* ------------------------------------------------------------------ small screens */

@media (max-width:760px){
	.cw-oc__view{ height:480px; }
	.cw-oc__mini{ width:132px; height:90px; }
	.cw-oc__bar{ padding:10px; }
	.cw-oc__count{ min-width:0; }
}

/* ------------------------------------------------------------------ printing */

@media print{
	.cw-oc__bar,
	.cw-oc__mini,
	.cw-oc__zoom,
	.cw-oc__empty{ display:none !important; }

	.cw-oc__view{
		height:var(--oc-print-h,auto) !important;
		overflow:visible !important;
		border:0;
		background:#fff;
		background-image:none;
	}

	.cw-oc__stage{
		transform:scale(var(--oc-print-k,1)) !important;
		transform-origin:top left !important;
	}

	.cw-oc__card{
		box-shadow:none !important;
		break-inside:avoid;
	}
}

/* Deel polish: avatar circles in a soft tint instead of solid accent, name in the accent like Deel's linked names. */
.cw-oc__card{ border-radius:12px; }
.cw-oc__av.is-tint{ background:hsl(var(--h) 70% 92%); color:hsl(var(--h) 45% 32%); }
[data-theme="dark"] .cw-oc__av.is-tint{ background:hsl(var(--h) 35% 24%); color:hsl(var(--h) 80% 86%); }