/**
 * The OCC UI standard: the front end's shared tokens and components. D-365.
 * File: assets/css/occ-ui.css
 *
 * Decided by Philipp, 2026-09-25, on the canvas "OCC Pills and Highlights
 * Mockup" (board 7, "The standard"). tokens.css and components.css serve
 * wp-admin only; until this file the front end had no shared layer, and 13
 * stylesheets each chose their own greys, pills and burgundy.
 *
 * -- Where it loads ----------------------------------------------------------
 *
 * Every front-end page (OCC_UI). The dashboard sidebar is on the theme's own
 * pages too (My Jobs, Messages ...), where no OCC module stylesheet loads.
 * Module front-end stylesheets list it as a dependency, so its tokens are
 * always defined before they are used.
 *
 * -- The rules it keeps -----------------------------------------------------
 *
 *   burgundy   primary buttons and the current sidebar icon, nothing else
 *   navy       what is selected (a person, a company, a row)
 *   grey       everything else: hover, counts, filters, initials
 *   dots       a role or a status is a white chip with a coloured dot:
 *              green done, amber attention, red problem, navy information,
 *              grey neutral; agency violet, client teal, staff blue, and a
 *              team member's dot is a ring
 *   sizes      whole pixels only; a fractional font size or height renders
 *              soft, and a row that starts on a fractional pixel leaves an
 *              SVG icon off the line of the text beside it
 *
 * Builds: b10.529 (tokens, sidebar, filter chips, counts, initials, selected
 * rows, role chip); b10.531 (status chips); b10.532 (buttons and tabs);
 * type, cards, tables and notices follow (PLAN-D-365-ui-standard.md).
 * b10.674: the field and chosen-option tokens (D-394).
 */

