/*
 * CSS voor de dashboard shell en app-layout.
 */
/* Dashboard shell: HorecaWaarheid app layout. */
html:has(.hw-app),
body:has(.hw-app),
html.hw-menu-lock,
body.hw-menu-lock {
	overflow-x: hidden;
}

html.hw-menu-lock,
body.hw-menu-lock {
	overflow: hidden;
}

.hw-app,
.hw-shell {
	--hw-shell-bg: #f7f8fb;
	--hw-sidebar: #101827;
	--hw-active: #ff3f4b;
	--hw-accent: #ff3f4b;
	--hw-accent-dark: #df2838;
	--hw-accent-soft: #fff1f2;
	--hw-accent-border: rgba(255, 63, 75, 0.2);
	--hw-blue: var(--hw-accent);
	--hw-green: #12a150;
	--hw-red: var(--hw-accent);
	--hw-purple: var(--hw-accent);
	--hw-orange: #f97316;
	--hw-card-surface: rgba(255, 255, 255, 0.88);
	--hw-card-border: rgba(148, 163, 184, 0.22);
	--hw-card-shadow: 0 18px 44px rgba(15, 23, 42, 0.075);
	--hw-card-shadow-hover: 0 24px 62px rgba(15, 23, 42, 0.105);
	--hw-text-strong: #08111f;
	--hw-text-soft: #65758b;
	--hw-header-offset: 86px;
	align-items: stretch;
	background:
		radial-gradient(circle at 292px 62px, rgba(255, 63, 75, 0.1), transparent 280px),
		linear-gradient(180deg, #fbfcfe 0%, var(--hw-shell-bg) 48%, #f3f5f9 100%);
	color: var(--hw-text-strong);
	display: flex;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--hw-header-offset));
	overflow-x: clip;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	width: 100vw;
}

.hw-app + * {
	margin-top: 0;
}

.hw-app a,
.hw-app a:visited,
.hw-app a:hover,
.hw-app a:focus,
.hw-app a:active,
.hw-shell a,
.hw-shell a:visited,
.hw-shell a:hover,
.hw-shell a:focus,
.hw-shell a:active {
	box-shadow: none;
	text-decoration: none !important;
	text-underline-offset: 0;
}

@supports not (overflow: clip) {
	.hw-app,
	.hw-shell {
		overflow-x: hidden;
	}
}

