/*
 * Companies, legal entities and the people employed by them.
 *
 * The Companies page: one card per company, a table of the entities that company runs in, and the
 * people who are not in an entity yet. The Organization chart page reuses the chart styles of the
 * team page.
 */

.cw-ent{
	--cw-a:var(--accent,#6c4ef5);
	--cw-ink:var(--ink,#1d2327);
	--cw-muted:var(--muted,#646970);
	--cw-line:var(--line,#e2e4e7);
	--cw-soft:var(--soft,#f2f2f5);
	--cw-r:var(--radius,9px);
	display:grid;
	gap:20px;
}

.cw-ent .cw-muted{ color:var(--cw-muted); font-size:14px; margin:0; }

/* ------------------------------------------------------------- a company */

.cw-ent__co{
	padding:22px 24px;
	border:1px solid var(--cw-line);
	border-radius:var(--cw-r);
	background:var(--card,var(--white,#fff));
	color:var(--cw-ink);
}

.cw-ent__co--other{ background:var(--cw-soft); }

.cw-ent__cohead{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px 20px;
	margin-bottom:18px;
}

.cw-ent__cohead h2{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
	margin:0;
	font-size:19px;
	line-height:1.25;
}

.cw-ent__cometa{
	margin:6px 0 0;
	color:var(--cw-muted);
	font-size:13px;
}

.cw-ent__coacts{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
}

.cw-ent__coacts .cw-btn{ min-height:38px; padding:0 16px; font-size:14px; }

/* ------------------------------------------------------------- the table */

.cw-ent__tablewrap{ overflow-x:auto; margin:0 -4px; padding:0 4px; }

.cw-ent__table{
	width:100%;
	border-collapse:collapse;
	font-size:14px;
}

.cw-ent__table th{
	padding:0 12px 10px;
	border-bottom:1px solid var(--cw-line);
	color:var(--cw-muted);
	font-size:12px;
	font-weight:600;
	letter-spacing:.04em;
	text-align:left;
	text-transform:uppercase;
	white-space:nowrap;
}

.cw-ent__table td{
	padding:14px 12px;
	border-bottom:1px solid var(--cw-line);
	color:var(--cw-ink);
	vertical-align:middle;
}

.cw-ent__table tr:last-child td{ border-bottom:0; }

.cw-ent__name{ font-weight:600; }

.cw-ent__name small{
	display:block;
	color:var(--cw-muted);
	font-size:12px;
	font-weight:400;
}

.cw-ent__subs{ color:var(--cw-a) !important; }

.cw-ent__row.is-off td{ opacity:.55; }

.cw-ent__st{
	display:inline-block;
	padding:2px 10px;
	border-radius:999px;
	background:var(--cw-soft);
	color:var(--cw-muted);
	font-size:12px;
	font-weight:600;
	white-space:nowrap;
}

.cw-ent__st--active{ background:color-mix(in srgb,#22a06b 16%,#fff); color:#17744d; }

.cw-ent__st--archived{ background:color-mix(in srgb,#d97706 16%,#fff); color:#7a4a00; }

.cw-ent__count{ font-weight:600; }

.cw-ent__who{
	display:inline-flex;
	align-items:center;
	margin-left:8px;
	vertical-align:middle;
}

.cw-ent__who .cw-person__avatar{
	display:inline-grid;
	place-items:center;
	width:26px;
	height:26px;
	margin-left:-6px;
	border:2px solid var(--card,var(--white,#fff));
	border-radius:50%;
	background:var(--cw-a);
	color:#fff;
	font-size:11px;
	font-weight:600;
	text-decoration:none;
}

.cw-ent__who .cw-person__avatar:first-child{ margin-left:0; }

.cw-ent__acts{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:14px;
	white-space:nowrap;
}

.cw-ent__acts form{ margin:0; }

/* ------------------------------------------------------------- people without an entity */

.cw-ent__loose{
	padding:22px 24px;
	border:1px solid var(--cw-line);
	border-radius:var(--cw-r);
	background:var(--card,var(--white,#fff));
	color:var(--cw-ink);
}

.cw-ent__loose h2{ margin:0 0 6px; font-size:17px; }

.cw-ent__people{
	display:grid;
	gap:2px;
	margin:14px 0 0;
	padding:0;
	list-style:none;
}

.cw-ent__people li{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	padding:10px 0;
	border-top:1px solid var(--cw-line);
}

.cw-ent__people li:first-child{ border-top:0; }

.cw-ent__pname{ flex:1; min-width:0; font-weight:500; }

.cw-ent__assign{ display:flex; align-items:center; gap:8px; margin:0; }

.cw-ent__assign select{
	min-height:36px;
	padding:0 10px;
	border:1px solid var(--cw-line);
	border-radius:6px;
	background:transparent;
	color:var(--cw-ink);
	font:inherit;
	font-size:14px;
}

/* ------------------------------------------------------------- the forms */

.cw-ent__f{ display:grid; gap:14px; }

.cw-ent__two{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px 16px;
}

.cw-ent__f label.cw-field{ display:grid; gap:6px; color:var(--cw-ink); font-size:14px; font-weight:500; }

.cw-ent__f label.cw-field > span{ margin:0; }

.cw-ent__f input[type="text"],
.cw-ent__f input[type="email"],
.cw-ent__f input[type="url"],
.cw-ent__f input[type="tel"],
.cw-ent__f select,
.cw-ent__f textarea{
	box-sizing:border-box;
	width:100%;
	min-height:44px;
	padding:8px 12px;
	border:1px solid var(--cw-line);
	border-radius:9px;
	background:transparent;
	color:var(--cw-ink);
	font:inherit;
}

.cw-ent__f textarea{ min-height:76px; resize:vertical; }

.cw-ent__f input:focus,
.cw-ent__f select:focus,
.cw-ent__f textarea:focus{
	outline:0;
	border-color:var(--cw-a);
	box-shadow:0 0 0 4px color-mix(in srgb,var(--cw-a) 15%,transparent);
}

.cw-ent__f p{ margin:0; }

/* ------------------------------------------------------------- the team list */

/*
 * The action links on a row (Permissions, Payroll file, Make owner, Deactivate, Remove) are
 * wide. Left to grow, they take the whole row and the name column collapses to nothing.
 * Cap them so they wrap and the name keeps its place.
 */
.cw-team .cw-person{ grid-template-columns:44px minmax(0,1fr) auto auto; }

.cw-team .cw-person:has(.cw-person__pick){ grid-template-columns:18px 44px minmax(0,1fr) auto auto; }

.cw-team .cw-person__actions{ max-width:236px; justify-content:flex-end; }

/* The entity sits under the person's name, so the row keeps its name column wide. */
.cw-person__who .cw-person__entity{
	display:block;
	margin-top:6px;
	overflow:visible;
	color:inherit;
	font-size:inherit;
	text-overflow:clip;
	white-space:normal;
}

.cw-person__entity form{ margin:0; }

.cw-person__entity select{
	min-height:32px;
	max-width:170px;
	padding:0 10px;
	border:1px solid var(--cw-line);
	border-radius:6px;
	background:transparent;
	color:var(--cw-ink);
	font:inherit;
	font-size:13px;
}

.cw-chip--ent{
	margin-left:6px;
	background:color-mix(in srgb,var(--cw-a,#6c4ef5) 12%,transparent);
	color:var(--cw-a,#6c4ef5);
}

/* ------------------------------------------------------------- the organization chart page */

.cw-org-page .cw-people{ margin:0; }

.cw-org-page .cw-org__card{ border-radius:var(--cw-r,9px); }

@media (max-width:640px){
	.cw-team .cw-person{ grid-template-columns:44px minmax(0,1fr); }
	.cw-team .cw-person:has(.cw-person__pick){ grid-template-columns:18px 44px minmax(0,1fr); }
	.cw-team .cw-person__role,
	.cw-team .cw-person__actions{ grid-column:2; }
	.cw-team .cw-person__actions{ max-width:none; justify-content:flex-start; }
	.cw-ent__two{ grid-template-columns:1fr; }
	.cw-ent__co,
	.cw-ent__loose{ padding:18px 16px; }
	.cw-ent__acts{ justify-content:flex-start; }
}

/* Deel polish: table in a framed box with a header band, quieter company cards, roomier rows. */
.cw-ent__co{ border-radius:14px; padding:24px; }
.cw-ent__cohead h2{ font-size:20px; letter-spacing:-.01em; }
.cw-ent__tablewrap{ margin:0; padding:0; border:1px solid var(--cw-line); border-radius:12px; background:var(--card,#fff); }
.cw-ent__table th{ padding:12px 16px; background:color-mix(in srgb,var(--cw-ink) 3%,var(--card,#fff)); }
.cw-ent__table td{ padding:14px 16px; }
.cw-ent__table tbody tr:hover td{ background:color-mix(in srgb,var(--cw-ink) 2.5%,var(--card,#fff)); }
.cw-ent__st{ border-radius:999px; }
.cw-ent__loose{ border-radius:14px; }
.cw-ent{ grid-template-columns:minmax(0,1fr); min-width:0; }