:root {
	--occ-ui-text: #101828;
	--occ-ui-text-2: #344054;
	--occ-ui-text-3: #475467;
	--occ-ui-muted: #667085;
	--occ-ui-faint: #98a2b3;
	--occ-ui-border: #d0d5dd;
	--occ-ui-line: #e4e7ec;
	--occ-ui-line-soft: #eaecf0;
	--occ-ui-fill: #f2f4f7;
	--occ-ui-fill-soft: #f9fafb;
	--occ-ui-page: #f5f7fc;
	--occ-ui-white: #ffffff;
	--occ-ui-brand: #a41e32;
	--occ-ui-brand-hover: #7d1626;
	--occ-ui-selected: #eef4fb;
	--occ-ui-navy: #1e3a5f;
	--occ-ui-focus: #d5e3f6;
	--occ-ui-tile-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
	--occ-ui-dot-green: #12b76a;
	--occ-ui-dot-amber: #dc9c00;
	--occ-ui-dot-red: #f04438;
	--occ-ui-dot-navy: #2f5d95;
	--occ-ui-dot-grey: #98a2b3;
	--occ-ui-dot-agency: #7a5af8;
	--occ-ui-dot-client: #15b79e;
	--occ-ui-dot-staff: #0ba5ec;

	/* Build 3: actions with a meaning, solid or soft, and the focus ring. */
	--occ-ui-green: #067647;
	--occ-ui-green-hover: #05603a;
	--occ-ui-green-soft: #ecfdf3;
	--occ-ui-green-line: #abefc6;
	--occ-ui-blue: #2f5d95;
	--occ-ui-blue-hover: #254a78;
	--occ-ui-blue-soft: #eef4fb;
	--occ-ui-blue-line: #cddcf0;
	--occ-ui-red: #d92d20;
	--occ-ui-red-hover: #b42318;
	--occ-ui-red-soft: #fef3f2;
	--occ-ui-red-soft-hover: #fee4e2;
	--occ-ui-red-line: #fecdca;
	--occ-ui-red-text: #b42318;
	--occ-ui-focus-ring: #2f5d95;

	/*
	 * D-394 (b10.674), Philipp: one field look for every OCC form, "white,
	 * bordered". A field is white with a 1px grey border and 8px corners, 44px
	 * tall (40px inside a table row), 14px text; focus is a navy border with a
	 * pale navy ring. A chosen option (a button, a tile, an industry) is pale
	 * navy with a navy edge and navy words: navy is what is selected, burgundy
	 * stays for the main button.
	 */
	--occ-ui-field-h: 44px;
	--occ-ui-field-h-sm: 40px;
	--occ-ui-field-bg: #ffffff;
	--occ-ui-field-border: #d0d5dd;
	--occ-ui-field-radius: 8px;
	--occ-ui-field-text: #101828;
	--occ-ui-field-placeholder: #667085;
	--occ-ui-field-focus: 0 0 0 3px #d5e3f6;
	--occ-ui-chosen-bg: #eef4fb;
	--occ-ui-chosen-line: #2f5d95;
	--occ-ui-chosen-text: #1e3a5f;

	/*
	 * Lucide icons (ISC, assets/vendor/lucide) drawn as masks, so a button
	 * needs no markup for its icon and the icon takes the button's colour.
	 */
	--occ-ui-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
	--occ-ui-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--occ-ui-icon-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E");
	--occ-ui-icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17V7'/%3E%3Cpath d='M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8'/%3E%3Cpath d='M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	--occ-ui-icon-user-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='17' x2='22' y1='8' y2='13'/%3E%3Cline x1='22' x2='17' y1='8' y2='13'/%3E%3C/svg%3E");
	--occ-ui-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
	--occ-ui-icon-clipboard-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
	--occ-ui-icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- sidebar
 *
 * The dashboard sidebar (Superio's menu_short_profile, drawn by the theme or
 * by OCC's dashboard nav widget). The theme's own rules are
 * `.menu_short_profile li a` (0,1,2) and `.menu_short_profile li:hover > a`,
 * `li.active > a` (0,2,2); these outrank them without !important.
 *
 * The current page is a plain grey fill: no border, no shadow, no burgundy
 * tint. Rows are 44px, so every row starts on a whole pixel when the list
 * does; the icon is a 20px flex item centred on the row and lifted 1px, which
 * puts it on the middle of the capitals rather than of the line box.
 */
ul.menu_short_profile > li {
	margin: 0 0 2px;
	padding: 0;
}

ul.menu_short_profile > li > a {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border-radius: 10px;
	background: transparent;
	box-shadow: none;
	color: var(--occ-ui-text-3);
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

ul.menu_short_profile > li > a i.occ-lucide {
	display: inline-flex;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--occ-ui-muted);
}

ul.menu_short_profile > li > a i.occ-lucide svg {
	position: relative;
	top: -1px;
	width: 20px;
	height: 20px;
	vertical-align: 0;
}

ul.menu_short_profile > li:hover > a,
ul.menu_short_profile > li > a:focus {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
}

ul.menu_short_profile > li:hover > a i.occ-lucide,
ul.menu_short_profile > li > a:focus i.occ-lucide {
	color: var(--occ-ui-text-2);
}

ul.menu_short_profile > li:is(.active, .current-menu-item) > a {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	font-weight: 600;
}

ul.menu_short_profile > li:is(.active, .current-menu-item) > a i.occ-lucide {
	color: var(--occ-ui-brand);
}

ul.menu_short_profile > li > a:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

/*
 * The header's account menu (Superio's user_info widget, `ul.topmenu-menu`)
 * lists the same pages. The theme tints its hover and current item in the
 * brand's pale pink (`.topmenu-menu > li.active > a`, 0,2,2); b10.546 gives it
 * the sidebar's greys so the two menus agree.
 */
ul.topmenu-menu > li:hover > a,
ul.topmenu-menu > li > a:focus {
	background: var(--occ-ui-fill-soft);
	color: var(--occ-ui-text);
}

ul.topmenu-menu > li:is(.active, .current-menu-item) > a {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	font-weight: 600;
}

/*
 * D-385: grouped dashboard menus (OCC_Menu_Groups), in the sidebar and the
 * header's pull-down alike. A heading is a small grey label, not a link; the
 * items ticked "Show in the foot row" sit on one line under a rule. The
 * pull-down's own rules (D-363, 0,4,2) are outranked by the second selector.
 */
ul.occ-menu-grouped > li.occ-menu-heading {
	margin: 0;
	padding: 14px 14px 4px;
	background: none;
}

ul.occ-menu-grouped > li.occ-menu-heading:first-child {
	padding-top: 4px;
}

ul.occ-menu-grouped > li.occ-menu-heading > .occ-menu-heading-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--occ-ui-muted);
}