/* Zijbalk en menupaneel. */
.hw-sidebar,
.hw-menu-panel {
	background:
		radial-gradient(circle at 18% 5%, rgba(255, 63, 75, 0.24), transparent 28%),
		radial-gradient(circle at 100% 34%, rgba(249, 115, 22, 0.16), transparent 26%),
		linear-gradient(180deg, #151720 0%, #10131c 48%, #0b0e16 100%);
	border-right: 1px solid rgba(255, 255, 255, 0.075);
	box-shadow: 18px 0 54px rgba(15, 23, 42, 0.16);
	flex: 0 0 292px;
	padding: 34px 20px 30px;
	position: relative;
}

.hw-sidebar::after,
.hw-menu-panel::after {
	background: linear-gradient(180deg, rgba(255, 63, 75, 0.28), rgba(249, 115, 22, 0.08), transparent);
	content: "";
	height: 100%;
	inset: 0 0 auto auto;
	opacity: 0.55;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.hw-nav,
.hw-menu-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 100%;
	position: relative;
	z-index: 1;
}

.hw-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-nav-heading,
.hw-menu-heading {
	color: #aaaab2;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
	margin: 0 0 18px;
	padding: 0 4px;
	text-transform: uppercase;
}

.hw-nav-item,
.hw-menu-item {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 12px;
	color: rgba(255, 255, 255, 0.78);
	display: flex;
	font-size: 14px;
	font-weight: 700;
	gap: 14px;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: 50px;
	padding: 14px 16px;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.hw-nav-item:hover,
.hw-nav-item:focus,
.hw-menu-item:hover,
.hw-menu-item:focus {
	background: rgba(255, 255, 255, 0.072);
	border-color: rgba(255, 255, 255, 0.115);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: #ffffff;
	outline: none;
	transform: translateX(2px);
}

.hw-nav-active,
.hw-menu-item.is-active {
	background: linear-gradient(135deg, rgba(255, 63, 75, 0.24), rgba(255, 255, 255, 0.065));
	border-color: rgba(255, 63, 75, 0.44);
	box-shadow: inset 3px 0 0 var(--hw-accent), 0 16px 34px rgba(255, 63, 75, 0.16);
	color: #ffffff;
}

.hw-nav-item .dashicons,
.hw-menu-item .dashicons {
	align-items: center;
	color: rgba(255, 255, 255, 0.52);
	display: inline-flex;
	flex: 0 0 24px;
	font-size: 24px;
	height: 24px;
	justify-content: center;
	line-height: 1;
	transition: color 160ms ease, transform 160ms ease;
	width: 24px;
}

.hw-nav-item:hover .dashicons,
.hw-nav-item:focus .dashicons,
.hw-nav-active .dashicons,
.hw-menu-item:hover .dashicons,
.hw-menu-item:focus .dashicons,
.hw-menu-item.is-active .dashicons {
	color: #ffffff;
	transform: scale(1.04);
}

.hw-nav-label,
.hw-menu-item > span:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hw-nav-logout,
.hw-menu-item.is-logout {
	color: #ffc6c6;
	margin-top: 8px;
}

.hw-nav-logout .dashicons,
.hw-menu-item.is-logout .dashicons {
	color: #c9c9cf;
}

.hw-nav-logout:hover,
.hw-nav-logout:focus,
.hw-menu-item.is-logout:hover,
.hw-menu-item.is-logout:focus {
	border-color: rgba(255, 198, 198, 0.22);
	color: #ffd6d6;
}

/* Header, branding and mobile menu compatibility. */
.hw-brand {
	align-items: center;
	color: #ffffff;
	display: inline-flex;
	gap: 12px;
	min-width: 0;
	text-decoration: none;
}

.hw-brand-mark {
	align-items: center;
	background: linear-gradient(135deg, var(--hw-accent), var(--hw-accent-dark));
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba(255, 63, 75, 0.22);
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 44px;
	font-weight: 900;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.hw-brand-text,
.hw-user-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hw-brand-text {
	color: #ffffff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0;
}

.hw-header-actions {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-left: auto;
	min-width: 0;
}

.hw-user-name {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	font-weight: 700;
}

.hw-menu-toggle,
.hw-menu-close {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.hw-menu-toggle {
	flex: 0 0 46px;
	flex-direction: column;
	gap: 5px;
	height: 46px;
	padding: 0;
	width: 46px;
}

.hw-menu-close {
	font: inherit;
	height: 42px;
	padding: 0;
	position: absolute;
	right: 18px;
	top: 18px;
	width: 42px;
}

.hw-menu-toggle:hover,
.hw-menu-toggle:focus,
.hw-menu-close:hover,
.hw-menu-close:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 63, 75, 0.44);
	box-shadow: 0 0 0 4px rgba(255, 63, 75, 0.08);
	outline: none;
}

.hw-menu-line {
	background: currentColor;
	border-radius: 999px;
	display: block;
	height: 2px;
	transition: opacity 180ms ease, transform 180ms ease;
	width: 20px;
}

.hw-menu-overlay {
	background: rgba(7, 10, 16, 0.58);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 180ms ease, visibility 180ms ease;
	visibility: hidden;
	z-index: 9997;
}

.hw-menu-open .hw-menu-overlay,
.hw-shell.hw-menu-open .hw-menu-overlay {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.hw-menu-open .hw-menu-line:nth-child(1),
.hw-shell.hw-menu-open .hw-menu-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.hw-menu-open .hw-menu-line:nth-child(2),
.hw-shell.hw-menu-open .hw-menu-line:nth-child(2) {
	opacity: 0;
}

.hw-menu-open .hw-menu-line:nth-child(3),
.hw-shell.hw-menu-open .hw-menu-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
	.hw-menu-panel {
		bottom: 0;
		flex-basis: auto;
		height: 100vh;
		overflow-y: auto;
		padding-top: 84px;
		position: fixed;
		right: 0;
		top: 0;
		transform: translateX(110%);
		transition: transform 220ms ease, visibility 220ms ease;
		visibility: hidden;
		width: min(340px, calc(100vw - 44px));
		z-index: 9998;
	}

	.hw-menu-open .hw-menu-panel,
	.hw-shell.hw-menu-open .hw-menu-panel {
		transform: translateX(0);
		visibility: visible;
	}

	.hw-brand-text,
	.hw-user-name {
		max-width: 44vw;
	}
}

@media (max-width: 390px) {
	.hw-menu-panel {
		width: min(320px, calc(100vw - 28px));
	}

	.hw-header-actions {
		gap: 8px;
	}

	.hw-menu-toggle {
		flex-basis: 42px;
		height: 42px;
		width: 42px;
	}
}
/* Dashboard content. */
.hw-main,
.hw-dashboard {
	flex: 1 1 auto;
	min-width: 0;
	padding: 38px 30px 40px;
}

.hw-dashboard-top,
.hw-app .hw-page-heading {
	align-items: start;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin-bottom: 22px;
}

.hw-dashboard-top h1,
.hw-app .hw-page-heading h1 {
	color: var(--hw-text-strong);
	font-size: clamp(24px, 2vw, 30px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.15;
	margin: 0 0 8px;
}

.hw-dashboard-top p,
.hw-app .hw-page-heading p {
	color: var(--hw-text-soft);
	font-size: 13px;
	line-height: 1.55;
	margin: 0;
}

.hw-period {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	min-width: 360px;
}

.hw-period label {
	color: var(--hw-text-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hw-period select {
	appearance: none;
	background:
		linear-gradient(45deg, transparent 50%, #7b8798 50%) calc(100% - 20px) 50% / 7px 7px no-repeat,
		linear-gradient(135deg, #7b8798 50%, transparent 50%) calc(100% - 14px) 50% / 7px 7px no-repeat,
		linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
	border: 1px solid var(--hw-card-border);
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
	color: #0c1424;
	font-weight: 700;
	height: 44px;
	padding: 0 42px 0 14px;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
	width: 100%;
}

.hw-period select:hover,
.hw-period select:focus {
	border-color: var(--hw-accent-border);
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.075), 0 0 0 4px rgba(255, 63, 75, 0.075);
	outline: none;
}

.hw-inline-empty {
	background: #fff8e7;
	border: 1px solid #ffd98a;
	border-radius: 8px;
	color: #8a5200;
	font-size: 13px;
	margin: 0 0 16px;
	padding: 11px 14px;
}

.hw-stat-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 8px 0 36px;
}

.hw-stat-card,
.hw-dashboard-card,
.hw-action-card {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
		radial-gradient(circle at 12% 0%, rgba(255, 63, 75, 0.055), transparent 30%);
	border: 1px solid var(--hw-card-border);
	box-shadow: var(--hw-card-shadow);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.hw-stat-card,
.hw-dashboard-card {
	border-radius: 18px;
}

.hw-stat-card:hover,
.hw-dashboard-card:hover,
.hw-action-card:hover,
.hw-action-card:focus {
	border-color: rgba(255, 63, 75, 0.18);
	box-shadow: var(--hw-card-shadow-hover);
	transform: translateY(-2px);
}

.hw-stat-card {
	align-items: center;
	display: flex;
	flex: 1 1 calc(25% - 12px);
	gap: 16px;
	min-height: 124px;
	min-width: 210px;
	padding: 24px;
}

.hw-stat-icon,
.hw-action-card span {
	align-items: center;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent),
		linear-gradient(135deg, var(--hw-accent), var(--hw-accent-dark));
	border-radius: 999px;
	box-shadow: 0 12px 28px rgba(255, 63, 75, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.32);
	color: #ffffff;
	display: inline-flex;
	font-weight: 800;
	justify-content: center;
}

.hw-stat-icon {
	height: 46px;
	width: 46px;
}

.hw-stat-icon svg {
	fill: none;
	height: 21px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 21px;
}

.hw-stat-icon.hw-bg-blue,
.hw-stat-flex .hw-stat-card:nth-child(2) .hw-stat-icon,
.hw-stat-flex .hw-stat-card:nth-child(3) .hw-stat-icon {
	font-size: 0;
}

.hw-stat-icon.hw-bg-blue::before {
	background: currentColor;
	content: "";
	display: block;
	height: 22px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 22px;
}

.hw-stat-flex .hw-stat-card:nth-child(2) .hw-stat-icon::before,
.hw-stat-flex .hw-stat-card:nth-child(3) .hw-stat-icon::before {
	background: none;
	content: "\20AC";
	display: block;
	font-size: 24px;
	font-weight: 900;
	height: auto;
	line-height: 1;
	mask: none;
	-webkit-mask: none;
	width: auto;
}

.hw-stat-card small {
	color: var(--hw-text-soft);
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.035em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.hw-stat-card strong {
	color: var(--hw-text-strong);
	display: block;
	font-size: clamp(24px, 2vw, 30px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.hw-stat-card em {
	background: #ecfdf3;
	border: 1px solid rgba(18, 161, 80, 0.14);
	border-radius: 999px;
	color: #047a3d;
	display: inline-flex;
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
	line-height: 1;
	margin-top: 8px;
	padding: 6px 8px;
	width: fit-content;
}

.hw-stat-flex .hw-stat-card:nth-child(2) em {
	background: #fff1f2;
	border-color: rgba(255, 63, 75, 0.16);
	color: #be123c;
}

.hw-bg-green {
	background: var(--hw-green);
}

.hw-bg-red {
	background: var(--hw-red);
}

.hw-bg-blue {
	background: var(--hw-blue);
}

.hw-bg-purple {
	background: var(--hw-purple);
}

.hw-bg-orange {
	background: var(--hw-orange);
}

.hw-bg-gray {
	background: #64748b;
}

.hw-dashboard-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 54px;
}

.hw-dashboard-flex > :first-child {
	flex: 1 1 560px;
}

.hw-dashboard-flex > :last-child {
	flex: 1 1 360px;
}

.hw-dashboard-card {
	padding: 24px;
}

.hw-dashboard-card h2 {
	color: var(--hw-text-strong);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 22px 0;
}
.hw-backoffice-page {
	--hw-work-blue: #3478f6;
	--hw-work-orange: #f79009;
	--hw-work-green: #17a65a;
	--hw-work-red: #ff3f4b;
	--hw-work-ink: #0f172a;
	--hw-work-muted: #667085;
	--hw-work-line: #e5ebf3;
	--hw-work-soft: #f8fafc;
}

.hw-backoffice-page .hw-stat-flex {
	gap: 14px;
	margin: 8px 0 22px;
}

.hw-backoffice-page .hw-stat-card {
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
	gap: 16px;
	min-height: 112px;
	padding: 20px;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hw-backoffice-page .hw-stat-card:hover {
	border-color: #d4dce8;
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
}

.hw-backoffice-page .hw-stat-icon,
.hw-backoffice-page .hw-field-icon,
.hw-backoffice-page .hw-button-icon,
.hw-backoffice-page .hw-backoffice-check {
	font-family: inherit;
	font-size: 0;
}

.hw-backoffice-page .hw-stat-icon {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 10px 18px rgba(15, 23, 42, 0.12);
	height: 44px;
	width: 44px;
}

.hw-backoffice-page .hw-stat-icon::before,
.hw-backoffice-page .hw-field-icon::before,
.hw-backoffice-page .hw-button-icon::before,
.hw-backoffice-page .hw-backoffice-check::before {
	background: currentColor;
	content: "";
	display: block;
	flex: 0 0 auto;
	height: 18px;
	mask: var(--hw-icon) center / contain no-repeat;
	-webkit-mask: var(--hw-icon) center / contain no-repeat;
	width: 18px;
}

.hw-backoffice-page .hw-stat-icon::before {
	height: 22px;
	width: 22px;
}

.hw-icon-list-check { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 6h10M11 12h10M11 18h10M3 6l1.5 1.5L8 4M3 12l1.5 1.5L8 10M3 18l1.5 1.5L8 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-loader { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hw-icon-circle-check { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5M22 12a10 10 0 1 1-5.93-9.14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-triangle-alert { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0ZM12 9v4M12 17h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-type { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7V4h16v3M9 20h6M12 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-flag { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 22V4a1 1 0 0 1 1-1h12l-1.5 4L17 11H5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-circle-dot { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3C/svg%3E"); }
.hw-icon-tag { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8ZM7.5 7.5h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-calendar-range { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2ZM8 15h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-calendar-clock { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M7 4h10a4 4 0 0 1 4 4v2M12 22a6 6 0 1 0 0-12 6 6 0 0 0 0 12ZM12 13v3l2 1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-file-text { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8ZM14 2v6h6M8 13h8M8 17h8M8 9h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-gauge { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14l4-4M4.2 19a9 9 0 1 1 15.6 0M7 19h10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-icon-plus { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hw-icon-square-pen { --hw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M16 4l4 4M14 10l6-6M13 11l-1 4 4-1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.hw-backoffice-page .hw-field-icon,
.hw-backoffice-page .hw-button-icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

.hw-backoffice-page .hw-field-icon {
	background: #fff5f5;
	border: 1px solid #ffd6d9;
	border-radius: 8px;
	color: var(--hw-work-red);
	height: 26px;
	width: 26px;
}

.hw-backoffice-page .hw-button-icon::before {
	height: 16px;
	width: 16px;
}
.hw-backoffice-page .hw-stat-icon.hw-bg-blue {
	font-size: 0;
}

.hw-backoffice-page .hw-stat-icon.hw-bg-blue::before,
.hw-backoffice-page .hw-stat-flex .hw-stat-card:nth-child(2) .hw-stat-icon::before,
.hw-backoffice-page .hw-stat-flex .hw-stat-card:nth-child(3) .hw-stat-icon::before {
	background: currentColor;
	content: "";
	display: block;
	font-size: 0;
	height: 22px;
	line-height: 1;
	mask: var(--hw-icon) center / contain no-repeat;
	-webkit-mask: var(--hw-icon) center / contain no-repeat;
	width: 22px;
}
.hw-backoffice-page .hw-dashboard-top {
	margin-bottom: 18px;
}

.hw-backoffice-week {
	background: #ffffff;
	border: 1px solid #e5ebf3;
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
	color: #344054;
	font-size: 13px;
	font-weight: 900;
	padding: 12px 14px;
	white-space: nowrap;
}

.hw-backoffice-week-switcher {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	max-width: 100%;
}

.hw-backoffice-week-switcher .hw-mini-button {
	white-space: nowrap;
}

.hw-backoffice-create {
	margin-bottom: 18px;
}

.hw-backoffice-create details,
.hw-backoffice-new-note {
	max-width: 100%;
}

.hw-backoffice-page,
.hw-backoffice-page * {
	box-sizing: border-box;
}

.hw-backoffice-page .hw-main,
.hw-backoffice-page .hw-dashboard-card,
.hw-backoffice-page .hw-backoffice-form,
.hw-backoffice-page .hw-backoffice-edit-layout,
.hw-backoffice-page .hw-backoffice-edit-form,
.hw-backoffice-page .hw-backoffice-edit-sidebar,
.hw-backoffice-page .hw-field,
.hw-backoffice-page .hw-field-label {
	min-width: 0;
	max-width: 100%;
}

.hw-backoffice-page .hw-backoffice-form,
.hw-backoffice-page .hw-backoffice-edit-layout,
.hw-backoffice-page .hw-backoffice-edit-form,
.hw-backoffice-page .hw-backoffice-edit-sidebar,
.hw-backoffice-page .hw-field,
.hw-backoffice-page .hw-field input,
.hw-backoffice-page .hw-field select,
.hw-backoffice-page .hw-field textarea {
	width: 100%;
}

.hw-backoffice-page .hw-backoffice-form {
	container-type: inline-size;
}

.hw-backoffice-page .hw-field,
.hw-backoffice-page .hw-field-label,
.hw-backoffice-page .hw-field small,
.hw-backoffice-page .hw-button,
.hw-backoffice-page .hw-mini-button {
	overflow-wrap: break-word;
	white-space: normal;
	word-break: normal;
}

.hw-backoffice-create summary,
.hw-backoffice-new-note summary {
	display: inline-flex;
	gap: 8px;
	list-style: none;
	margin-bottom: 14px;
}

.hw-backoffice-create details[open] summary,
.hw-backoffice-new-note[open] summary {
	margin-bottom: 16px;
}

.hw-backoffice-create summary::-webkit-details-marker,
.hw-backoffice-new-note summary::-webkit-details-marker,
.hw-backoffice-editor summary::-webkit-details-marker {
	display: none;
}

.hw-backoffice-page .hw-backoffice-form-grid,
.hw-backoffice-page .hw-backoffice-filters form {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hw-backoffice-page .hw-backoffice-form-grid > *,
.hw-backoffice-page .hw-backoffice-filters form > * {
	flex: 1 1 min(280px, 100%);
	min-width: 0;
}

.hw-backoffice-filters {
	margin-bottom: 18px;
}

.hw-backoffice-filter-actions {
	align-items: end;
	display: flex;
	gap: 10px;
}

.hw-backoffice-filter-actions .hw-button {
	min-height: 44px;
}

.hw-backoffice-page .hw-backoffice-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	min-width: 0;
	width: 100%;
}

.hw-backoffice-page .hw-backoffice-column,
.hw-backoffice-page .hw-backoffice-notes {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	width: 100%;
}

.hw-backoffice-page .hw-backoffice-column {
	flex: 1.65 1 560px;
}

.hw-backoffice-page .hw-backoffice-notes {
	flex: 0.95 1 320px;
}

.hw-backoffice-section-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.hw-backoffice-section-head h2 {
	margin: 0;
}

.hw-backoffice-section-head > span {
	align-items: center;
	background: #fff1f2;
	border-radius: 999px;
	color: #ff3f4b;
	display: inline-flex;
	font-size: 12px;
	font-weight: 900;
	height: 28px;
	justify-content: center;
	min-width: 28px;
	padding: 0 9px;
}

.hw-backoffice-task-list,
.hw-backoffice-note-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hw-backoffice-task,
.hw-backoffice-note {
	background: #ffffff;
	border: 1px solid #e5ebf3;
	border-left: 4px solid #94a3b8;
	border-radius: 8px;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 16px;
}

.hw-backoffice-task {
	align-items: stretch;
	flex-direction: column;
}

.hw-backoffice-task.is-completed {
	background: #f8fafc;
	opacity: 0.78;
}

.hw-backoffice-task.is-completed h3 {
	color: #667085;
	text-decoration: line-through;
}

.hw-backoffice-priority-low {
	border-left-color: #98a2b3;
}

.hw-backoffice-priority-normal {
	border-left-color: #3478f6;
}

.hw-backoffice-priority-high {
	border-left-color: #ff951c;
}

.hw-backoffice-priority-urgent {
	border-left-color: #ff3f4b;
}

.hw-backoffice-task-main {
	align-items: flex-start;
	display: flex;
	flex: 1 1 auto;
	gap: 12px;
	min-width: 0;
	width: 100%;
}

.hw-backoffice-task-main > div {
	flex: 1 1 auto;
	min-width: 0;
}

.hw-backoffice-check {
	align-items: center;
	background: #eef4ff;
	border: 1px solid #dbe7ff;
	border-radius: 8px;
	color: #3478f6;
	display: inline-flex;
	flex: 0 0 30px;
	height: 32px;
	justify-content: center;
	width: 32px;
}

.hw-backoffice-task.is-completed .hw-backoffice-check {
	background: #ecfdf3;
	border-color: #abefc6;
	color: #17a65a;
}

.hw-backoffice-task h3,
.hw-backoffice-note h3 {
	color: #0f172a;
	font-size: 15px;
	line-height: 1.3;
	margin: 0 0 6px;
	overflow-wrap: break-word;
	word-break: normal;
}

.hw-backoffice-task p,
.hw-backoffice-note p,
.hw-backoffice-empty {
	color: #5f6d85;
	font-size: 13px;
	line-height: 1.55;
	margin: 0;
	overflow-wrap: break-word;
	word-break: normal;
}

.hw-backoffice-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}

.hw-backoffice-meta span {
	background: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 8px;
	color: #667085;
	display: flex;
	flex: 1 1 170px;
	flex-direction: column;
	gap: 3px;
	min-width: min(170px, 100%);
	padding: 8px 10px;
	white-space: normal;
}

.hw-backoffice-meta small {
	color: #8a97aa;
	font-size: 10px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
}

.hw-backoffice-meta strong {
	color: #344054;
	font-size: 11.5px;
	font-weight: 900;
	line-height: 1.25;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
}

.hw-backoffice-actions {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.hw-backoffice-task .hw-backoffice-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.hw-backoffice-task .hw-backoffice-actions form, .hw-backoffice-task .hw-backoffice-actions details {
	width: 30%;
}

.hw-backoffice-task .hw-backoffice-actions form {
	height: 36px
}

.hw-mini-button {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dfe4ec;
	border-radius: 8px;
	color: #344054;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 12px;
	font-weight: 900;
	gap: 6px;
	justify-content: center;
	max-height: 36px;
	padding: 8px 10px;
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.hw-backoffice-task .hw-backoffice-actions .hw-mini-button, .hw-backoffice-task .hw-backoffice-editor summary {
	width: 100%;
}

.hw-backoffice-task .hw-backoffice-editor summary {
	height: 36px;
}

.hw-mini-button:hover,
.hw-mini-button:focus,
.hw-backoffice-editor summary:hover,
.hw-backoffice-editor summary:focus {
	border-color: #cbd5e1;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
	outline: none;
	transform: translateY(-1px);
}

.hw-mini-button-primary {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1d4ed8;
}

.hw-mini-button-secondary {
	background: #f8fafc;
	color: #475467;
}

.hw-mini-button-danger {
	background: #fff7f7;
	border-color: #fecdca;
	color: #b42318;
}

.hw-backoffice-editor {
	position: relative;
}

.hw-backoffice-editor summary {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dfe4ec;
	border-radius: 8px;
	color: #344054;
	cursor: pointer;
	display: inline-flex;
	font-size: 12px;
	font-weight: 900;
	justify-content: center;
	min-height: 36px;
	padding: 8px 10px;
}

.hw-backoffice-editor-panel {
	background: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 10px;
	margin-top: 4px;
	order: 4;
	padding: 14px;
	width: 100%;
	height: 400px;
}

.hw-backoffice-task .hw-backoffice-editor-panel .hw-backoffice-form {
	width: 100%;
}



.hw-backoffice-task .hw-backoffice-editor-panel .hw-backoffice-edit-layout {
	width: 100%;
}

.hw-backoffice-task .hw-backoffice-editor-panel .hw-backoffice-edit-form,
.hw-backoffice-task .hw-backoffice-editor-panel .hw-backoffice-edit-sidebar {
	display: flex;
}

.hw-backoffice-task .hw-backoffice-editor-panel .hw-field,
.hw-backoffice-task .hw-backoffice-editor-panel .hw-field input,
.hw-backoffice-task .hw-backoffice-editor-panel .hw-field select,
.hw-backoffice-task .hw-backoffice-editor-panel .hw-field textarea,
.hw-backoffice-task .hw-backoffice-editor-panel .hw-card-actions,
.hw-backoffice-task .hw-backoffice-editor-panel .hw-card-actions .hw-button {
	width: 100%;
}

.hw-backoffice-editor-panel .hw-backoffice-form {
	gap: 0;
}

.hw-backoffice-form-shell,
.hw-backoffice-edit-layout {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	width: 100%;
}

@container (min-width: 720px) {
	.hw-backoffice-edit-layout,
	.hw-backoffice-task .hw-backoffice-editor-panel .hw-backoffice-edit-layout {
		flex-direction: row;
	}

	.hw-backoffice-edit-layout > :first-child,
	.hw-backoffice-task .hw-backoffice-editor-panel .hw-backoffice-edit-layout > :first-child {
		flex: 3 1 0;
	}

	.hw-backoffice-edit-layout > :last-child,
	.hw-backoffice-task .hw-backoffice-editor-panel .hw-backoffice-edit-layout > :last-child {
		flex: 2 1 280px;
	}
}

@container (max-width: 520px) {
	.hw-backoffice-sticky-actions {
		flex-direction: column;
	}
}

.hw-backoffice-form-main,
.hw-backoffice-form-detail,
.hw-backoffice-info-panel,
.hw-backoffice-edit-form,
.hw-backoffice-edit-sidebar {
	min-width: 0;
	width: 100%;
}

.hw-backoffice-form-main,
.hw-backoffice-form-detail {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hw-backoffice-edit-form,
.hw-backoffice-edit-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hw-backoffice-editor-panel .hw-backoffice-form-grid {
	gap: 16px;
}

.hw-backoffice-editor-panel .hw-field {
	gap: 9px;
}

.hw-field-label {
	align-items: center;
	color: #0f172a;
	display: inline-flex;
	font-size: 12px;
	font-weight: 900;
	gap: 8px;
	line-height: 1.2;
}

.hw-backoffice-editor-panel .hw-field input,
.hw-backoffice-editor-panel .hw-field select,
.hw-backoffice-editor-panel .hw-field textarea {
	border-radius: 8px;
	min-height: 48px;
	padding: 12px 14px;
}

.hw-backoffice-editor-panel .hw-field small {
	color: #667085;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.25;
}

.hw-backoffice-description-field textarea {
	min-height: 220px;
	resize: vertical;
}

.hw-backoffice-progress-card {
	background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
	border: 1px solid #e5ebf3;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px;
}

.hw-backoffice-progress-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.hw-backoffice-progress-head span {
	align-items: center;
	display: inline-flex;
	gap: 8px;
}

.hw-backoffice-progress-head span,
.hw-backoffice-progress-head strong {
	color: #0f172a;
	font-size: 12px;
	font-weight: 900;
}

.hw-backoffice-progress-track {
	background: #eef2f7;
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.hw-backoffice-progress-track span {
	background: linear-gradient(90deg, #ff3f4b, #ff951c);
	border-radius: inherit;
	display: block;
	height: 100%;
}

.hw-backoffice-progress-card small {
	color: #667085;
	font-size: 11px;
	font-weight: 800;
}

.hw-backoffice-info-panel {
	background: #f8fafc;
	border: 1px solid #e5ebf3;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: none;
	min-width: 0;
	padding: 14px;
}

.hw-backoffice-info-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.hw-backoffice-info-grid div,
.hw-backoffice-checklist,
.hw-backoffice-related,
.hw-backoffice-activity-log {
	background: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 8px;
	min-width: 0;
	padding: 10px 12px;
	width: 100%;
}

.hw-backoffice-info-grid div {
	flex: 1 1 150px;
}

.hw-backoffice-info-grid small {
	color: #8a97aa;
	display: block;
	font-size: 10px;
	font-weight: 900;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.hw-backoffice-info-grid strong,
.hw-backoffice-checklist strong,
.hw-backoffice-related strong,
.hw-backoffice-activity-log strong {
	color: #0f172a;
	display: block;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
}

.hw-backoffice-checklist,
.hw-backoffice-related,
.hw-backoffice-activity-log {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hw-backoffice-checklist span,
.hw-backoffice-related span,
.hw-backoffice-activity-log span {
	color: #5f6d85;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: break-word;
	padding-left: 18px;
	position: relative;
	white-space: normal;
	word-break: normal;
}

.hw-backoffice-checklist span::before,
.hw-backoffice-related span::before,
.hw-backoffice-activity-log span::before {
	background: #cbd5e1;
	border-radius: 999px;
	content: "";
	height: 7px;
	left: 0;
	position: absolute;
	top: 5px;
	width: 7px;
}

.hw-backoffice-checklist span.is-done::before {
	background: #22a861;
}

.hw-backoffice-sticky-actions {
	background: rgba(255, 255, 255, 0.94);
	border-top: 1px solid #edf2f7;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px -14px -14px;
	padding: 12px 14px;
	position: sticky;
	z-index: 3;
}

.hw-backoffice-sticky-actions > * {
	flex: 1 1 calc(50% - 5px);
	min-width: 0;
}

.hw-backoffice-task .hw-backoffice-editor-panel .hw-backoffice-sticky-actions .hw-button,
.hw-backoffice-sticky-actions .hw-button {
	justify-content: center;
	min-width: 0;
	width: 100%;
}
.hw-backoffice-note .hw-form {
	background: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 10px;
	padding: 14px;
}

.hw-backoffice-notes {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 104px);
}

.hw-backoffice-new-note {
	margin-bottom: 16px;
}

.hw-backoffice-note {
	border-left-color: #3478f6;
	display: block;
}

.hw-backoffice-note .hw-backoffice-actions {
	margin-top: 12px;
}
.hw-ring-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	padding: 20px 12px 24px;
}

.hw-ring-item {
	align-items: center;
	display: flex;
	flex: 1 1 105px;
	flex-direction: column;
	gap: 14px;
	text-align: center;
}

.hw-ring {
	--hw-ring-color: var(--hw-green);
	--hw-progress: 0;
	align-items: center;
	background: conic-gradient(var(--hw-ring-color) calc(var(--hw-progress) * 1%), #e8eaf0 0);
	border-radius: 999px;
	display: flex;
	height: 106px;
	justify-content: center;
	position: relative;
	width: 106px;
}

.hw-ring::after {
	background: #ffffff;
	border-radius: inherit;
	content: "";
	height: 88px;
	position: absolute;
	width: 88px;
}

.hw-ring span {
	color: #020b1a;
	font-size: 18px;
	font-weight: 900;
	position: relative;
	z-index: 1;
}

.hw-ring-item strong {
	color: #030b18;
	font-size: 14px;
}

.hw-ring-item small {
	font-size: 11px;
	font-weight: 800;
}

.hw-ring-green .hw-ring {
	--hw-ring-color: var(--hw-green);
}

.hw-ring-green small {
	color: #05a33c;
}

.hw-ring-orange .hw-ring {
	--hw-ring-color: var(--hw-orange);
}

.hw-ring-orange small {
	color: var(--hw-orange);
}

.hw-ring-red .hw-ring {
	--hw-ring-color: var(--hw-red);
}

.hw-ring-red small {
	color: var(--hw-red);
}

.hw-warning-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hw-warning-row {
	align-items: center;
	border-radius: 8px;
	display: flex;
	gap: 12px;
	min-height: 58px;
	padding: 12px 14px;
}

.hw-warning-icon {
	align-items: center;
	border-radius: 999px;
	color: #ffffff;
	display: flex;
	flex: 0 0 28px;
	font-size: 16px;
	font-weight: 900;
	height: 28px;
	justify-content: center;
	line-height: 1;
	width: 28px;
}

.hw-warning-icon svg {
	fill: none;
	height: 16px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.5;
	width: 16px;
}

.hw-warning-row strong {
	color: #030b18;
	display: block;
	font-size: 13px;
	margin-bottom: 4px;
}

.hw-warning-row small {
	color: #607089;
	font-size: 11px;
}

.hw-warning-red {
	background: #fff3f4;
}

.hw-warning-red .hw-warning-icon {
	background: var(--hw-red);
}

.hw-warning-orange {
	background: #fff8ea;
}

.hw-warning-orange .hw-warning-icon {
	background: var(--hw-orange);
}

.hw-warning-green {
	background: #effdf5;
}

.hw-warning-green .hw-warning-icon {
	background: var(--hw-green);
}

.hw-actions {
	padding: 20px 18px 26px;
}

.hw-action-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.hw-action-card {
	align-items: center;
	border: 1px solid #dde2ea;
	border-radius: 8px;
	color: #071225;
	display: flex;
	flex: 1 1 calc(25% - 12px);
	gap: 12px;
	min-height: 73px;
	min-width: 210px;
	padding: 13px 16px;
	text-decoration: none;
}

.hw-action-card:hover,
.hw-action-card:focus {
	border-color: #b8c2d2;
	box-shadow: 0 6px 18px rgba(16, 24, 39, 0.08);
	color: #071225;
}

.hw-action-card span {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	flex: 0 0 46px;
	height: 46px;
	min-height: 46px;
	min-width: 46px;
	padding: 0;
	width: 46px;
}

.hw-action-card div {
	min-width: 0;
	width: 100%;
}

.hw-action-card strong,
.hw-action-card small {
	display: block;
	width: 100%;
}

.hw-action-card strong {
	font-size: 12px;
	margin-bottom: 3px;
}

.hw-action-card small {
	color: #6b7890;
	font-size: 11px;
}