.occ-header-account ul.occ-menu-grouped > li.occ-menu-heading {
	padding: 10px 14px 2px;
}

ul.occ-menu-grouped > li.occ-menu-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 10px 0 0;
	padding: 12px 14px 4px;
	border-top: 1px solid var(--occ-ui-line-soft);
	background: none;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link,
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link {
	display: inline;
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--occ-ui-text-3);
	text-decoration: none;
}

/* b10.642, Philipp: no underline on hover; the words darken instead. */
ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link:is(:hover, :focus),
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link:is(:hover, :focus) {
	background: none;
	color: var(--occ-ui-text);
	text-decoration: none;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link[aria-current="page"] {
	font-weight: 600;
	color: var(--occ-ui-text);
}

ul.occ-menu-grouped .occ-menu-foot-sep {
	color: var(--occ-ui-faint);
}

/*
 * b10.636: a foot link drawn as an icon alone (Help), at the row's right end,
 * with a hit area bigger than the icon.
 */
ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon,
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 28px;
	/* b10.642: no taller than the row's line, or the pull-down grew a scrollbar (2px over). */
	margin: -4px -6px -4px auto;
	border-radius: 8px;
	color: var(--occ-ui-muted);
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon:is(:hover, :focus),
ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon[aria-current="page"],
.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon:is(:hover, :focus) {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	text-decoration: none;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon i.occ-lucide {
	display: inline-flex;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	font-size: 18px;
	line-height: 1;
	color: inherit;
}

ul.occ-menu-grouped > li.occ-menu-foot > a.occ-menu-foot-link--icon i.occ-lucide svg {
	position: static;
	width: 18px;
	height: 18px;
	vertical-align: 0;
}

/*
 * b10.636: "Get help" beside a page's heading or in a form, opening the Help
 * page at the right topic.
 */
.occ-help-cta {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 12px;
}

.occ-help-cta--inline {
	display: block;
	margin: 12px 0 0;
}

.occ-apply-popup-help .occ-help-cta--inline {
	text-align: center;
}

/* Doubled class: above `.occ-asg-page a:not(.button)`, which loads later. */
.occ-help-cta > a.occ-help-cta-link.occ-help-cta-link,
.occ-help-cta > a.occ-help-cta-link.occ-help-cta-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--occ-ui-text-3);
	text-decoration: none;
}

.occ-help-cta > a.occ-help-cta-link.occ-help-cta-link:is(:hover, :focus) {
	color: var(--occ-ui-text);
	text-decoration: none;
}

/*
 * b10.642: in a page's title, a small pill after its words, so it never
 * competes with a button at the title row's right end (the Clients page).
 * The heading's own size, weight and colour are reset for it. Three classes:
 * above `.occ-asg-page a:not(.button)` (0,2,1), which loads later and at
 * b10.642's two classes painted it burgundy on the Clients page (b10.644).
 */
a.occ-help-cta-link.occ-help-cta-link--title.occ-help-cta-link--title,
a.occ-help-cta-link.occ-help-cta-link--title.occ-help-cta-link--title:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 0 12px;
	padding: 3px 10px 3px 8px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 999px;
	background: var(--occ-ui-fill-soft);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0;
	color: var(--occ-ui-text-3);
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}

a.occ-help-cta-link.occ-help-cta-link--title.occ-help-cta-link--title:is(:hover, :focus) {
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text);
	text-decoration: none;
}

a.occ-help-cta-link.occ-help-cta-link--title:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--occ-ui-focus);
}

a.occ-help-cta-link--title i.occ-lucide,
a.occ-help-cta-link--title i.occ-lucide svg {
	width: 15px;
	height: 15px;
}

a.occ-help-cta-link i.occ-lucide {
	display: inline-flex;
	width: 16px;
	height: 16px;
	font-size: 16px;
}

a.occ-help-cta-link i.occ-lucide svg {
	width: 16px;
	height: 16px;
	vertical-align: 0;
}

/*
 * D-385 build 2: the header pull-down (board 8c). A long menu (the agency's)
 * is two columns: the items before the first heading in a row across the
 * top, the groups split so both columns start level, the foot row across
 * the bottom (OCC_Menu_Groups::columns() sets the classes). Grid, placed by
 * column, so each group stays together.
 */
.occ-header-account .inner-top-menu:has(> ul.occ-menu-cols) {
	left: auto;
	right: 0;
	width: max-content;
}

.occ-header-account ul.occ-menu-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	grid-auto-flow: row dense;
	column-gap: 8px;
}

/* Bootstrap's .nav clearfix (::before/::after, display: table) would take the first grid cell. */
.occ-header-account ul.occ-menu-cols::before,
.occ-header-account ul.occ-menu-cols::after {
	display: none;
	content: none;
}

.occ-header-account ul.occ-menu-cols > li.occ-menu-col1 {
	grid-column: 1;
}

.occ-header-account ul.occ-menu-cols > li.occ-menu-col2 {
	grid-column: 2;
}

.occ-header-account ul.occ-menu-cols > li:is(.occ-menu-span, .occ-menu-foot) {
	grid-column: 1 / -1;
}

/*
 * b10.642: a one-column pull-down (a client company's) was 200px, the theme's
 * width, so "Profile, Account, Log out" and the Help icon wrapped, leaving a
 * dot at a line's end. It now takes the width its rows need, from the right
 * edge like the two-column one, and the foot row stays on one line. Seen on
 * MIRROR as Cedar Ridge's owner.
 */
@media (min-width: 992px) {
	.occ-header-account .inner-top-menu:has(> ul.occ-menu-grouped:not(.occ-menu-cols)) {
		left: auto;
		right: 0;
		width: max-content;
		min-width: 200px;
	}

	.occ-header-account ul.occ-menu-grouped > li.occ-menu-foot {
		flex-wrap: nowrap;
	}
}

/* A candidate's profile bar above the pull-down's menu. */
.occ-menu-profile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 4px;
	padding: 8px 14px 12px;
	border-bottom: 1px solid var(--occ-ui-line-soft);
}

.occ-menu-profile-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--occ-ui-text-3);
}

.occ-menu-profile-bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--occ-ui-line-soft);
	overflow: hidden;
}

.occ-menu-profile-bar > span {
	display: block;
	height: 100%;
	background: var(--occ-ui-blue);
}

/*
 * D-399: the profile bar (sidebar, account pull-down) and the My profile count
 * take the profile prompt's colour for the person's level (D-398): blue, amber,
 * orange, red, and green when nearly or fully complete.
 */
.occ-menu-profile--info .occ-menu-profile-bar > span { background: #2e90fa; }
.occ-menu-profile--caution .occ-menu-profile-bar > span { background: #f79009; }
.occ-menu-profile--warning .occ-menu-profile-bar > span { background: #ef6820; }
.occ-menu-profile--danger .occ-menu-profile-bar > span { background: #f04438; }
.occ-menu-profile--nearly .occ-menu-profile-bar > span,
.occ-menu-profile--complete .occ-menu-profile-bar > span { background: #17b26a; }

.occ-ui-count.occ-ui-count--tone-info { background: #eff8ff; color: #175cd3; }
.occ-ui-count.occ-ui-count--tone-caution { background: #fffaeb; color: #b54708; }
.occ-ui-count.occ-ui-count--tone-warning { background: #fef6ee; color: #b93815; }
.occ-ui-count.occ-ui-count--tone-danger { background: #fef3f2; color: #b42318; }
.occ-ui-count.occ-ui-count--tone-nearly,
.occ-ui-count.occ-ui-count--tone-complete { background: #ecfdf3; color: #067647; }

/* D-388: ProfilePrompts' inline prompt under the sidebar menu, a little tighter. */
.occ-side-prompt {
	margin: 16px 0 0;
}

.occ-side-prompt .occ-pp {
	padding: 14px 16px;
}

/* D-386: the same bar under the name in the sidebar's profile block (candidates). */
.user-short-profile-top .occ-side-profile {
	gap: 4px;
	margin: 8px 0 0;
	padding: 0;
	border-bottom: 0;
}

/*
 * On a phone the theme's user icon opens the same grouped menu. It opens
 * across the whole width under the header, scrolls inside itself, and its
 * rows are 44px for a thumb. The theme's phone header is fixed and 100px
 * tall, so the menu starts at 100px (top: auto put it above the screen,
 * found on b10.616); the theme moves it down a further 10px when it opens.
 */
@media (max-width: 991px) {
	.top-wrapper-menu .inner-top-menu:has(> ul.occ-menu-grouped) {
		position: fixed;
		top: 100px;
		right: 0;
		left: 0;
		width: auto;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		border-radius: 0 0 12px 12px;
		z-index: 1000;
	}

	.top-wrapper-menu .inner-top-menu > ul.occ-menu-grouped {
		display: block;
		width: auto;
		max-height: none;
	}

	.top-wrapper-menu ul.occ-menu-grouped > li:not(.occ-menu-heading, .occ-menu-foot) > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------ components
 *
 * For markup written from now on. Existing pages keep their own class names;
 * their stylesheets are rewritten to these tokens instead.
 */

/* A count: 12px, 20px high, grey. */
.occ-ui-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 7px;
	border-radius: 10px;
	background: var(--occ-ui-fill);
	color: var(--occ-ui-text-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
}

/* A count on a menu item (the Documents page's new documents, D-378): at the row's end in the sidebar. */
.occ-ui-count--menu {
	margin-left: 8px;
}

ul.menu_short_profile > li > a .occ-ui-count--menu {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Initials: a grey circle, dark letters. 40px; the page sets another size. */
.occ-ui-avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--occ-ui-line-soft);
	color: var(--occ-ui-text-2);
	font-size: 14px;
	font-weight: 600;
}

/*
 * A role or status chip: white, dark text, a coloured dot. The dot is the
 * ::before, coloured by one modifier; --ring draws it hollow (a team member).
 *
 * Build 2 (b10.531): the status families already on the pages are drawn by
 * the same rule, so every state reads the same way wherever it appears.
 * Their own stylesheets keep only layout and set --occ-ui-chip-dot:
 *   occ-access-state    Available, On assignment, Sent, Accepted, Revoked ...
 *   occ-access-flag     Shortlisted, the warning on an invitation
 *   occ-bc-chip         Pending approval, Denied, Your staff, Shortlisted
 *   occ-ct-status       a timesheet's state in the Timesheets list
 *   occ-ct-tag          overtime and holiday hours on a list row
 *   occ-ts-flag         a timesheet flag (No break, Overtime ...)
 *   occ-profile-tab-badge   "3 to fill in" and "optional" on a Profile tab
 *   occ-profile-meter-chip  a missing item under the profile meter (a link)
 *   occ-security-chip   a login's state on Profile > Security
 *   occ-ud-chip         a missing item on the available candidate's dashboard
 */
.occ-ui-chip,
.occ-access-state,
.occ-access-flag,
.occ-bc-chip,
.occ-ct-status,
.occ-ct-tag,
.occ-ts-flag,
.occ-profile-tab-badge,
.occ-profile-meter-chip,
.occ-security-chip,
.occ-ud-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	height: 24px;
	padding: 0 10px;
	border: 1px solid var(--occ-ui-line);
	border-radius: 999px;
	background: var(--occ-ui-white);
	color: var(--occ-ui-text-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;
}

.occ-ui-chip::before,
.occ-access-state::before,
.occ-access-flag::before,
.occ-bc-chip::before,
.occ-ct-status::before,
.occ-ct-tag::before,
.occ-ts-flag::before,
.occ-profile-tab-badge::before,
.occ-profile-meter-chip::before,
.occ-security-chip::before,
.occ-ud-chip::before {
	content: "";
	flex: 0 0 8px;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--occ-ui-chip-dot, var(--occ-ui-dot-grey));
}

.occ-ui-chip.occ-ui-chip--ring::before {
	border: 2px solid var(--occ-ui-chip-dot, var(--occ-ui-dot-grey));
	background: transparent;
}

.occ-ui-chip--green { --occ-ui-chip-dot: var(--occ-ui-dot-green); }
.occ-ui-chip--amber { --occ-ui-chip-dot: var(--occ-ui-dot-amber); }
.occ-ui-chip--red { --occ-ui-chip-dot: var(--occ-ui-dot-red); }
.occ-ui-chip--navy { --occ-ui-chip-dot: var(--occ-ui-dot-navy); }
.occ-ui-chip--grey { --occ-ui-chip-dot: var(--occ-ui-dot-grey); }
.occ-ui-chip--agency { --occ-ui-chip-dot: var(--occ-ui-dot-agency); }
.occ-ui-chip--client { --occ-ui-chip-dot: var(--occ-ui-dot-client); }
.occ-ui-chip--staff { --occ-ui-chip-dot: var(--occ-ui-dot-staff); }

/* ---------------------------------------------------------------- buttons
 *
 * Build 3 (b10.532). Kinds: primary burgundy (one per area), secondary white,
 * quiet; actions with a meaning are green (adds someone), blue (sends or
 * bills), red (removes or stops), solid when it is the main action of its
 * area and soft otherwise. The pages' own button classes keep their sizes and
 * take these colours in their own stylesheets; what is here is the icons.
 *
 * An icon is the ::before of the button, a mask of --occ-ui-icon in the
 * button's text colour; the Font Awesome icons these buttons carried before
 * are gone from their templates. The buttons that carry one:
 *   occ-ct-pdf-link      PDF              download
 *   occ-ct-view          Open             eye
 *   occ-cc-asg-open      Open             eye
 *   occ-ct-yours         Approve or return  clipboard-check
 *   occ-staff-add        Add to my staff  user-plus
 *   occ-staff-remove-button  Remove from my staff  user-x
 *   occ-cc-edit          Edit (a client company)  pencil
 *   occ-cc-bill-toggle   Bill the client  receipt
 *   occ-cc-stop          Deactivate, Stop signing in, Remove  user-x
 *   occ-team-remove      Remove (a team member)  trash
 */
.occ-ct-pdf-link { --occ-ui-icon: var(--occ-ui-icon-download); }
.occ-ct-view,
.occ-cc-asg-open { --occ-ui-icon: var(--occ-ui-icon-eye); }
.occ-ct-yours { --occ-ui-icon: var(--occ-ui-icon-clipboard-check); }
.occ-staff-add { --occ-ui-icon: var(--occ-ui-icon-user-plus); }
.occ-cc-bill-toggle { --occ-ui-icon: var(--occ-ui-icon-receipt); }
.occ-cc-stop,
.occ-staff-remove-button { --occ-ui-icon: var(--occ-ui-icon-user-x); }
.occ-cc-edit { --occ-ui-icon: var(--occ-ui-icon-pencil); }
.occ-team-remove { --occ-ui-icon: var(--occ-ui-icon-trash); }

.occ-ct-pdf-link::before,
.occ-ct-view::before,
.occ-cc-asg-open::before,
.occ-ct-yours::before,
.occ-staff-add::before,
.occ-cc-bill-toggle::before,
.occ-cc-stop::before,
.occ-staff-remove-button::before,
.occ-cc-edit::before,
.occ-team-remove::before {
	content: "";
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: var(--occ-ui-icon) center / 16px 16px no-repeat;
	mask: var(--occ-ui-icon) center / 16px 16px no-repeat;
}

/* ------------------------------------------------------------ name blocks
 *
 * The company and the person's name, in the sidebar's profile block and the
 * header's account menu: one line each, cut with an ellipsis rather than
 * wrapped (the full name is the title), even spacing, the View Profile
 * button clear of the name (b10.536).
 */
.user-short-profile-top .inner {
	flex: 1 1 auto;
	min-width: 0;
}

.user-short-profile-top .inner .title {
	margin: 0;
	line-height: 24px;
}

.user-short-profile-top .inner .title,
.user-short-profile-top .inner .title a,
.user-short-profile-top .occ-account-person,
.occ-header-account .occ-account-company,
.occ-header-account .occ-account-person {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.user-short-profile-top .occ-account-person {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--occ-ui-text-3);
}

.user-short-profile-top .inner .view-profile {
	margin-top: 10px;
}

.occ-header-account .name-acount {
	line-height: 20px;
}

.occ-header-account .occ-account-company,
.occ-header-account .occ-account-person {
	max-width: 170px;
}

.occ-header-account .occ-account-person {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: var(--occ-ui-text-3);
}

/*
 * b10.682: the theme's back-to-top button (.add-fix-top, fixed 15px from the
 * bottom) sat on the Save button of OCC's sticky save bars on a phone (the
 * profile, Post a job). The bar is always there on those pages and a phone
 * scrolls up with a swipe, so there the button is not drawn.
 */
@media (max-width: 760px) {
	body:has(.occ-profile-actions) .add-fix-top,
	body.occ-job-screen .add-fix-top {
		display: none;
	}
}