:root {
	--bg: #061925;
	--bg-deep: #03111b;
	--rail: #04141f;
	--panel: rgba(8, 28, 42, 0.92);
	--panel-strong: rgba(9, 34, 51, 0.98);
	--panel-soft: rgba(12, 42, 60, 0.72);
	--line: rgba(129, 171, 193, 0.28);
	--line-strong: rgba(135, 206, 235, 0.48);
	--text: #f4fbff;
	--muted: #9eb2c0;
	--cyan: #6bd6ff;
	--teal: #12d6c2;
	--green: #62d25f;
	--amber: #ffb21c;
	--purple: #a78bfa;
	--red: #ff4b43;
	--shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--text);
	background:
		linear-gradient(120deg, rgba(7, 37, 55, 0.94), rgba(2, 12, 20, 0.98)),
		var(--bg);
}

body.auth-page {
	display: grid;
	place-items: center;
	padding: 24px;
}

a {
	color: inherit;
	text-decoration: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

[hidden] {
	display: none !important;
}

button,
select {
	font: inherit;
}

.sidebar-toggle-input,
.right-dock-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.console-shell {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	min-height: 100vh;
	background:
		linear-gradient(90deg, rgba(0, 230, 214, 0.06), transparent 22%),
		linear-gradient(180deg, rgba(17, 55, 76, 0.22), rgba(3, 15, 24, 0));
	transition: grid-template-columns 160ms ease;
}

.auth-shell {
	width: min(100%, 460px);
}

.auth-panel {
	display: grid;
	gap: 24px;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 28px;
	background: linear-gradient(145deg, rgba(10, 34, 50, 0.96), rgba(5, 21, 34, 0.96));
	box-shadow: var(--shadow);
}

.auth-brand {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}

.auth-brand h1 {
	margin: 0;
	font-size: 30px;
	line-height: 1.1;
}

.auth-form {
	display: grid;
	gap: 16px;
}

.auth-form label {
	display: grid;
	gap: 8px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
}

.auth-form input {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 5px;
	padding: 0 12px;
	color: var(--text);
	background: #071f30;
}

.auth-copy,
.auth-error {
	margin: 0;
	line-height: 1.45;
}

.auth-copy {
	color: var(--muted);
}

.auth-error {
	color: var(--red);
	font-size: 13px;
	font-weight: 700;
}

.auth-success {
	margin: 0;
	color: var(--teal);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

.auth-link {
	color: var(--cyan);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.auth-link:hover,
.auth-link:focus {
	text-decoration: underline;
}

.sidebar-toggle-input:checked + .console-shell {
	grid-template-columns: 86px minmax(0, 1fr);
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 26px;
	border-right: 1px solid var(--line);
	padding: 24px 0 18px;
	background: linear-gradient(180deg, rgba(3, 18, 28, 0.98), rgba(3, 15, 24, 0.94));
}

.brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 86px;
	padding: 0 24px 16px;
	border-bottom: 1px solid rgba(129, 171, 193, 0.14);
}

.brand-logo {
	display: block;
	width: 160px;
	max-width: 100%;
	height: auto;
}

.brand-copy {
	width: 160px;
	max-width: 100%;
	text-align: center;
}

.brand small {
	display: block;
	letter-spacing: 0;
	color: var(--muted);
	font-size: 11px;
}

.nav-list {
	display: grid;
	gap: 4px;
}

.nav-item {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	min-height: 58px;
	padding: 0 24px;
	color: #c7d5dd;
	font-size: 15px;
}

.nav-item:before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: transparent;
	content: "";
}

.nav-item:hover,
.nav-item.is-active {
	color: #dffaff;
	background: linear-gradient(90deg, rgba(20, 214, 194, 0.34), rgba(29, 114, 139, 0.18));
}

.nav-item.is-active:before {
	background: var(--teal);
	box-shadow: 0 0 22px rgba(18, 214, 194, 0.75);
}

.nav-icon-fa {
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	opacity: 0.95;
}

.sidebar-footer {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding: 0 18px;
}

.panel-collapse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(129, 171, 193, 0.18);
	border-radius: 5px;
	color: #d7edf7;
	background: rgba(7, 31, 48, 0.32);
	cursor: pointer;
	opacity: 0.72;
	transition: border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}

.panel-collapse:hover,
.panel-collapse:focus {
	border-color: rgba(107, 214, 255, 0.48);
	background: rgba(7, 31, 48, 0.72);
	opacity: 1;
	outline: none;
}

.sidebar-collapse-icon,
.right-dock-collapse-icon {
	width: 11px;
	height: 11px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transition: transform 120ms ease;
}

.sidebar-collapse-icon {
	transform: rotate(45deg);
}

.right-dock-collapse-icon {
	transform: rotate(225deg);
}

.console-version {
	display: grid;
	gap: 4px;
	margin: 0;
	border-top: 1px solid rgba(129, 171, 193, 0.14);
	padding-top: 12px;
	color: var(--muted);
	font-size: 11px;
	text-transform: uppercase;
}

.console-version strong {
	color: #dceff7;
	font-size: 13px;
	text-transform: none;
}

.sidebar-toggle-input:checked + .console-shell .brand-copy,
.sidebar-toggle-input:checked + .console-shell .nav-label,
.sidebar-toggle-input:checked + .console-shell .console-version span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.sidebar-toggle-input:checked + .console-shell .brand {
	justify-content: center;
	align-items: center;
	padding-inline: 0;
}

.sidebar-toggle-input:checked + .console-shell .brand-logo {
	width: 64px;
}

.sidebar-toggle-input:checked + .console-shell .nav-item {
	grid-template-columns: 1fr;
	justify-items: center;
	padding-inline: 0;
}

.sidebar-toggle-input:checked + .console-shell .sidebar-collapse-icon {
	transform: rotate(225deg);
}

.sidebar-toggle-input:checked + .console-shell .sidebar-footer {
	padding-inline: 12px;
}

.sidebar-toggle-input:checked + .console-shell .console-version {
	text-align: center;
}

.console-frame {
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	min-width: 0;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 86px;
	border-bottom: 1px solid var(--line);
	padding: 18px 26px;
	background: rgba(3, 16, 25, 0.58);
}

.topbar h1,
.section-heading h2,
.state h2 {
	margin: 0;
	letter-spacing: 0;
}

.topbar h1 {
	font-size: 29px;
	line-height: 1.15;
}

.section-kicker {
	margin: 0 0 7px;
	color: #b5c8d4;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.community-selector {
	display: block;
}

.community-selector span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.community-selector select {
	min-width: 245px;
	max-width: min(42vw, 420px);
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 5px;
	padding: 0 14px;
	color: var(--text);
	background: #071f30;
}

.coverage-selector-error {
	max-width: 320px;
	color: #fbbf24;
	font-size: 12px;
	line-height: 1.35;
}

.operator-chip,
.operational-session-timer,
.status-pill,
.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 34px;
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 0 12px;
	color: #d8eef8;
	background: rgba(9, 31, 47, 0.82);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.operational-session-timer {
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.operator-chip {
	max-width: min(240px, 24vw);
}

.operator-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.operational-session-timer:not([hidden]) {
	display: inline-flex;
}

.operational-session-timer.is-ending {
	border-color: rgba(245, 158, 11, 0.62);
	color: #fbbf24;
}

.operational-session-timer.is-reconnecting {
	border-color: rgba(148, 163, 184, 0.5);
	color: #cbd5e1;
}

.icon-button {
	width: 34px;
	padding: 0;
	opacity: 0.8;
	transition: border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}

.icon-button:hover,
.icon-button:focus {
	border-color: rgba(107, 214, 255, 0.48);
	background: rgba(7, 31, 48, 0.72);
	opacity: 1;
	outline: none;
}

.logout-icon {
	position: relative;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 3px;
}

.logout-icon:before,
.logout-icon:after {
	position: absolute;
	content: "";
}

.logout-icon:before {
	top: 5px;
	left: 5px;
	width: 11px;
	border-top: 2px solid currentColor;
}

.logout-icon:after {
	top: 2px;
	left: 11px;
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

.status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--muted);
}

.status-dot.is-available {
	background: var(--green);
	box-shadow: 0 0 14px rgba(98, 210, 95, 0.7);
}

.status-pill.is-idle {
	color: var(--cyan);
}

.workspace-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(420px, 32vw, 560px);
	min-height: 0;
	transition: grid-template-columns 160ms ease;
}

.workspace-layout--without-dock {
	grid-template-columns: minmax(0, 1fr);
}

.right-dock-toggle-input:not(:checked) + .workspace-layout {
	grid-template-columns: minmax(0, 1fr) 48px;
}

.content {
	min-width: 0;
	padding: 24px 26px;
	overflow: auto;
}

.right-dock {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 12px;
	border-left: 1px solid var(--line);
	padding: 14px 16px 18px;
	background: rgba(3, 17, 27, 0.62);
	overflow: auto;
}

.right-dock-rail {
	display: flex;
	justify-content: flex-start;
}

.right-dock-content {
	min-width: 0;
}

.right-dock-toggle-input:not(:checked) + .workspace-layout .right-dock {
	padding-inline: 9px;
	overflow: hidden;
}

.right-dock-toggle-input:not(:checked) + .workspace-layout .right-dock-content {
	display: none;
}

.right-dock-toggle-input:not(:checked) + .workspace-layout .right-dock-collapse-icon {
	transform: rotate(45deg);
}

.panel,
.dock-panel,
.state {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: linear-gradient(145deg, rgba(10, 34, 50, 0.94), rgba(5, 21, 34, 0.94));
	box-shadow: var(--shadow);
}

.dock-panel {
	display: grid;
	gap: 22px;
	padding: 18px;
}

.call-panel {
	min-height: 360px;
}

.admin-call-mode-toggle {
	min-height: 34px;
	padding: 0 10px;
	white-space: nowrap;
}

.call-panel[data-call-state="ringing"] {
	border-color: rgba(255, 178, 28, 0.62);
	box-shadow: var(--shadow), 0 0 0 1px rgba(255, 178, 28, 0.18), 0 0 28px rgba(255, 178, 28, 0.16);
	animation: call-panel-ring-pulse 1800ms ease-in-out infinite;
}

.notifications-panel {
	margin-top: 14px;
}

.dock-header,
.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.dock-empty {
	display: grid;
	gap: 8px;
	min-height: 210px;
	place-content: center;
	border: 1px solid rgba(107, 214, 255, 0.18);
	border-radius: 8px;
	padding: 22px;
	text-align: center;
	background: rgba(7, 26, 40, 0.72);
}

.dock-empty span {
	color: var(--muted);
}

.dock-empty-small {
	min-height: 132px;
}

.outgoing-call-panel {
	display: grid;
	gap: 14px;
	border: 1px solid rgba(107, 214, 255, 0.26);
	border-radius: 8px;
	padding: 16px;
	background: rgba(7, 26, 40, 0.72);
}

.outgoing-call-heading {
	display: grid;
	gap: 5px;
}

.outgoing-call-heading strong {
	font-size: 18px;
	line-height: 1.2;
}

.outgoing-call-heading span,
.outgoing-call-controls span,
.outgoing-call-footer span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.outgoing-call-controls {
	display: grid;
	gap: 10px;
}

.outgoing-call-controls label {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.outgoing-call-controls select,
.outgoing-call-controls input {
	width: 100%;
	min-width: 0;
	border: 1px solid rgba(129, 171, 193, 0.28);
	border-radius: 7px;
	padding: 9px 10px;
	color: var(--text);
	background: rgba(3, 18, 28, 0.82);
}

.outgoing-call-controls input::placeholder {
	color: rgba(129, 171, 193, 0.72);
}

.outgoing-call-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
}

.outgoing-call-footer span {
	overflow-wrap: anywhere;
}

.outgoing-call-button {
	min-height: 36px;
	padding: 0 14px;
}

.call-card {
	display: grid;
	gap: 16px;
	border: 1px solid rgba(107, 214, 255, 0.26);
	border-radius: 8px;
	padding: 18px;
	background: rgba(7, 26, 40, 0.72);
}

.call-panel[data-call-state="ringing"] .call-card {
	border-color: rgba(255, 178, 28, 0.48);
	background: rgba(31, 31, 22, 0.74);
}

.call-panel[data-call-state="placing"] .call-card {
	border-color: rgba(98, 210, 95, 0.36);
	background: rgba(12, 34, 34, 0.74);
}

.call-emblem {
	position: relative;
	width: 54px;
	height: 54px;
	border: 2px solid var(--cyan);
	border-radius: 50%;
	box-shadow: inset 0 0 0 10px rgba(107, 214, 255, 0.08), 0 0 28px rgba(107, 214, 255, 0.18);
}

.call-emblem:before,
.call-emblem:after {
	position: absolute;
	content: "";
}

.call-emblem:before {
	inset: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--cyan);
}

.call-emblem:after {
	right: 7px;
	bottom: 8px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 16px rgba(255, 178, 28, 0.55);
}

.call-panel[data-call-state="ringing"] .call-emblem {
	border-color: var(--amber);
	color: var(--amber);
	box-shadow: inset 0 0 0 10px rgba(255, 178, 28, 0.1), 0 0 28px rgba(255, 178, 28, 0.3);
	animation: call-emblem-ring-pulse 900ms ease-out infinite;
}

.call-panel[data-call-state="ringing"] .call-emblem:before {
	color: var(--amber);
}

.call-emblem.is-active:after {
	background: var(--green);
	box-shadow: 0 0 16px rgba(98, 210, 95, 0.55);
}

.call-emblem.is-placing {
	border-color: var(--green);
	color: var(--green);
	box-shadow: inset 0 0 0 10px rgba(98, 210, 95, 0.08), 0 0 24px rgba(98, 210, 95, 0.2);
}

.call-emblem.is-placing:before {
	color: var(--green);
}

.call-summary {
	display: grid;
	gap: 6px;
}

.call-summary span,
.call-context span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.call-summary strong {
	overflow-wrap: anywhere;
	font-size: 22px;
	line-height: 1.2;
}

.call-context {
	display: grid;
	gap: 10px;
}

.call-context div {
	display: grid;
	gap: 5px;
	min-width: 0;
	border: 1px solid rgba(129, 171, 193, 0.2);
	border-radius: 7px;
	padding: 10px 12px;
	background: rgba(8, 30, 45, 0.66);
}

.call-context strong {
	overflow-wrap: anywhere;
	font-size: 13px;
}

.call-context-compact {
	gap: 0;
}

.call-context-compact div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
}

.call-context-compact strong {
	text-align: right;
}

.call-video-viewport {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 16 / 9;
	min-height: 220px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid rgba(129, 171, 193, 0.22);
	border-radius: 7px;
	background:
		linear-gradient(rgba(119, 173, 196, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(119, 173, 196, 0.08) 1px, transparent 1px),
		#030d15;
	background-size: 30px 30px;
}

.call-video,
.call-video-placeholder {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

.call-video {
	display: block;
	object-fit: contain;
	object-position: center center;
	background: #02080d;
}

.call-video[hidden],
.call-video-placeholder[hidden] {
	display: none;
}

.call-video-placeholder {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 10px;
	padding: 18px;
	color: var(--muted);
	text-align: center;
}

.call-video-placeholder .camera-lens {
	width: 40px;
	height: 40px;
	opacity: 0.72;
}

.call-video-placeholder .camera-lens:after {
	inset: 12px;
}

.call-video-placeholder strong {
	color: #d8eef8;
	font-size: 14px;
}

.call-accesses {
	display: grid;
	gap: 10px;
	border: 1px solid rgba(129, 171, 193, 0.2);
	border-radius: 7px;
	padding: 12px;
	background: rgba(8, 30, 45, 0.66);
}

.call-accesses-title {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.call-access-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
}

.call-access-row strong {
	overflow-wrap: anywhere;
	font-size: 13px;
}

.call-access-button {
	min-height: 34px;
	padding: 0 12px;
	font-size: 13px;
}

.call-access-row .access-action-status {
	grid-column: 1 / -1;
}

.call-access-row .access-action-status:empty {
	min-height: 0;
}

.call-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.call-action {
	width: 44px;
	min-height: 44px;
	border-radius: 50%;
	opacity: 0.96;
	transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.call-answer {
	border-color: rgba(98, 210, 95, 0.46);
	color: #eefbea;
	background: rgba(45, 140, 69, 0.88);
	box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.18), 0 8px 18px rgba(16, 54, 29, 0.22);
}

.call-answer:hover,
.call-answer:focus {
	border-color: rgba(98, 210, 95, 0.62);
	background: rgba(57, 164, 82, 0.94);
	transform: translateY(-1px);
	box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.14), 0 10px 22px rgba(16, 54, 29, 0.28);
}

.call-panel[data-call-state="ringing"] .call-answer {
	position: relative;
	border-color: rgba(98, 210, 95, 0.72);
	box-shadow: 0 0 0 0 rgba(98, 210, 95, 0.32);
	animation: call-answer-ring-pulse 1400ms ease-out infinite;
}

.call-reject {
	border-color: rgba(255, 75, 67, 0.5);
	color: #fff3f2;
	background: rgba(169, 48, 44, 0.9);
	box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.18), 0 8px 18px rgba(79, 20, 21, 0.24);
}

.call-reject:hover,
.call-reject:focus {
	border-color: rgba(255, 75, 67, 0.62);
	background: rgba(202, 59, 54, 0.96);
	transform: translateY(-1px);
	box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.14), 0 10px 22px rgba(79, 20, 21, 0.3);
}

.call-answer-icon,
.call-reject-icon {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.call-answer-icon {
	transform: rotate(96deg);
}

.call-reject-icon {
	transform: rotate(276deg);
}

@keyframes call-panel-ring-pulse {
	0%,
	100% {
		box-shadow: var(--shadow), 0 0 0 1px rgba(255, 178, 28, 0.18), 0 0 24px rgba(255, 178, 28, 0.12);
	}
	50% {
		box-shadow: var(--shadow), 0 0 0 1px rgba(255, 178, 28, 0.32), 0 0 38px rgba(255, 178, 28, 0.28);
	}
}

@keyframes call-emblem-ring-pulse {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1.07);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes call-answer-ring-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(98, 210, 95, 0.36);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(98, 210, 95, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(98, 210, 95, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.call-panel[data-call-state="ringing"],
	.call-panel[data-call-state="ringing"] .call-emblem,
	.call-panel[data-call-state="ringing"] .call-answer {
		animation: none;
	}

	.call-panel[data-call-state="ringing"] {
		box-shadow: var(--shadow), 0 0 0 1px rgba(255, 178, 28, 0.34), 0 0 30px rgba(255, 178, 28, 0.22);
	}
}

.overview-section {
	display: grid;
	gap: 14px;
	margin-bottom: 20px;
}

.panel.home-administration {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
}

.home-administration h2,
.home-client-card h3 {
	margin: 0;
}

.home-administration p:last-child {
	color: var(--muted);
}

.home-administration .button {
	flex: none;
}

.home-inspection-note {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 13px;
}

.home-client-card {
	flex: 0 0 min(100%, 390px);
	display: grid;
	grid-template-rows: auto auto 1fr;
	align-content: start;
	gap: 16px;
	min-height: 350px;
	min-width: 0;
	border-top: 4px solid var(--cyan);
	scroll-snap-align: start;
}

.home-client-heading h3 {
	min-width: 0;
	overflow-wrap: anywhere;
}

.home-client-rules {
	display: grid;
	gap: 4px;
	min-height: 22px;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.home-client-rules p {
	margin: 0;
}

.home-resource-counts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: 10px;
	margin: 0;
	border-top: 1px solid var(--line);
	padding-top: 16px;
}

.home-resource-counts div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	min-height: 46px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: rgba(3, 17, 27, 0.42);
}

.home-resource-counts dt {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: var(--text);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.home-resource-counts dt i {
	color: var(--cyan);
}

.home-resource-counts dd {
	margin: 0;
	color: var(--cyan);
	font-size: 18px;
	font-weight: 700;
}

.home-resources-empty {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.home-carousel-controls {
	display: flex;
	gap: 8px;
}

.home-carousel-controls .button {
	min-width: 38px;
	padding: 6px 10px;
}

.home-carousel-controls .button:disabled {
	opacity: 0.35;
	cursor: default;
}

.home-contract-carousel {
	display: flex;
	gap: 14px;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding: 2px 2px 14px;
	scroll-snap-type: x mandatory;
}

.home-attendance-card {
	--attendance-accent: var(--muted);
	flex: 0 0 min(100%, 340px);
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 14px;
	min-height: 230px;
	border-top: 4px solid var(--attendance-accent);
	scroll-snap-align: start;
}

.home-attendance-card--attended {
	--attendance-accent: var(--green);
}

.home-attendance-card--partial,
.home-attendance-card--unscheduled {
	--attendance-accent: var(--amber);
}

.home-attendance-card--unattended {
	--attendance-accent: var(--red);
}

.home-attendance-card--outside_window {
	--attendance-accent: var(--cyan);
}

.home-attendance-card h3 {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.home-attendance-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.home-attendance-status {
	flex: none;
	max-width: 45%;
	padding: 5px 8px;
	border: 1px solid var(--attendance-accent);
	border-radius: 999px;
	color: var(--attendance-accent);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.home-attendance-rule {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.home-attendance-hours {
	display: grid;
	align-content: center;
	gap: 3px;
}

.home-attendance-hours strong {
	font-size: 26px;
}

.home-attendance-hours span {
	color: var(--muted);
	font-size: 12px;
}

.home-attendance-footer {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
}

.home-attendance-avatars {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-attendance-avatars li {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--panel-strong);
	border-radius: 50%;
	background: var(--panel-soft);
	color: var(--text);
	font-size: 13px;
}

.home-attendance-avatars li + li {
	margin-left: -7px;
}

.home-attendance-count {
	text-align: right;
	white-space: nowrap;
}

.home-attendance-count strong {
	display: block;
	color: var(--attendance-accent);
	font-size: 23px;
}

.home-attendance-count small {
	color: var(--muted);
	font-size: 11px;
}

.home-planning-alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.home-planning-alert p {
	margin: 0;
}

.home-empty {
	color: var(--muted);
}

@media (max-width: 760px) {
	.home-administration,
	.home-planning-alert {
		align-items: stretch;
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.home-resource-counts {
		grid-template-columns: 1fr;
	}
}

.status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	color: var(--muted);
}

.status-row strong {
	color: var(--green);
	font-weight: 700;
}

.panel {
	display: grid;
	gap: 16px;
	padding: 18px;
}

.workspace-monitoring {
	container-name: workspace-monitoring;
	container-type: inline-size;
	display: grid;
	gap: 18px;
	min-width: 0;
}

.benchmark-monitoring {
	gap: 16px;
}

.benchmark-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px;
}

.benchmark-heading-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.video-wall-workspace-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.video-wall-active-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	min-width: 0;
}

.video-wall-active-grid.is-single-column {
	grid-template-columns: minmax(0, 1fr);
}

@container workspace-monitoring (max-width: 520px) {
	.video-wall-active-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.video-wall-heading-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.video-wall-heading {
	flex-wrap: wrap;
}

.video-wall-layout-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 5px 10px;
	color: var(--text);
	background: rgba(3, 18, 28, 0.5);
	cursor: pointer;
}

.video-wall-layout-toggle:hover,
.video-wall-layout-toggle:focus-visible {
	border-color: rgba(107, 214, 255, 0.76);
}

.video-wall-layout-choice {
	color: var(--muted);
	font-size: 13px;
	white-space: nowrap;
	transition: color 180ms ease;
}

.video-wall-layout-choice--grid,
.video-wall-layout-toggle.is-single-column .video-wall-layout-choice--single {
	color: var(--text);
}

.video-wall-layout-toggle.is-single-column .video-wall-layout-choice--grid {
	color: var(--muted);
}

.video-wall-layout-track {
	position: relative;
	flex: 0 0 36px;
	width: 36px;
	height: 20px;
	border-radius: 20px;
	background: rgba(129, 171, 193, 0.5);
	transition: background 180ms ease;
}

.video-wall-layout-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	transition: transform 180ms ease;
}

.video-wall-layout-toggle.is-single-column .video-wall-layout-track {
	background: #0e8a9b;
}

.video-wall-layout-toggle.is-single-column .video-wall-layout-thumb {
	transform: translateX(16px);
}

@media (prefers-reduced-motion: reduce) {
	.video-wall-layout-choice,
	.video-wall-layout-track,
	.video-wall-layout-thumb {
		transition: none;
	}
}

@media (max-width: 760px) {
	.video-wall-heading-actions {
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	.video-wall-layout-toggle {
		width: 100%;
		justify-content: center;
	}
}

.video-wall-lease-message {
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px) auto;
	align-items: center;
	gap: 12px;
	border-color: rgba(244, 181, 75, 0.34);
	background: rgba(61, 43, 18, 0.32);
}

.video-wall-lease-message[data-state="unavailable"] {
	border-color: rgba(238, 105, 105, 0.55);
}

.camera-status-dot.is-paused {
	background: var(--amber);
}

.camera-action:disabled {
	opacity: 0.42;
	cursor: not-allowed;
}

@container workspace-monitoring (max-width: 760px) {
	.video-wall-lease-message {
		grid-template-columns: 1fr;
	}

	.video-wall-lease-message > span {
		max-width: none;
		text-align: left;
	}

	.video-wall-lease-message > button {
		justify-self: start;
	}
}

.video-wall-lease-message strong {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	line-height: 1.25;
}

.video-wall-lease-message > span {
	max-width: 360px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.35;
	text-align: right;
}

.benchmark-export-action {
	min-height: 36px;
	padding: 0 12px;
	font-size: 13px;
}

.benchmark-export-action:disabled {
	cursor: default;
	opacity: 0.58;
}

.accesses-section {
	display: grid;
	gap: 18px;
}

.accesses-section .section-heading {
	flex-wrap: wrap;
}

.access-contract-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
}

.access-contract-filter select {
	width: min(38vw, 430px);
	max-width: 100%;
	min-width: 240px;
	min-height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	padding: 0 14px;
	color: var(--text);
	background: #071f30;
}

.access-results-heading {
	display: flex;
	justify-content: flex-end;
}

.access-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 14px;
}

.access-card {
	position: relative;
	isolation: isolate;
	grid-template-rows: auto 1fr auto;
	min-height: 238px;
	overflow: hidden;
}

.access-card[hidden] {
	display: none;
}

.access-card-header,
.access-card-actions {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.access-card-header h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
}

.access-card-header p {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 14px;
}

.access-card-type-icon {
	position: absolute;
	right: -8px;
	bottom: -12px;
	z-index: 0;
	color: var(--cyan);
	font-size: 126px;
	line-height: 1;
	opacity: 0.18;
	pointer-events: none;
}

.access-card-actions {
	grid-row: 3;
	align-items: flex-end;
}

.access-action-status {
	min-height: 18px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
}

.access-action-status.is-pending {
	color: var(--amber);
}

.access-action-status.is-success {
	color: var(--green);
}

.access-action-status.is-error {
	color: var(--red);
}

.video-wall-panel {
	container-name: video-wall-panel;
	container-type: inline-size;
	gap: 0;
	overflow: hidden;
	padding: 0;
}

.video-wall-panel.is-expanded {
	grid-column: 1 / -1;
	order: -1;
}

.benchmark-video-panel .camera-panel-footer {
	padding: 12px 14px;
}

.benchmark-video-panel .camera-panel-header {
	padding: 10px 12px;
}

.benchmark-video-panel .camera-panel-footer {
	display: grid;
	align-items: stretch;
	gap: 10px;
}

.benchmark-video-panel .camera-viewport {
	min-height: 180px;
}

.camera-panel-header,
.camera-panel-footer {
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
}

.camera-panel-header {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	min-width: 0;
	border-bottom: 1px solid var(--line);
	background: rgba(3, 18, 28, 0.62);
}

.camera-panel-footer {
	display: grid;
}

.camera-panel-title {
	display: grid;
	flex: 1 1 auto;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
}

.camera-panel-title h3 {
	overflow: hidden;
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.camera-slot-select {
	width: min(100%, 390px);
	height: 34px;
	border: 1px solid rgba(129, 171, 193, 0.28);
	border-radius: 5px;
	padding: 0 10px;
	color: var(--text);
	background: rgba(7, 31, 48, 0.78);
	font-size: 14px;
	font-weight: 700;
}

[data-camera-community-select] {
	font-weight: 600;
}

.camera-slot-select option:disabled {
	color: var(--muted);
}

.camera-panel-title .section-kicker {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.camera-panel-actions {
	display: flex;
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-left: auto;
	max-width: 100%;
	min-width: max-content;
}

.camera-action {
	flex: 0 0 34px;
	width: 34px;
	min-width: 34px;
	border-color: rgba(216, 238, 248, 0.42);
	color: #f5fbff;
	background: #0b3147;
	opacity: 1;
	box-shadow: inset 0 0 0 1px rgba(107, 214, 255, 0.12);
}

.camera-action:hover,
.camera-action:focus {
	border-color: rgba(107, 214, 255, 0.76);
	background: #0e405e;
}

.camera-status-dot {
	display: inline-flex;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(245, 249, 255, 0.86);
	border-radius: 50%;
	background: #8da3b2;
	box-shadow: 0 0 0 3px rgba(4, 18, 28, 0.78), 0 0 14px rgba(141, 163, 178, 0.55);
	font-size: 0;
}

.camera-status-dot.is-connecting,
.camera-status-dot.is-authenticating,
.camera-status-dot.is-authorized,
.camera-status-dot.is-awaiting_stream {
	background: #6bd6ff;
	box-shadow: 0 0 0 3px rgba(4, 18, 28, 0.62), 0 0 15px rgba(107, 214, 255, 0.58);
}

.camera-status-dot.is-streaming {
	background: #52d38a;
	box-shadow: 0 0 0 3px rgba(4, 18, 28, 0.62), 0 0 15px rgba(87, 218, 160, 0.58);
}

.camera-status-dot.is-degraded,
.camera-status-dot.is-unauthorized,
.camera-status-dot.is-missing {
	background: #ff6278;
	box-shadow: 0 0 0 3px rgba(4, 18, 28, 0.62), 0 0 15px rgba(255, 98, 120, 0.52);
}

@container video-wall-panel (max-width: 680px) {
	.camera-panel-header {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-inline: 14px;
	}

	.camera-panel-title {
		flex: 1 1 0;
		min-width: 0;
	}

	.camera-panel-actions {
		justify-content: flex-end;
		width: auto;
		margin-left: auto;
		min-width: max-content;
	}
}

@container video-wall-panel (max-width: 420px) {
	.camera-panel-header {
		flex-wrap: wrap;
	}

	.camera-panel-title,
	.camera-panel-actions {
		flex-basis: 100%;
	}

	.camera-slot-select {
		width: 100%;
	}

	.video-wall-panel .camera-viewport {
		min-height: 180px;
	}
}

.camera-connect-icon,
.camera-expand-icon,
.camera-retry-icon {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
}

.camera-connect-icon {
	border: 2px solid currentColor;
	border-radius: 50%;
}

.camera-connect-icon:after {
	position: absolute;
	top: 4px;
	left: 5px;
	width: 0;
	height: 0;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 5px solid currentColor;
	content: "";
}

.camera-expand-icon:before,
.camera-expand-icon:after {
	position: absolute;
	width: 7px;
	height: 7px;
	content: "";
}

.camera-expand-icon:before {
	top: 1px;
	left: 1px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
}

.camera-expand-icon:after {
	right: 1px;
	bottom: 1px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.camera-expand-button.is-restore .camera-expand-icon:before {
	top: 4px;
	left: 4px;
	transform: rotate(180deg);
}

.camera-expand-button.is-restore .camera-expand-icon:after {
	right: 4px;
	bottom: 4px;
	transform: rotate(180deg);
}

.camera-retry-icon {
	color: currentColor;
}

.camera-retry-icon:before,
.camera-retry-icon:after {
	position: absolute;
	display: block;
	content: "";
}

.camera-retry-icon:before {
	inset: 2px;
	border: 2px solid currentColor;
	border-left-color: transparent;
	border-radius: 50%;
}

.camera-retry-icon:after {
	top: 1px;
	left: 2px;
	width: 5px;
	height: 5px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(-18deg);
}

.camera-viewport {
	position: relative;
	display: grid;
	aspect-ratio: 16 / 9;
	min-height: 320px;
	background:
		linear-gradient(rgba(119, 173, 196, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(119, 173, 196, 0.08) 1px, transparent 1px),
		#030d15;
	background-size: 38px 38px;
}

.camera-video,
.camera-video-placeholder {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

.camera-video {
	object-fit: cover;
	background: #02080d;
}

.camera-video-placeholder {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
}

.camera-video-placeholder[hidden],
.camera-video[hidden] {
	display: none;
}

.camera-video-placeholder strong {
	font-size: 18px;
}

.camera-video-placeholder span:not(.camera-lens) {
	max-width: 440px;
	color: var(--muted);
	line-height: 1.45;
}

.camera-lens {
	position: relative;
	width: 54px;
	height: 54px;
	border: 2px solid rgba(107, 214, 255, 0.66);
	border-radius: 50%;
	box-shadow: inset 0 0 0 10px rgba(107, 214, 255, 0.08), 0 0 28px rgba(107, 214, 255, 0.18);
}

.camera-lens:after {
	position: absolute;
	inset: 17px;
	border: 2px solid var(--cyan);
	border-radius: 50%;
	content: "";
}

.camera-panel-footer {
	border-top: 1px solid var(--line);
	background: rgba(3, 18, 28, 0.5);
}

.benchmark-playback-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(64px, 1fr));
	gap: 8px;
	width: 100%;
}

.benchmark-playback-stats div {
	display: grid;
	gap: 4px;
	min-width: 0;
	border-top: 1px solid rgba(129, 171, 193, 0.18);
	padding-top: 8px;
}

.benchmark-playback-stats span {
	overflow: hidden;
	color: var(--muted);
	font-size: 10px;
	font-weight: 700;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.benchmark-playback-stats strong {
	overflow: hidden;
	color: #d8eef8;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.section-heading a {
	color: var(--cyan);
	font-size: 13px;
}

.event-list,
.alarm-list {
	display: grid;
	gap: 10px;
}

.event-list > div {
	display: grid;
	grid-template-columns: 86px 130px minmax(0, 1fr);
	gap: 12px;
	min-height: 42px;
	align-items: center;
	border-top: 1px solid rgba(129, 171, 193, 0.18);
	color: var(--muted);
	font-size: 13px;
}

.event-list time,
.alarm-row time {
	color: #b6cad5;
}

.recent-events-panel {
	min-width: 0;
}

.recent-events-header {
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.recent-events-header .section-kicker {
	margin: 0;
}

.recent-events-filter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
	gap: 10px;
	align-items: center;
	padding-bottom: 12px;
	color: var(--muted);
	font-size: 12px;
}

.recent-events-filter select {
	appearance: none;
	width: 100%;
	min-width: 0;
	min-height: 34px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 7px 30px 7px 10px;
	color: var(--text);
	background: rgba(9, 31, 47, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%239eb2c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center / 14px no-repeat;
	font: inherit;
	color-scheme: dark;
	cursor: pointer;
}

.recent-events-filter select:hover {
	border-color: var(--line-strong);
}

.recent-events-filter select:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 2px;
}

.recent-events-filter option {
	color: var(--text);
	background: #092233;
}

.recent-events-state {
	padding: 16px 0 4px;
	color: var(--muted);
	font-size: 13px;
}

.recent-events-connection {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: auto;
}

.recent-events-connection .button {
	flex-shrink: 0;
	min-height: 25px;
	padding: 3px 7px;
	font-size: 11px;
}

.recent-events-status {
	min-height: 25px;
	max-width: 100%;
	border-radius: 999px;
	padding: 4px 8px;
	gap: 5px;
	color: #c5d4de;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	white-space: normal;
	text-align: center;
}

.recent-events-status::before {
	content: '';
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.recent-events-panel[data-events-state="ready"] .recent-events-status {
	color: #99e6b3;
	border-color: rgba(73, 190, 128, 0.5);
	background: rgba(27, 104, 65, 0.25);
}

.recent-events-panel[data-events-state="polling"] .recent-events-status {
	color: var(--cyan);
	border-color: rgba(107, 214, 255, 0.4);
}

.recent-events-panel:is([data-events-state="connecting"], [data-events-state="reconnecting"], [data-events-state="stale"]) .recent-events-status {
	color: #ffe2a1;
	border-color: rgba(240, 180, 70, 0.5);
	background: rgba(113, 75, 20, 0.25);
}

.recent-events-panel[data-events-state="unavailable"] .recent-events-status {
	color: #ffb3af;
	border-color: rgba(255, 75, 67, 0.5);
	background: rgba(116, 31, 28, 0.25);
}

.recent-events-list {
	max-height: 320px;
	overflow-y: auto;
	/* Arrivals move the rows; browser scroll anchoring must not counteract it.
	 * While reading older rows, arrivals are buffered instead of inserted. */
	overflow-anchor: none;
}

.recent-events-list .recent-event {
	--recent-event-accent: var(--cyan);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	column-gap: 8px;
	row-gap: 6px;
	min-height: 88px;
	border: 1px solid rgba(129, 171, 193, 0.22);
	border-radius: 8px;
	padding: 10px;
	background: rgba(8, 30, 45, 0.76);
}

.recent-event.is-warning {
	--recent-event-accent: var(--amber);
}

.recent-event:is(.is-critical, .is-error) {
	--recent-event-accent: var(--red);
}

.recent-event-watermark {
	position: absolute;
	z-index: -1;
	right: 32px;
	bottom: -6px;
	color: #c5d4de;
	font-size: 74px;
	line-height: 1;
	opacity: 0.2;
	pointer-events: none;
}

.recent-event.is-alarm .recent-event-watermark {
	bottom: 8px;
}

.recent-event.is-arriving {
	animation: recent-event-arrival 420ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

@keyframes recent-event-arrival {
	from { opacity: 0; transform: translateX(-28px); }
	to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.recent-event.is-arriving { animation: none; }
}

.recent-event-icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	color: var(--recent-event-accent);
	line-height: 1;
}

.recent-event-icon .fa-solid {
	font-size: 20px;
}

.recent-event-main {
	display: grid;
	grid-column: 2;
	grid-row: 1 / span 2;
	gap: 2px;
	min-width: 0;
}

.recent-event > time {
	grid-column: 3;
	grid-row: 2;
	align-self: end;
	justify-self: end;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}

.recent-event-main strong {
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recent-event-root {
	color: var(--cyan);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.recent-event-activity {
	color: #b6cad5;
	font-size: 12px;
}

.recent-event-details {
	color: var(--muted);
	font-size: 12px;
}

.recent-event-badge {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	justify-self: end;
	max-width: 100px;
	border: 1px solid rgba(129, 171, 193, 0.3);
	border-radius: 999px;
	padding: 3px 7px;
	color: #b6cad5;
	background: rgba(18, 54, 74, 0.52);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: capitalize;
	overflow-wrap: anywhere;
}

.recent-event.is-outcome-success .recent-event-badge,
.recent-event.is-outcome-completed .recent-event-badge {
	border-color: rgba(73, 190, 128, 0.6);
	color: #8fe0ae;
	background: rgba(27, 104, 65, 0.34);
}

.recent-event.is-outcome-requested .recent-event-badge,
.recent-event.is-warning .recent-event-badge {
	border-color: rgba(240, 180, 70, 0.58);
	color: var(--amber);
	background: rgba(113, 75, 20, 0.28);
}

.recent-event.is-outcome-failed .recent-event-badge,
.recent-event.is-critical .recent-event-badge {
	border-color: rgba(255, 75, 67, 0.58);
	color: #ff9d98;
	background: rgba(116, 31, 28, 0.3);
}

.recent-event.is-warning strong {
	color: var(--amber);
}

.recent-event.is-critical strong {
	color: var(--red);
}

.recent-events-new {
	margin-top: 12px;
	border: 1px solid rgba(129, 171, 193, 0.32);
	border-radius: 5px;
	padding: 6px 10px;
	color: var(--cyan);
	background: rgba(8, 30, 45, 0.76);
	cursor: pointer;
}

.alarm-row,
.status-row {
	min-height: 58px;
	border: 1px solid rgba(129, 171, 193, 0.24);
	border-radius: 7px;
	padding: 10px 12px;
	background: rgba(8, 30, 45, 0.76);
}

.alarm-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(90px, auto) 86px;
	gap: 12px;
	align-items: center;
}

.alarm-row.is-alarm {
	border-color: rgba(255, 75, 67, 0.55);
}

.alarm-row.is-attention {
	border-color: rgba(255, 178, 28, 0.55);
}

.section-band {
	display: grid;
	gap: 18px;
	border-top: 1px solid var(--line);
	padding-top: 20px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 0 18px;
	cursor: pointer;
	font-weight: 700;
	white-space: nowrap;
}

.button-primary {
	color: #04141f;
	border-color: var(--teal);
	background: var(--teal);
	box-shadow: 0 0 24px rgba(18, 214, 194, 0.18);
}

.button-secondary {
	color: #bdeeff;
	border-color: rgba(107, 214, 255, 0.58);
	background: rgba(6, 31, 48, 0.88);
}

.button:disabled,
.button[aria-disabled="true"] {
	opacity: 0.42;
	cursor: not-allowed;
}

.planning-context-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(190px, 1fr)) auto;
	align-items: end;
	gap: 14px;
}

.planning-heading-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.planning-context-controls label {
	display: grid;
	gap: 7px;
	min-width: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.planning-context-controls select {
	width: 100%;
	min-width: 0;
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 12px;
	color: var(--text);
	background: rgba(5, 21, 34, 0.92);
}

[data-planning-message]:empty {
	display: none;
}

.planning-calendar-context {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--line);
}

.planning-calendar-context label {
	display: flex;
	flex: 0 1 360px;
	align-items: center;
	gap: 8px;
}

.planning-calendar-context select {
	flex: 1;
	min-height: 32px;
	font-size: 12px;
}

.planning-calendar-context [data-planning-owner-field][hidden] {
	display: none;
}

.planning-board-panel .planning-calendar-context .button {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
}

.planning-board-panel > .planning-message {
	margin: 8px 16px;
}

.planning-message {
	margin: 0;
	border-left: 3px solid var(--cyan);
	padding: 8px 12px;
	color: var(--muted);
	background: rgba(107, 214, 255, 0.07);
}

.planning-message.is-success {
	border-left-color: var(--green);
	color: #a8f5e9;
}

.planning-message.is-warning {
	border-left-color: var(--amber);
	color: #ffe2a1;
}

.planning-message.is-error {
	border-left-color: var(--red);
	color: #ffc5ca;
}

.planning-load-recovery {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 16px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--muted);
}

.planning-load-recovery > div {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

[data-planning-load-state="error"] .planning-load-recovery {
	border-color: var(--red);
	color: #ffc5ca;
}

[data-planning-load-state="loading"] .planning-timeline,
[data-planning-load-state="error"] .planning-timeline {
	opacity: 0.5;
}

.planning-coverage-scoreboard {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.planning-coverage-scoreboard > div {
	display: grid;
	gap: 4px;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 9px;
	background: rgba(107, 214, 255, 0.045);
}

.planning-coverage-scoreboard span,
.planning-coverage-scoreboard strong {
	font-size: 10px;
}

.planning-coverage-scoreboard span {
	color: var(--muted);
	font-weight: 700;
	text-transform: uppercase;
}

.planning-coverage-scoreboard .is-covered {
	color: #a8f5e9;
}

.planning-coverage-scoreboard .is-partial {
	color: #ffe2a1;
}

.planning-coverage-scoreboard .has-gap {
	color: #ffc5ca;
}

.planning-finalize-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(1, 10, 17, 0.78);
	backdrop-filter: blur(3px);
}

.planning-finalize-backdrop[hidden] {
	display: none;
}

.planning-finalize-dialog {
	display: grid;
	gap: 16px;
	width: min(680px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 22px;
	color: var(--text);
	background: #071f30;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.planning-finalize-dialog p,
.planning-finalize-dialog h3 {
	margin: 0;
}

.planning-finalize-dialog [hidden] {
	display: none !important;
}

.planning-draft-restriction {
	border: 1px solid #ff6b70;
	border-radius: 6px;
	padding: 12px;
	color: #fff;
	background: rgba(142, 34, 43, 0.6);
}

.planning-finalize-options label.is-restricted,
.planning-finalize-options label.is-restricted:has(input:checked) {
	border-color: #ff6b70;
	background: rgba(142, 34, 43, 0.18);
	cursor: not-allowed;
}

.planning-finalize-options .planning-output-reason {
	border-left: 2px solid #ff6b70;
	margin-top: 4px;
	padding-left: 8px;
	color: #ffb0b3;
	font-weight: 400;
}

.planning-finalize-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.planning-icon-button {
	display: inline-grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 7px;
	color: var(--muted);
	background: transparent;
}

.planning-finalize-options {
	display: grid;
	gap: 8px;
	margin: 0;
	border: 0;
	padding: 0;
}

.planning-finalize-options legend {
	margin-bottom: 8px;
	font-weight: 700;
}

.planning-finalize-options label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
	cursor: pointer;
}

.planning-finalize-options label:has(input:checked) {
	border-color: var(--cyan);
	background: rgba(107, 214, 255, 0.08);
}

.planning-finalize-options span {
	display: grid;
	gap: 3px;
}

.planning-finalize-options small,
.planning-finalize-dialog > p {
	color: var(--muted);
}

.planning-finalize-template-name {
	display: grid;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
}

.planning-finalize-template-name input {
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 0 12px;
	color: var(--text);
	background: rgba(5, 21, 34, 0.92);
}

.planning-field-alert {
	border-left: 3px solid var(--red);
	padding: 6px 9px;
	color: #ffc5ca;
	background: rgba(255, 95, 108, 0.08);
	font-size: 11px;
	font-weight: 600;
}

.planning-finalize-warning,
.planning-finalize-ready {
	display: grid;
	gap: 5px;
	border-left: 3px solid var(--amber);
	padding: 10px 12px;
	color: #ffe2a1;
	background: rgba(255, 178, 28, 0.08);
}

.planning-finalize-ready {
	border-left-color: var(--green);
	color: #a8f5e9;
	background: rgba(18, 214, 194, 0.08);
}

.planning-finalize-warning span,
.planning-finalize-ready span {
	font-size: 12px;
}

.planning-board-panel {
	gap: 0;
	padding: 0;
	overflow: hidden;
	scroll-margin-top: 16px;
}

.planning-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
}

.planning-toolbar > h2 {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 16px;
	text-align: center;
}

.planning-period-navigation,
.planning-view-switch,
.planning-form-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.planning-view-switch {
	justify-content: flex-end;
}

.planning-period-navigation .button,
.planning-view-switch .button {
	min-height: 38px;
	padding: 0 12px;
}

.planning-view-switch .button.is-active {
	color: #04141f;
	border-color: var(--teal);
	background: var(--teal);
}

.planning-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
}

.planning-legend span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.planning-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cyan);
}

.planning-legend-dot.is-extra {
	background: var(--purple);
}

.planning-legend-dot.is-covered {
	background: var(--green);
}

.planning-legend-dot.is-proposal {
	border: 2px dashed var(--amber);
	background: rgba(255, 178, 28, 0.25);
}

.planning-legend-dot.is-gap {
	border: 2px solid var(--red);
	background: transparent;
}

.planning-board-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	min-height: 520px;
}

.planning-board-main {
	min-width: 0;
	overflow: hidden;
}

.planning-timeline {
	min-width: 980px;
}

.planning-timeline-header,
.planning-timeline-row {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
}

.planning-timeline-header {
	position: sticky;
	top: 0;
	z-index: 6;
	min-height: 58px;
	border-bottom: 1px solid var(--line);
	background: #071f30;
}

.planning-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.planning-days > div {
	display: grid;
	place-content: center;
	border-left: 1px solid var(--line);
	text-align: center;
}

.planning-days strong {
	text-transform: capitalize;
}

.planning-days span {
	color: var(--muted);
	font-size: 11px;
}

.planning-row-label {
	display: grid;
	align-content: center;
	gap: 3px;
	min-width: 0;
	padding: 10px 14px;
	border-right: 1px solid var(--line);
}

.planning-row-label strong,
.planning-row-label span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-row-label span,
.planning-row-label small {
	color: var(--muted);
	font-size: 11px;
}

.planning-row-label small.has-gap {
	color: #ffc5ca;
}

.planning-row-label small.is-covered {
	color: #a8f5e9;
}

.planning-timeline-row {
	min-height: 88px;
	border-bottom: 1px solid var(--line);
	background: rgba(5, 21, 34, 0.45);
}

.planning-timeline-row:nth-child(odd) {
	background: rgba(10, 34, 50, 0.42);
}

.planning-creation-row {
	min-height: 64px;
	background: rgba(18, 214, 194, 0.045);
}

.planning-row-track {
	position: relative;
	min-width: 0;
	background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(14.2857% - 1px), rgba(107, 214, 255, 0.15) calc(14.2857% - 1px), rgba(107, 214, 255, 0.15) 14.2857%);
}

.planning-workshift-drop {
	display: grid;
	place-content: center;
	border: 1px dashed transparent;
	color: var(--muted);
	font-size: 12px;
	cursor: crosshair;
	transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.planning-workshift-drop:hover,
.planning-workshift-drop:focus-visible,
.planning-workshift-drop.is-drop-target {
	border-color: var(--teal);
	color: var(--teal);
	background-color: rgba(18, 214, 194, 0.11);
	outline: none;
}

.planning-workshift-drop.is-drop-target {
	box-shadow: inset 0 0 0 2px rgba(18, 214, 194, 0.26);
}

.planning-schedule-block,
.planning-workshift-block,
.planning-shift-block {
	position: absolute;
	z-index: 2;
	min-width: 4px;
	overflow: hidden;
	border: 1px solid;
	border-radius: 6px;
	text-align: left;
	cursor: pointer;
}

.planning-schedule-block {
	top: 12px;
	display: grid;
	gap: 2px;
	height: 62px;
	padding: 7px 8px 11px;
	color: #bdeeff;
	border-color: rgba(107, 214, 255, 0.72);
	background: rgba(17, 82, 107, 0.74);
}

.planning-schedule-block.is-extra {
	color: #eadcff;
	border-color: rgba(167, 139, 250, 0.78);
	background: rgba(82, 55, 145, 0.74);
}

.planning-schedule-block.has-gap {
	box-shadow: inset 0 0 0 1px rgba(255, 95, 108, 0.78);
}

.planning-schedule-block.is-covered {
	box-shadow: inset 0 0 0 1px rgba(18, 214, 194, 0.72);
}

.planning-schedule-block.is-drop-target {
	z-index: 5;
	outline: 3px solid var(--teal);
	outline-offset: 3px;
	transform: translateY(-2px);
}

.planning-schedule-block strong,
.planning-schedule-block span {
	overflow: hidden;
	font-size: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-assignment-track {
	position: absolute;
	right: 4px;
	bottom: 3px;
	left: 4px;
	height: 4px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.3);
}

.planning-assignment-bar {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--green);
}

.planning-timeline-row.is-team-row {
	min-height: 96px;
}

.planning-workshift-block {
	top: 13px;
	height: 30px;
	padding: 5px 7px;
	color: #bdeeff;
	border-color: rgba(107, 214, 255, 0.62);
	background: rgba(17, 82, 107, 0.64);
}

.planning-workshift-block.is-draft {
	border-style: dashed;
}

.planning-workshift-block strong,
.planning-shift-block {
	font-size: 10px;
	white-space: nowrap;
}

.planning-shift-block {
	top: 52px;
	height: 28px;
	padding: 5px 7px;
	color: #a8f5e9;
	border-color: rgba(18, 214, 194, 0.65);
	background: rgba(18, 214, 194, 0.2);
}

.planning-timeline-empty {
	display: grid;
	gap: 12px;
	min-height: 300px;
	place-content: center;
	color: var(--muted);
	text-align: center;
}

.planning-timeline-empty i {
	font-size: 30px;
}

.planning-sidebar {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 778px;
	max-height: 778px;
	overflow: hidden;
	border-left: 1px solid var(--line);
	background: rgba(5, 21, 34, 0.78);
}

.planning-sidebar.is-editing-block {
	border-left: 3px solid var(--planning-group-accent);
	background: linear-gradient(rgba(5, 21, 34, 0.82), rgba(5, 21, 34, 0.82)), var(--planning-group-background);
	box-shadow: none;
}

.planning-sidebar.is-editing-block .planning-group-steps,
.planning-sidebar.is-editing-block .planning-group-actions {
	background: transparent;
}

.planning-sidebar.is-editing-block [data-planning-editor-title] {
	color: var(--planning-group-text);
}

.planning-sidebar-mode {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: #071f30;
}

.planning-sidebar-mode > div {
	display: grid;
	gap: 3px;
}

.planning-sidebar-mode strong {
	font-size: 14px;
}

.planning-mode-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 12px;
	white-space: nowrap;
}

.planning-mode-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.planning-mode-switch-track {
	position: relative;
	width: 38px;
	height: 22px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #17364a;
	transition: background 160ms ease;
}

.planning-mode-switch-track::after {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--text);
	content: '';
	transition: transform 160ms ease;
}

.planning-mode-switch input:checked + .planning-mode-switch-track {
	background: var(--teal);
}

.planning-mode-switch input:checked + .planning-mode-switch-track::after {
	transform: translateX(16px);
}

.planning-mode-switch input:focus-visible + .planning-mode-switch-track {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
}

.planning-mode-switch input:disabled + .planning-mode-switch-track {
	opacity: 0.5;
}

.planning-sidebar-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 20px;
	scroll-padding-block: 18px;
}

.planning-sidebar-content > section,
.planning-sidebar-content > form,
[data-planning-contract-choices] {
	display: grid;
	gap: 12px;
}

.planning-sidebar-content > section > :nth-child(1 of :not([hidden])) {
	border-top: 0;
	padding-top: 0;
}

.planning-group-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	flex-shrink: 0;
	gap: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	background: #071f30;
}

.planning-group-steps button {
	display: grid;
	gap: 3px;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 8px;
	text-align: left;
	color: var(--text);
	background: transparent;
	cursor: pointer;
	font-size: 12px;
}

.planning-group-steps small {
	color: var(--muted);
	font-size: 10px;
}

.planning-group-steps .is-complete small {
	color: var(--green);
}

.planning-group-steps [aria-current="step"],
.planning-group-steps button:focus-visible {
	border-color: var(--planning-group-accent, var(--cyan));
	background: rgba(56, 189, 248, 0.08);
}

.planning-group-steps button.has-error {
	border-color: var(--red);
	background: rgba(142, 34, 43, 0.18);
}

.planning-group-steps .has-error small,
.planning-step-issues {
	color: #ffc5ca;
}

.planning-group-steps button.has-warning {
	border-color: var(--amber);
}

.planning-group-steps .has-warning small,
.planning-step-issues.is-warning {
	color: #ffe2a1;
}

.planning-step-issues {
	display: grid;
	gap: 4px;
	border-left: 2px solid var(--red);
	padding: 5px 8px;
	font-size: 12px;
}

.planning-step-issues.is-warning {
	border-left-color: var(--amber);
}

.planning-block-demand summary {
	cursor: pointer;
	color: var(--muted);
	font-size: 12px;
}

.planning-block-demand summary > span {
	float: right;
	font-variant-numeric: tabular-nums;
}

.planning-block-demand[open] summary {
	margin-bottom: 10px;
}

.planning-sidebar-group:focus-visible {
	outline: 1px solid var(--cyan);
	outline-offset: 3px;
}

.planning-group-actions {
	display: grid;
	flex-shrink: 0;
	gap: 9px;
	border-top: 1px solid var(--line);
	padding: 12px 14px;
	background: #071f30;
}

.planning-group-actions .planning-form-actions {
	display: grid;
	margin: 0;
}

.planning-group-actions .button {
	min-width: 0;
	white-space: normal;
	text-align: center;
}

.planning-sidebar [hidden] {
	display: none !important;
}

.planning-sidebar h3,
.planning-sidebar p {
	margin: 0;
}

.planning-sidebar-eyebrow {
	color: var(--teal);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.planning-detail-facts {
	display: grid;
	gap: 10px;
	margin: 0;
}

.planning-detail-facts > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 8px;
}

.planning-detail-facts dt {
	color: var(--muted);
}

.planning-detail-facts dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

.planning-operator-pool {
	margin-top: 22px;
	border-top: 1px solid var(--line);
	padding-top: 18px;
}

.planning-sidebar-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.planning-sidebar-section-heading > span {
	display: inline-grid;
	min-width: 28px;
	height: 28px;
	place-content: center;
	border-radius: 50%;
	color: #04141f;
	background: var(--teal);
	font-weight: 800;
}

.planning-form-hint {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.45;
}

.planning-candidate-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.planning-candidate-heading > div {
	display: flex;
	gap: 8px;
}

.planning-candidate-heading button {
	border: 0;
	padding: 0;
	color: var(--cyan);
	background: transparent;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}

.planning-candidate-list {
	display: grid;
	gap: 7px;
	max-height: 260px;
	overflow-y: auto;
}

.planning-candidate {
	display: grid !important;
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: start;
	gap: 9px !important;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 9px;
	color: var(--text) !important;
	background: rgba(10, 34, 50, 0.72);
	font-size: 12px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer;
}

.planning-candidate:has(input:checked) {
	border-color: rgba(18, 214, 194, 0.6);
	background: rgba(18, 214, 194, 0.1);
}

.planning-candidate input {
	width: 16px;
	min-height: 16px;
	margin: 1px 0 0;
	accent-color: var(--teal);
}

.planning-candidate span {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.planning-candidate small,
.planning-candidate-empty {
	color: var(--muted);
	font-size: 11px;
	line-height: 1.4;
}

.planning-candidate-empty {
	border: 1px dashed var(--line);
	border-radius: 6px;
	padding: 12px;
	text-align: center;
}

.planning-operator-list {
	display: grid;
	gap: 8px;
}

.planning-operator-chip {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 10px;
	color: var(--text);
	background: rgba(10, 34, 50, 0.82);
	text-align: left;
	cursor: grab;
}

.planning-operator-chip:hover,
.planning-operator-chip:focus-visible {
	border-color: var(--teal);
}

.planning-operator-chip > i {
	color: var(--muted);
}

.planning-operator-chip span {
	display: grid;
	min-width: 0;
}

.planning-operator-chip strong,
.planning-operator-chip small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-operator-chip small {
	color: var(--muted);
}

[data-planning-assignment] label {
	display: grid;
	gap: 6px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

[data-planning-assignment] input,
[data-planning-assignment] select {
	width: 100%;
	min-width: 0;
	min-height: 40px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 10px;
	color: var(--text);
	background: #071f30;
}

.planning-form-actions {
	flex-wrap: wrap;
	justify-content: flex-end;
	border-top: 1px solid var(--line);
	padding-top: 14px;
}

.planning-form-actions .button {
	min-height: 38px;
	padding: 0 11px;
}

.planning-split-button[hidden] {
	display: none;
}

.planning-preview {
	display: grid;
	gap: 3px;
	border-left: 3px solid var(--amber);
	padding: 9px 11px;
	background: rgba(255, 178, 28, 0.08);
}

.planning-preview.is-covered {
	border-left-color: var(--green);
	background: rgba(18, 214, 194, 0.08);
}

.planning-preview span {
	color: var(--muted);
	font-size: 11px;
}

/* Planning calendar workspace. */
.planning-timeline {
	min-width: 0;
}

/* Horizontal planning editor. Workshifts and contractual demand share one
 * scalable weekly ruler while contract rows scroll independently. */
.planning-toolbar-controls {
	display: flex;
	justify-self: end;
	min-width: 0;
	align-items: center;
	gap: 10px;
}

.planning-edit-actions,
.planning-zoom-controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
}

.planning-edit-actions {
	border-right: 1px solid var(--line);
	padding-right: 10px;
}

.planning-zoom-controls > [data-planning-zoom-label] {
	min-width: 36px;
	color: var(--muted);
	font-size: 11px;
	text-align: center;
}

.planning-toolbar-controls .button {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	gap: 6px;
	padding: 0;
	white-space: nowrap;
}

.planning-toolbar-controls .button > span {
	min-width: 0;
	color: inherit;
	font-size: 11px;
}

.planning-toolbar-controls .button > i {
	flex-shrink: 0;
}

.planning-toolbar-controls .planning-create-button {
	width: auto;
	padding: 0 10px;
}

.planning-toolbar > .planning-period-navigation {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}

@media (max-width: 1280px) {
	.planning-toolbar-controls {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

@media (max-width: 620px) {
	.planning-toolbar-controls {
		justify-content: flex-end;
		flex-wrap: wrap;
	}
}

.planning-linear-scroll {
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background: #061a29;
}

.planning-linear-scroll.is-template-drop-target {
	box-shadow: inset 0 0 0 3px var(--amber);
}

.planning-adjacent-preview {
	position: fixed;
	z-index: 1300;
	display: grid;
	gap: 7px;
	width: 220px;
	border: 1px solid var(--cyan);
	border-radius: 8px;
	padding: 10px 12px;
	color: var(--text);
	background: #09273a;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48);
	pointer-events: none;
}

.planning-adjacent-preview strong {
	font-size: 12px;
}

.planning-adjacent-preview > span,
.planning-adjacent-preview small {
	font-size: 11px;
}

.planning-adjacent-preview small {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
}

.planning-adjacent-preview-ruler {
	position: relative;
	height: 16px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: linear-gradient(to right, transparent 49.6%, var(--line) 50%, transparent 50.4%);
}

.planning-adjacent-preview-ruler i {
	position: absolute;
	top: 2px;
	bottom: 2px;
	border-radius: 3px;
	background: var(--cyan);
}

.planning-linear-canvas {
	width: calc(220px + var(--timeline-width));
	min-width: 100%;
}

.planning-linear-header,
.planning-linear-row {
	display: grid;
	grid-template-columns: 220px minmax(var(--timeline-width), 1fr);
}

.planning-linear-header {
	position: relative;
	z-index: 14;
	height: 58px;
	border-bottom: 1px solid var(--line);
	background: #071f30;
}

.planning-linear-corner,
.planning-linear-row-label {
	position: sticky;
	left: 0;
	z-index: 12;
	box-sizing: border-box;
	width: 220px;
	border-right: 1px solid var(--line);
	background: #071f30;
}

.planning-linear-corner {
	display: grid;
	align-items: center;
	padding: 0 16px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.planning-linear-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background-image: linear-gradient(to right, rgba(107, 214, 255, 0.23) 1px, transparent 1px);
	background-size: calc(100% / 7) 100%;
}

.planning-linear-days > div {
	position: relative;
	display: grid;
	place-content: center;
	border-left: 1px solid var(--line);
	text-align: center;
}

.planning-linear-days > div.is-covered strong {
	color: #bff7bc;
}

.planning-linear-days > div strong > i {
	margin-left: 6px;
	color: var(--green);
	font-size: 11px;
}

.planning-linear-time-ticks {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 15px;
	pointer-events: none;
}

.planning-linear-time-ticks > i {
	position: absolute;
	bottom: 0;
	height: 7px;
	border-left: 1px solid rgba(158, 178, 192, 0.58);
}

.planning-linear-time-ticks > i > span {
	position: absolute;
	bottom: 6px;
	color: rgba(158, 178, 192, 0.82);
	font-size: 8px;
	font-style: normal;
	transform: translateX(-50%);
}

.planning-linear-days strong,
.planning-linear-days span {
	display: block;
}

.planning-linear-days strong {
	text-transform: capitalize;
}

.planning-linear-days span {
	color: var(--muted);
	font-size: 11px;
}

.planning-linear-days > div > span {
	margin-bottom: 4px;
}

.planning-linear-row {
	height: var(--row-height);
	min-height: 54px;
	border-bottom: 1px solid var(--line);
}

.planning-linear-row.is-workshift {
	border-bottom: 3px solid rgba(107, 214, 255, 0.32);
	background: rgba(18, 214, 194, 0.045);
}

.planning-linear-row-label {
	display: grid;
	align-content: center;
	gap: 3px;
	min-width: 0;
	padding: 9px 14px;
}

.planning-linear-row-label strong,
.planning-linear-row-label span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-linear-row-label span,
.planning-linear-row-label small {
	color: var(--muted);
	font-size: 11px;
}

.planning-linear-row-label small.has-pending {
	color: #ffc5ca;
}

.planning-linear-contracts {
	display: grid;
	grid-template-columns: 220px minmax(var(--timeline-width), 1fr);
	height: max(430px, calc(778px - 58px - var(--work-row-height)));
	min-height: 0;
}

.planning-linear-contract-labels,
.planning-linear-contract-tracks {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	scroll-snap-type: y mandatory;
}

.planning-linear-contract-labels {
	position: sticky;
	left: 0;
	z-index: 11;
	overflow-x: hidden;
	border-right: 1px solid var(--line);
	background: #071f30;
	scrollbar-width: none;
}

.planning-linear-contract-labels::-webkit-scrollbar {
	display: none;
}

.planning-linear-contract-tracks {
	position: relative;
	overflow-x: hidden;
	scrollbar-width: none;
}

.planning-linear-contract-tracks::-webkit-scrollbar {
	display: none;
}

.planning-linear-contract-label,
.planning-linear-contract-track {
	box-sizing: border-box;
	height: var(--row-height);
	min-height: 78px;
	border-bottom: 1px solid var(--line);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	transition: opacity 180ms ease, filter 180ms ease;
}

.planning-linear-contract-label.is-unrelated,
.planning-linear-contract-track.is-unrelated {
	opacity: 0.28;
	filter: saturate(0.35);
}

.planning-linear-contract-label.is-unrelated:hover,
.planning-linear-contract-label.is-unrelated:focus-visible {
	opacity: 0.62;
}

.planning-linear-contract-label {
	display: grid;
	align-content: center;
	gap: 4px;
	width: 100%;
	min-width: 0;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	padding: 11px 14px;
	color: var(--text);
	text-align: left;
	background: #071f30;
}

.planning-linear-contract-label:hover,
.planning-linear-contract-label.is-selected {
	background: rgba(107, 214, 255, 0.12);
}

.planning-linear-contract-label:nth-child(even),
.planning-linear-contract-track:nth-child(even) {
	background-color: #092235;
}

.planning-linear-contract-label strong,
.planning-linear-contract-label span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-linear-contract-label span,
.planning-linear-contract-label small {
	color: var(--muted);
	font-size: 11px;
}

.planning-linear-contract-label small.has-pending {
	color: #ffc5ca;
}

.planning-linear-contract-scroll-tail {
	height: calc(100% - 78px);
	min-height: 352px;
	pointer-events: none;
}

.planning-linear-track {
	position: relative;
	min-width: 0;
	background-color: rgba(5, 21, 34, 0.5);
	background-image:
		linear-gradient(to right, rgba(107, 214, 255, 0.34) 1px, transparent 1px),
		linear-gradient(to right, rgba(107, 214, 255, 0.15) 1px, transparent 1px),
		linear-gradient(to right, rgba(107, 214, 255, 0.055) 1px, transparent 1px);
	background-size: calc(100% / 7) 100%, var(--major-grid-size) 100%, var(--minor-grid-size) 100%;
}

.planning-linear-track::after {
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--elapsed-width);
	background: repeating-linear-gradient(
		-45deg,
		rgba(4, 20, 31, 0.65) 0,
		rgba(4, 20, 31, 0.65) 5px,
		rgba(158, 178, 192, 0.28) 5px,
		rgba(158, 178, 192, 0.28) 10px
	);
	box-shadow: inset -2px 0 #c9d4df;
	content: '';
	pointer-events: none;
}

.is-editing-planning:not(.is-editing-local-pattern) .planning-linear-track::after {
	box-shadow: none;
}

.is-creating-workshift .planning-linear-workshift-track {
	cursor: crosshair;
	touch-action: none;
}

.planning-linear-empty,
.planning-linear-no-contracts {
	display: grid;
	place-content: center;
	color: var(--muted);
	font-size: 11px;
}

.planning-linear-no-contracts {
	min-height: 120px;
}

.planning-linear-block,
.planning-linear-demand {
	position: absolute;
	box-sizing: border-box;
	min-width: 5px;
	overflow: hidden;
	border: 1px solid;
	border-radius: 7px;
	padding: 5px 8px;
	text-align: left;
}

.planning-linear-block strong,
.planning-linear-block span,
.planning-linear-block small,
.planning-linear-demand strong,
.planning-linear-demand span {
	display: block;
	overflow: hidden;
	font-size: 10px;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-linear-block small {
	display: block;
	overflow: hidden;
	color: var(--muted);
	font-size: 9px;
	text-overflow: ellipsis;
	text-transform: capitalize;
	white-space: nowrap;
}

.planning-linear-workshift {
	z-index: 3;
	color: #bdeeff;
	border-color: rgba(107, 214, 255, 0.7);
	background: rgba(17, 82, 107, 0.84);
}

.planning-linear-workshift.is-time-locked {
	cursor: not-allowed;
}

.planning-drawing-cursor {
	border: 1px solid var(--planning-group-accent, #31c7f3);
	border-left-width: 5px;
	border-radius: 5px;
	padding: 6px 10px;
	background: var(--planning-group-background, #075677);
	color: var(--planning-group-text, #def7ff);
	font-size: 12px;
}

.planning-drawing-cursor {
	position: fixed;
	z-index: 1200;
	max-width: min(320px, calc(100vw - 24px));
	box-sizing: border-box;
	overflow-wrap: anywhere;
	pointer-events: none;
}

.planning-linear-reference {
	z-index: 2;
	border-style: dashed;
	border-color: #a5b8c8;
	color: #c7d5df;
	background: rgba(76, 96, 111, 0.22);
	opacity: 0.65;
	pointer-events: none;
}

.planning-linear-workshift.is-draft {
	border-style: dashed;
}

.planning-linear-workshift.is-frozen-head {
	border-color: var(--amber);
	background: rgba(92, 71, 43, 0.9);
	box-shadow: inset -3px 0 var(--amber);
}

.planning-linear-block.is-dimmed {
	opacity: 0.18;
	filter: saturate(0.35);
}

.planning-linear-workshift.is-focused {
	z-index: 9;
	outline: 2px solid var(--cyan);
	outline-offset: 2px;
}

.planning-linear-block.is-split-target {
	z-index: 10;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.planning-detail-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.planning-linear-proposal,
.planning-linear-selection {
	z-index: 6;
	color: var(--planning-group-text, #ffe2a1);
	border-color: var(--planning-group-accent, rgba(255, 178, 28, 0.9));
	background: var(--planning-group-background, rgba(118, 76, 8, 0.9));
}

.planning-linear-proposal {
	border-style: dashed;
}

.planning-linear-selection {
	color: var(--planning-group-text, #c8fff8);
	border-color: var(--planning-group-accent, var(--teal));
	background: var(--planning-group-background, rgba(10, 108, 100, 0.92));
	cursor: grab;
}

.planning-linear-selection:active {
	cursor: grabbing;
}

.planning-linear-selection.is-selected {
	z-index: 9;
	overflow: visible;
	box-shadow: 0 0 0 2px #071f30, 0 0 0 4px var(--cyan);
}

.planning-linear-block.is-merge-candidate {
	opacity: 1;
	filter: none;
	border-color: #edc5ff;
	box-shadow: 0 0 0 2px #071f30, 0 0 0 5px #d68bff, 0 0 16px rgba(214, 139, 255, 0.65);
}

.planning-merge-point {
	position: fixed;
	z-index: 1240;
	display: grid;
	place-items: center;
	padding: 0;
	margin: 0;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	border: 2px solid #edc5ff;
	border-radius: 50%;
	background: #7436a8;
	box-shadow: 0 0 0 3px #071f30, 0 0 14px rgba(214, 139, 255, 0.75);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.planning-merge-point > i {
	display: grid;
	place-items: center;
	width: 1em;
	height: 1em;
	margin: 0;
	font-size: 14px;
	line-height: 1;
}

.planning-merge-point.is-preview {
	pointer-events: none;
}

.planning-merge-point[hidden] {
	display: none;
}

.planning-merge-point:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.planning-merge-point.is-open {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
}

.planning-merge-point.is-error {
	border-color: #ff9ba0;
	background: #8e222b;
	box-shadow: 0 0 0 3px #071f30, 0 0 14px rgba(255, 107, 112, 0.6);
}

.planning-linear-block.is-merge-restricted {
	opacity: 1;
	filter: none;
	border-color: #ff6b70;
	box-shadow: 0 0 0 2px #ff6b70;
}

.planning-cross-merge-feedback {
	position: fixed;
	z-index: 1250;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: min(270px, calc(100vw - 24px));
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #8cebf1;
	border-radius: 8px;
	padding: 8px 10px;
	background: #07394b;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	color: #def7ff;
	font-size: 12px;
}

.planning-cross-merge-feedback::after {
	position: absolute;
	bottom: -7px;
	left: var(--merge-arrow-left, 50%);
	width: 12px;
	height: 12px;
	border-right: 1px solid #8cebf1;
	border-bottom: 1px solid #8cebf1;
	background: inherit;
	transform: translateX(-50%) rotate(45deg);
	content: '';
}

.planning-cross-merge-feedback.is-below::after {
	top: -7px;
	bottom: auto;
	transform: translateX(-50%) rotate(225deg);
}

.planning-cross-merge-feedback[hidden],
.planning-cross-merge-feedback [hidden] {
	display: none;
}

.planning-merge-question {
	display: grid;
	grid-column: 1;
}

.planning-merge-question strong {
	font-size: 12px;
	font-weight: 500;
}

.planning-merge-decisions {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	gap: 6px;
	margin-left: auto;
}

.planning-merge-decision {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid currentColor;
	border-radius: 7px;
	font-size: 18px;
	cursor: pointer;
}

.planning-merge-decision.is-confirm {
	color: #97f591;
	background: rgba(43, 111, 58, 0.3);
}

.planning-cross-merge-feedback .planning-merge-decision {
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 14px;
}

.planning-merge-decision.is-dismiss {
	color: #ff9ba0;
	background: rgba(142, 34, 43, 0.25);
}

.planning-merge-decision:hover:not(:disabled) {
	box-shadow: 0 0 0 2px currentColor;
}

.planning-merge-decision:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.planning-merge-decision:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.planning-linear-demand {
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 7px;
	color: #bdeeff;
	border-color: rgba(107, 214, 255, 0.58);
	background: rgba(17, 82, 107, 0.42);
}

.planning-linear-demand-fill {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	border-right: 1px solid rgba(151, 245, 145, 0.72);
	background: rgba(98, 210, 95, 0.32);
	pointer-events: none;
}

.planning-linear-demand > strong,
.planning-linear-demand > span {
	position: relative;
	z-index: 1;
}

.planning-linear-demand.is-extra {
	color: #eadcff;
	border-color: rgba(167, 139, 250, 0.74);
	background: rgba(82, 55, 145, 0.58);
}

.planning-linear-demand.is-ended {
	opacity: 0.48;
	filter: grayscale(0.45);
}

.planning-linear-demand.is-in-progress {
	border-style: double;
	box-shadow: 0 0 0 1px rgba(107, 214, 255, 0.3);
}

.planning-linear-demand.has-gap {
	box-shadow: inset 3px 0 var(--red);
}

.planning-linear-demand.is-covered {
	box-shadow: inset 3px 0 var(--green);
}

.planning-linear-demand.demand-covered,
.planning-linear-workshift.demand-covered {
	box-shadow: inset 4px 0 var(--green);
}

.planning-linear-demand.demand-partial,
.planning-linear-workshift.demand-partial {
	box-shadow: inset 4px 0 var(--amber);
}

.planning-linear-demand.demand-uncovered,
.planning-linear-workshift.demand-uncovered {
	box-shadow: inset 4px 0 var(--red);
}

.planning-linear-demand.is-focused {
	z-index: 8;
	outline: 2px solid var(--cyan);
	outline-offset: 2px;
}

.planning-linear-handle {
	position: absolute;
	top: 50%;
	z-index: 12;
	width: 12px;
	height: 34px;
	border: 2px solid #071f30;
	border-radius: 8px;
	background: var(--cyan);
	transform: translateY(-50%);
	cursor: ew-resize;
	touch-action: none;
}

.planning-linear-handle.is-start {
	left: -7px;
}

.planning-linear-handle.is-end {
	right: -7px;
}

.planning-calendar-header,
.planning-calendar-body {
	display: grid;
	grid-template-columns: 58px repeat(7, minmax(112px, 1fr));
}

.planning-calendar-body.is-template-drop-target {
	box-shadow: inset 0 0 0 3px var(--amber);
}

.planning-calendar-header {
	position: sticky;
	top: 0;
	z-index: 12;
	min-width: 0;
	height: 58px;
	border-bottom: 1px solid var(--line);
	background: #071f30;
}

.planning-calendar-header > div {
	display: grid;
	place-content: center;
	border-left: 1px solid var(--line);
	text-align: center;
}

.planning-calendar-header > div:first-child {
	border-left: 0;
}

.planning-calendar-header strong,
.planning-calendar-header span {
	display: block;
}

.planning-calendar-header strong {
	text-transform: capitalize;
}

.planning-calendar-header span,
.planning-time-heading {
	color: var(--muted);
	font-size: 11px;
}

.planning-calendar-body {
	position: relative;
	min-width: 0;
	height: 720px;
	background: rgba(5, 21, 34, 0.42);
}

.planning-time-axis {
	position: relative;
	border-right: 1px solid var(--line);
}

.planning-time-axis span {
	position: absolute;
	right: 8px;
	color: var(--muted);
	font-size: 10px;
	transform: translateY(-50%);
}

.planning-calendar-day {
	position: relative;
	min-width: 0;
	border-right: 1px solid var(--line);
	background-image:
		repeating-linear-gradient(to bottom, transparent 0, transparent 14px, rgba(107, 214, 255, 0.06) 14px, rgba(107, 214, 255, 0.06) 15px),
		repeating-linear-gradient(to bottom, transparent 0, transparent 29px, rgba(107, 214, 255, 0.13) 29px, rgba(107, 214, 255, 0.13) 30px);
	touch-action: none;
}

.is-creating-workshift .planning-calendar-day {
	cursor: crosshair;
}

.planning-calendar-demand,
.planning-calendar-workshift,
.planning-calendar-proposal,
.planning-calendar-selection {
	position: absolute;
	overflow: hidden;
	border-radius: 5px;
	text-align: left;
}

.planning-calendar-demand.is-continuation,
.planning-calendar-workshift.is-continuation,
.planning-calendar-proposal.is-continuation,
.planning-calendar-selection.is-continuation {
	border-top-style: dashed;
}

.planning-calendar-demand.continues,
.planning-calendar-workshift.continues,
.planning-calendar-proposal.continues,
.planning-calendar-selection.continues {
	border-bottom-style: dashed;
}

.planning-calendar-demand {
	z-index: 1;
	display: grid;
	align-content: start;
	gap: 1px;
	border: 1px solid rgba(107, 214, 255, 0.38);
	padding: 4px;
	color: rgba(189, 238, 255, 0.8);
	background: rgba(17, 82, 107, 0.24);
	cursor: pointer;
}

.planning-calendar-demand.is-extra {
	border-color: rgba(167, 139, 250, 0.58);
	color: rgba(234, 220, 255, 0.92);
	background: rgba(82, 55, 145, 0.34);
}

.planning-calendar-demand.has-gap {
	box-shadow: inset 3px 0 rgba(255, 95, 108, 0.72);
}

.planning-calendar-demand.is-covered {
	box-shadow: inset 3px 0 rgba(18, 214, 194, 0.62);
}

.planning-calendar-demand strong,
.planning-calendar-demand span,
.planning-calendar-workshift strong,
.planning-calendar-workshift span,
.planning-calendar-workshift small,
.planning-calendar-selection strong,
.planning-calendar-selection span {
	overflow: hidden;
	font-size: 9px;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.is-creating-workshift .planning-calendar-demand {
	pointer-events: none;
	opacity: 0.72;
}

.is-creating-workshift .planning-calendar-workshift {
	pointer-events: none;
	opacity: 0.62;
}

.planning-calendar-workshift {
	z-index: 4;
	display: grid;
	align-content: start;
	gap: 1px;
	min-width: 18px;
	border: 1px solid rgba(18, 214, 194, 0.92);
	padding: 4px;
	color: #d5fff9;
	background: rgba(6, 91, 91, 0.91);
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.planning-calendar-workshift.is-draft {
	border-style: dashed;
}

.planning-calendar-workshift small {
	color: #a8f5e9;
}

.planning-calendar-proposal {
	z-index: 6;
	display: grid;
	align-content: start;
	gap: 1px;
	min-width: 18px;
	border: 2px dashed var(--planning-group-accent, var(--amber));
	padding: 4px;
	color: var(--planning-group-text, #fff3ce);
	background: var(--planning-group-background, rgba(132, 84, 8, 0.9));
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.planning-calendar-proposal strong,
.planning-calendar-proposal span,
.planning-calendar-proposal small {
	overflow: hidden;
	font-size: 9px;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-calendar-proposal small {
	color: var(--planning-group-muted, #ffe2a1);
}

.planning-group-tone-0 {
	--planning-group-accent: #ffb21c;
	--planning-group-background: rgba(132, 84, 8, 0.91);
	--planning-group-text: #fff3ce;
	--planning-group-muted: #ffe2a1;
}

.planning-group-tone-1 {
	--planning-group-accent: #31c7f3;
	--planning-group-background: rgba(7, 86, 119, 0.91);
	--planning-group-text: #def7ff;
	--planning-group-muted: #bdeeff;
}

.planning-group-tone-2 {
	--planning-group-accent: #23d6b9;
	--planning-group-background: rgba(5, 96, 85, 0.91);
	--planning-group-text: #dcfff9;
	--planning-group-muted: #a8f5e9;
}

.planning-group-tone-3 {
	--planning-group-accent: #b894ff;
	--planning-group-background: rgba(75, 48, 132, 0.92);
	--planning-group-text: #f1eaff;
	--planning-group-muted: #d8c6ff;
}

.planning-group-tone-4 {
	--planning-group-accent: #ff7790;
	--planning-group-background: rgba(126, 38, 59, 0.92);
	--planning-group-text: #ffe8ed;
	--planning-group-muted: #ffc5d0;
}

.planning-group-tone-5 {
	--planning-group-accent: #a9d54e;
	--planning-group-background: rgba(67, 91, 24, 0.92);
	--planning-group-text: #f1ffd5;
	--planning-group-muted: #d8efa9;
}

.planning-calendar-proposal .planning-calendar-proposal-team {
	display: grid;
	gap: 2px;
	overflow: visible;
	white-space: normal;
}

.planning-calendar-proposal-team i {
	overflow: hidden;
	border-radius: 3px;
	padding: 1px 3px;
	color: #fff8e6;
	background: rgba(255, 255, 255, 0.1);
	font-style: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-calendar-proposal-team i.is-unassigned {
	color: #ffc5ca;
	background: rgba(255, 95, 108, 0.12);
}

.is-creating-workshift .planning-calendar-proposal {
	pointer-events: none;
	opacity: 0.5;
}

.planning-calendar-selection {
	right: 5px;
	left: 5px;
	z-index: 8;
	display: grid;
	align-content: start;
	gap: 2px;
	border: 2px solid var(--cyan);
	padding: 5px;
	color: #dff7ff;
	background: rgba(31, 149, 190, 0.7);
	pointer-events: auto;
	box-shadow: 0 0 0 2px rgba(7, 31, 48, 0.7);
}

.planning-calendar-selection-preview {
	/* Stay above selected rectangles (9), below the elapsed edge/markers. */
	z-index: 10;
	pointer-events: none;
}

.planning-calendar-selection-preview.is-invalid {
	z-index: 11;
	border-color: #ff6b70;
	color: #fff;
	background: rgba(142, 34, 43, 0.96);
	box-shadow: 0 0 0 2px rgba(255, 107, 112, 0.35);
}

.planning-calendar-selection-preview.is-invalid span {
	font-weight: 700;
}

/* Local pattern blocks are editable even before now; saved history stays shaded. */
.planning-linear-block.is-local-pattern {
	z-index: 11;
}

.planning-split-marker {
	position: absolute;
	top: 8px;
	z-index: 15;
	width: 3px;
	height: 50px;
	background: #fff;
	box-shadow: 0 0 0 2px #071f30, 0 0 12px #fff;
	cursor: ew-resize;
	touch-action: none;
}

.planning-changeover-marker {
	position: absolute;
	z-index: 11;
	top: 0;
	bottom: 0;
	border-left: 2px dashed #ff6b70;
	pointer-events: none;
}

.planning-changeover-marker span {
	position: absolute;
	bottom: 2px;
	right: 6px;
	left: auto;
	border-radius: 4px;
	padding: 3px 6px;
	color: #fff;
	background: #8e222b;
	font-size: 10px;
	white-space: nowrap;
}

.planning-split-marker::after {
	position: absolute;
	top: 18px;
	left: -8px;
	width: 18px;
	height: 18px;
	border: 2px solid #071f30;
	border-radius: 50%;
	background: #fff;
	content: '';
}

.planning-split-marker span {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	padding: 3px 6px;
	border-radius: 4px;
	color: #071f30;
	background: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	transform: translateX(-50%);
}

.planning-split-marker:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 8px;
}

.planning-split-feedback {
	position: fixed;
	z-index: 1001;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--cyan);
	border-radius: 10px;
	background: #071f30;
	color: #fff;
	box-shadow: 0 10px 28px #0008;
}

.planning-split-feedback[hidden] {
	display: none;
}

.planning-split-feedback::before {
	position: absolute;
	left: var(--split-arrow-left, 50%);
	top: -6px;
	width: 10px;
	height: 10px;
	border-left: 1px solid var(--cyan);
	border-top: 1px solid var(--cyan);
	background: #071f30;
	transform: translateX(-50%) rotate(45deg);
	content: '';
}

.planning-split-feedback strong {
	font-size: 12px;
	font-weight: 500;
}

.planning-split-feedback.is-above::before {
	top: auto;
	bottom: -6px;
	transform: translateX(-50%) rotate(225deg);
}

.planning-merge-warning {
	position: fixed;
	z-index: 1000;
	max-width: 280px;
	padding: 8px 11px;
	border: 1px solid #ff9297;
	border-radius: 7px;
	color: #fff;
	background: #8e222b;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	pointer-events: none;
}

.planning-restriction-hint {
	max-width: min(280px, calc(100vw - 24px));
	padding: 6px 9px;
	font-weight: 400;
}

.planning-restriction-hint[hidden] {
	display: none;
}

.planning-restriction-hint.is-merge-hint {
	border-color: #c7a4ff;
	background: #392751;
}

.planning-calendar-selection.is-selected {
	z-index: 10;
	overflow: visible;
	box-shadow: 0 0 0 2px #071f30, 0 0 0 4px var(--cyan);
}

.planning-calendar-handle {
	position: absolute;
	left: 50%;
	z-index: 12;
	width: 32px;
	height: 10px;
	border: 2px solid #071f30;
	border-radius: 999px;
	padding: 0;
	background: var(--cyan);
	transform: translateX(-50%);
	cursor: ns-resize;
	touch-action: none;
}

.planning-calendar-handle.is-start {
	top: -6px;
}

.planning-calendar-handle.is-end {
	bottom: -6px;
}

.planning-week-summary {
	display: grid;
	gap: 14px;
	border-top: 1px solid var(--line);
	padding-top: 14px;
}

.planning-template-library {
	display: grid;
	gap: 8px;
	border-top: 1px solid var(--line);
	padding-top: 2px;
}

.planning-team-library {
	display: grid;
	gap: 8px;
	border-top: 1px solid var(--line);
	padding-top: 12px;
}

.planning-team-list {
	display: grid;
	gap: 7px;
	max-height: 230px;
	overflow-y: auto;
}

.planning-team-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 9px;
	background: rgba(5, 21, 34, 0.64);
	cursor: grab;
	transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.planning-team-card:hover,
.planning-team-card:focus-visible {
	border-color: rgba(107, 214, 255, 0.72);
}

.planning-team-card.is-selected {
	border-color: var(--cyan);
	background: rgba(31, 149, 190, 0.2);
	box-shadow: 0 0 0 2px rgba(107, 214, 255, 0.18);
}

.planning-team-card:active {
	cursor: grabbing;
}

.planning-team-card > span,
.planning-team-card > b {
	display: grid;
	min-width: 0;
}

.planning-team-card small {
	color: var(--muted);
	font-size: 10px;
}

.planning-team-card > b {
	flex: 0 0 auto;
	color: var(--cyan);
	font-size: 11px;
	text-align: right;
}

.planning-team-card > b.has-conflict {
	color: #ffc5ca;
}

.planning-calendar-proposal.is-drop-target,
.planning-proposal-item.is-drop-target {
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 0 2px #071f30, 0 0 0 4px var(--teal);
}

.planning-calendar-proposal.is-drop-target::after,
.planning-proposal-item.is-drop-target::after {
	position: absolute;
	z-index: 20;
	inset: 0;
	display: grid;
	place-content: center;
	padding: 8px;
	content: attr(data-planning-drop-hint);
	color: #e5fffb;
	background: rgba(4, 47, 52, 0.94);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
}

.planning-template-list {
	display: grid;
	gap: 7px;
	max-height: 190px;
	overflow-y: auto;
}

.planning-template-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border: 1px solid rgba(255, 178, 28, 0.36);
	border-radius: 7px;
	padding: 9px;
	background: rgba(118, 76, 8, 0.12);
	cursor: grab;
}

.planning-template-card:active {
	cursor: grabbing;
}

.planning-template-card > span {
	display: grid;
	min-width: 0;
}

.planning-template-card strong,
.planning-template-card small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-template-card small {
	color: var(--muted);
	font-size: 10px;
}

.planning-template-card .button {
	min-height: 30px;
	padding: 0 9px;
	font-size: 10px;
}

.planning-template-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.planning-template-card .planning-template-delete {
	color: #ff8e91;
	border-color: rgba(255, 100, 110, 0.45);
}

[data-planning-delete-template-name] {
	overflow-wrap: anywhere;
}

.planning-week-totals {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 7px 10px;
}

.planning-week-totals strong {
	color: var(--cyan);
	font-size: 18px;
	text-align: right;
}

.planning-week-totals strong.has-gap {
	color: #ffc5ca;
}

.planning-week-totals strong.is-covered {
	color: #a8f5e9;
}

.planning-week-totals > span {
	align-self: center;
	color: var(--muted);
	font-size: 12px;
}

.planning-contract-statuses {
	display: grid;
	gap: 6px;
	max-height: 320px;
	overflow-y: auto;
}

.planning-contract-list-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.planning-contract-list-heading button {
	border: 0;
	padding: 0;
	color: var(--cyan);
	background: transparent;
	font: inherit;
	cursor: pointer;
}

.planning-contract-list-heading button:disabled {
	color: var(--muted);
	cursor: default;
}

.planning-contract-status {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 8px;
	color: inherit;
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.planning-contract-status:hover,
.planning-contract-status:focus-visible {
	border-color: rgba(107, 214, 255, 0.72);
	background: rgba(107, 214, 255, 0.07);
}

.planning-contract-status.is-selected {
	border-color: var(--teal);
	background: rgba(18, 214, 194, 0.12);
}

.planning-contract-status > span {
	display: grid;
	min-width: 0;
}

.planning-contract-status strong,
.planning-contract-status small {
	overflow-wrap: anywhere;
	white-space: normal;
}

.planning-contract-status small {
	color: var(--muted);
}

.planning-contract-status b {
	flex: 0 0 auto;
	font-size: 10px;
}

.planning-contract-status b.has-gap {
	color: #ffc5ca;
}

.planning-contract-status b.is-covered {
	color: #a8f5e9;
}

.planning-sidebar-group {
	display: grid;
	gap: 8px;
	border-top: 1px solid var(--line);
	padding-top: 12px;
}

.planning-draft-segments {
	display: grid;
	gap: 7px;
	max-height: 210px;
	overflow-y: auto;
}

.planning-draft-segment {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border: 1px solid rgba(107, 214, 255, 0.34);
	border-radius: 6px;
	padding: 8px;
	background: rgba(31, 149, 190, 0.1);
}

.planning-draft-segment > span {
	display: grid;
	min-width: 0;
}

.planning-draft-segment small {
	overflow: hidden;
	color: var(--muted);
	font-size: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-draft-segment button {
	display: grid;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	place-content: center;
	border: 1px solid var(--line);
	border-radius: 5px;
	color: var(--muted);
	background: transparent;
	cursor: pointer;
}

.planning-draft-segment button:hover,
.planning-draft-segment button:focus-visible {
	border-color: var(--red);
	color: #ffc5ca;
}

.planning-draft-segment.is-selected {
	border-color: var(--cyan);
	background: rgba(31, 149, 190, 0.2);
}

.planning-draft-segment .planning-draft-segment-main {
	display: block;
	flex: 1 1 auto;
	width: auto;
	height: auto;
	min-width: 0;
	border: 0;
	padding: 0;
	color: var(--text);
	background: transparent;
	text-align: left;
}

.planning-draft-segment-main > span {
	display: grid;
	min-width: 0;
}

.planning-draft-segment .planning-draft-segment-main:hover,
.planning-draft-segment .planning-draft-segment-main:focus-visible {
	border-color: transparent;
	color: var(--text);
}

.planning-proposal-summary {
	display: grid;
	gap: 10px;
	border-top: 1px solid var(--line);
	padding-top: 14px;
}

.planning-proposal-list {
	display: grid;
	gap: 7px;
	max-height: 260px;
	overflow-y: auto;
}

.planning-proposal-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	border: 1px solid var(--planning-group-accent, rgba(255, 178, 28, 0.4));
	border-radius: 6px;
	padding: 8px;
	color: var(--planning-group-text, #fff3ce);
	background: var(--planning-group-background, rgba(118, 76, 8, 0.9));
	transition: opacity 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.planning-proposal-item.is-dimmed {
	opacity: 0.3;
	filter: saturate(0.35);
}

.planning-proposal-item.is-editing {
	box-shadow: 0 0 0 2px #071f30, 0 0 0 4px var(--cyan);
}

.planning-proposal-item .planning-proposal-select {
	display: grid;
	flex: 1;
	min-width: 0;
	gap: 3px;
	border: 0;
	padding: 2px;
	color: inherit;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.planning-proposal-select strong {
	overflow-wrap: anywhere;
}

.planning-proposal-item small {
	overflow: hidden;
	color: var(--planning-group-muted, var(--muted));
	font-size: 10px;
	text-overflow: ellipsis;
	white-space: normal;
}

.planning-proposal-item .planning-group-incomplete {
	justify-self: start;
	margin-top: 4px;
	border: 1px solid var(--red);
	border-radius: 4px;
	padding: 2px 6px;
	color: #ffc5ca;
	background: rgba(142, 34, 43, 0.5);
}

.planning-proposal-item .planning-proposal-remove {
	display: grid;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	place-content: center;
	border: 1px solid var(--line);
	border-radius: 5px;
	color: var(--muted);
	background: transparent;
	cursor: pointer;
}

.planning-proposal-item button:hover,
.planning-proposal-item button:focus-visible {
	border-color: var(--amber);
	color: #ffe2a1;
}

.planning-output-actions {
	display: grid;
	flex-shrink: 0;
	gap: 8px;
	padding: 12px 14px;
	background: #071f30;
}

.planning-output-actions .button {
	width: 100%;
	min-width: 0;
	white-space: normal;
}

.planning-template-create {
	display: grid;
	gap: 7px;
	border-top: 1px solid var(--line);
	padding-top: 10px;
}

.planning-template-create label {
	display: grid;
	gap: 5px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
}

.planning-template-create input {
	width: 100%;
	min-height: 38px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 10px;
	color: var(--text);
	background: #071f30;
}

.planning-candidate.is-readonly {
	grid-template-columns: 18px minmax(0, 1fr);
	cursor: default;
}

.planning-candidate.is-readonly > i {
	margin-top: 2px;
	color: var(--cyan);
}

.pattern-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(240px, 1fr));
	gap: 14px;
}

.administration-page {
	display: grid;
	align-content: start;
	gap: 18px;
	min-width: 0;
}

.administration-page > *,
.administration-page .section-heading > div:first-child {
	min-width: 0;
}

.administration-page .section-heading h2 {
	overflow-wrap: anywhere;
}

.administration-page .section-heading > div:first-child > p:last-child:not(.section-kicker) {
	margin: 8px 0 0;
	color: var(--muted);
}

.administration-page .section-heading .button-primary {
	color: #04141f;
}

.administration-page .section-heading .button-secondary {
	color: #bdeeff;
}

.contract-catalog-heading,
.administration-heading {
	margin-bottom: 0;
}

.contract-heading-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
}

.contract-heading-actions .status-pill {
	white-space: nowrap;
}

.contract-detail-tabs {
	position: sticky;
	top: 0;
	z-index: 4;
	display: flex;
	gap: 4px;
	min-width: 0;
	max-width: 100%;
	border-bottom: 1px solid var(--line);
	background: rgba(3, 16, 25, 0.98);
	overflow-x: auto;
	scroll-margin-top: 18px;
	scrollbar-width: thin;
}

.contract-detail-tabs [role="tab"] {
	flex: 0 0 auto;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: 11px 16px;
	color: var(--muted);
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.contract-detail-tabs [role="tab"]:hover,
.contract-detail-tabs [role="tab"]:focus-visible,
.contract-detail-tabs [role="tab"][aria-selected="true"] {
	color: var(--teal);
}

.contract-detail-tabs [role="tab"][aria-selected="true"] {
	border-bottom-color: var(--teal);
	background: rgba(18, 214, 194, 0.07);
}

.contract-detail-tab-panel[hidden] {
	display: none;
}

.administration-page section[id] {
	scroll-margin-top: 18px;
}

.console-alerts {
	grid-row: 2;
	min-width: 0;
}

.planning-alert-banner.coverage-attendance-alert-banner {
	background: #542124;
	border-block-color: rgba(255, 75, 67, 0.65);
	color: #ffe8e8;
}

.planning-alert-banner {
	grid-row: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 2rem;
	min-height: 2rem;
	padding: 0 16px;
	background: #503916;
	border-block: 1px solid rgba(255, 178, 28, 0.5);
	color: #fff0ca;
	font-size: 0.85rem;
}

.console-frame > .workspace-layout {
	grid-row: 3;
}

.planning-alert-banner > span {
	flex: 1;
	min-width: 0;
}

.planning-alert-banner a {
	color: inherit;
	white-space: nowrap;
	font-weight: 700;
}

.planning-alert-dismiss {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 4px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.planning-alert-dismiss:hover,
.planning-alert-dismiss:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 700px) {
	.planning-alert-banner {
		flex-wrap: wrap;
		height: auto;
		padding: 4px 16px;
	}
}

.administration-heading > h2,
.administration-menu-card h2 {
	margin-bottom: 6px;
}

.administration-heading > p:last-child,
.administration-menu-card p {
	color: var(--muted);
}

.administration-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

.administration-menu-card {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 16px;
	min-height: 230px;
	color: inherit;
	text-decoration: none;
	transition: border-color 150ms ease, transform 150ms ease;
}

.administration-menu-card:hover,
.administration-menu-card:focus-visible {
	border-color: rgba(18, 214, 194, 0.62);
	transform: translateY(-2px);
}

.administration-menu-card > strong {
	color: var(--teal);
}

.administration-menu-icon {
	display: inline-flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(18, 214, 194, 0.42);
	border-radius: 10px;
	color: var(--teal);
	background: rgba(18, 214, 194, 0.12);
	font-size: 20px;
}

.administration-alert {
	margin-bottom: 14px;
	border: 1px solid rgba(107, 214, 255, 0.38);
	border-radius: 7px;
	padding: 12px 14px;
	color: #bdeeff;
	background: rgba(17, 82, 107, 0.22);
}

.administration-alert.is-success {
	border-color: rgba(18, 214, 194, 0.4);
	color: #a8f5e9;
	background: rgba(18, 214, 194, 0.1);
}

.administration-alert.is-warning {
	border-color: rgba(255, 178, 28, 0.45);
	color: #ffe2a1;
	background: rgba(255, 178, 28, 0.1);
}

.administration-alert.is-error {
	border-color: rgba(255, 95, 108, 0.46);
	color: #ffc5ca;
	background: rgba(255, 95, 108, 0.1);
}

.team-provider-selector {
	max-width: 320px;
	margin-top: 16px;
}

.team-provider-selector label,
.administration-form label {
	display: grid;
	gap: 7px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.team-provider-selector .team-provider-archive-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
}

.team-provider-archive-toggle input {
	accent-color: var(--teal);
}

.team-provider-selector select,
.administration-form input,
.administration-form select {
	min-height: 42px;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 12px;
	color: var(--text);
	background: rgba(5, 21, 34, 0.92);
}

.team-table td:last-child {
	width: 1%;
	white-space: nowrap;
}

.team-row-actions,
.administration-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.team-remove-button {
	border-color: rgba(255, 95, 108, 0.5);
	color: #ffc5ca;
	background: rgba(255, 95, 108, 0.1);
}

.administration-form-panel {
	box-sizing: border-box;
	width: min(100%, 900px);
	margin-inline: auto;
}

.administration-form {
	display: grid;
	gap: 22px;
}

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

.administration-form-grid .is-wide {
	grid-column: 1 / -1;
}

.team-form-field {
	display: grid;
	align-content: start;
	gap: 7px;
	min-width: 0;
}

.team-validity-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	min-width: 0;
}

.team-datetime-control {
	display: flex;
	align-items: stretch;
	gap: 6px;
	min-width: 0;
}

.team-datetime-control input {
	width: 100%;
	color-scheme: dark;
}

.team-datetime-control.has-picker-toggle input::-webkit-calendar-picker-indicator {
	display: none;
}

.team-picker-toggle {
	flex: 0 0 42px;
	padding: 0;
}

.administration-form [aria-invalid="true"] {
	border-color: #ff5f6c;
	box-shadow: 0 0 0 1px rgba(255, 95, 108, 0.3);
}

.team-field-error {
	color: #ffc5ca;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
}

.administration-permissions > .team-field-error {
	grid-column: 1 / -1;
}

.team-submit-status {
	margin: 0;
	color: var(--muted);
}

.administration-form [data-member-submit]:disabled {
	opacity: 0.65;
	cursor: wait;
}

.administration-permissions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 16px;
}

.administration-permissions legend {
	padding: 0 8px;
	font-weight: 700;
}

.administration-permissions label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 14px;
	text-transform: none;
}

.administration-permissions input {
	min-height: auto;
	margin-top: 3px;
}

.administration-permissions span,
.administration-permissions small {
	display: block;
}

.administration-permissions small {
	margin-top: 4px;
	color: var(--muted);
	font-weight: 400;
}

.administration-modal {
	width: min(480px, calc(100vw - 32px));
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 0;
	color: var(--text);
	background: #071f30;
}

.administration-modal::backdrop {
	background: rgba(1, 10, 17, 0.72);
}

.administration-modal-card {
	display: grid;
	gap: 16px;
	padding: 24px;
}

.administration-modal-card h2,
.administration-modal-card p {
	margin: 0;
}

.contract-provider-filter {
	display: grid;
	gap: 6px;
	min-width: min(320px, 100%);
}

.contract-catalog-filters {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	align-items: end;
	min-width: 0;
}

.contract-catalog-filters label,
.contract-catalog-filters select,
.contract-catalog-filters input {
	min-width: 0;
	max-width: 100%;
}

.contract-catalog-heading .planning-context-controls {
	display: flex;
	flex-wrap: wrap;
}

.contract-search-control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.contract-search-control input,
.contract-list-filters input,
.contract-list-filters select {
	min-height: 42px;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 12px;
	color: var(--text);
	background: rgba(5, 21, 34, 0.92);
}

.contract-search-control input {
	flex: 1 1 240px;
}

.contract-list-filters {
	display: flex;
	align-items: end;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.contract-list-filters label {
	display: grid;
	gap: 6px;
	min-width: min(260px, 100%);
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.contract-list-filters [data-filter-count] {
	margin-left: auto;
	padding-bottom: 11px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

[data-filter-row][hidden] {
	display: none;
}

.contract-provider-filter label,
.contract-facts dt {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.contract-provider-filter label {
	display: grid;
	gap: 6px;
}

.contract-provider-filter select {
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 12px;
	color: var(--text);
	background: rgba(5, 21, 34, 0.92);
}

.contract-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 14px;
}

.contract-catalog-tabs {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid var(--line);
}

.contract-catalog-tab {
	padding: 10px 2px;
	border-bottom: 3px solid transparent;
	color: var(--muted);
	text-decoration: none;
}

.contract-catalog-tab.is-active {
	border-color: var(--teal);
	color: var(--text);
}

.contract-catalog-toolbar,
.contract-catalog-scope,
.contract-catalog-mode,
.contract-catalog-search {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.contract-catalog-state {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: 13px;
}

.contract-catalog-state select {
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 32px 0 12px;
	color: var(--text);
	background: rgba(5, 21, 34, 0.92);
}

.contract-catalog-toolbar {
	justify-content: space-between;
}

.contract-catalog-scope {
	flex: 1 1 auto;
}

.contract-catalog-context label {
	display: grid;
	gap: 5px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.contract-catalog-context select,
.contract-catalog-search input[type="search"] {
	box-sizing: border-box;
	min-width: 0;
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 12px;
	color: var(--text);
	background: rgba(5, 21, 34, 0.92);
}

.contract-catalog-context select {
	width: min(280px, 100%);
}

.contract-catalog-search {
	width: 100%;
}

.contract-catalog-search input[type="search"] {
	width: clamp(240px, 28vw, 380px);
	max-width: 100%;
	margin-left: auto;
}

.contract-card {
	position: relative;
	align-content: start;
	min-width: 0;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color 150ms ease, transform 150ms ease;
}

.contract-card > :not(.contract-card-watermark) {
	position: relative;
	z-index: 1;
}

.contract-card-watermark {
	position: absolute;
	right: -12px;
	top: 30px;
	color: var(--cyan);
	font-size: 130px;
	opacity: 0.08;
	pointer-events: none;
}

.contract-card-type {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.contract-card-state {
	flex: 0 0 auto;
	border: 1px solid rgba(98, 210, 95, 0.5);
	border-radius: 999px;
	padding: 4px 9px;
	color: #b8f5b5;
	background: rgba(98, 210, 95, 0.13);
	font-size: 11px;
	font-weight: 700;
}

.contract-card--upcoming .contract-card-state {
	border-color: rgba(255, 178, 28, 0.5);
	color: #ffe2a1;
	background: rgba(255, 178, 28, 0.12);
}

.contract-card--ended .contract-card-state {
	border-color: rgba(176, 195, 207, 0.36);
	color: #c5d1d8;
	background: rgba(176, 195, 207, 0.09);
}

.contract-card--deleted .contract-card-state {
	border-color: rgba(232, 105, 105, 0.5);
	color: #ffd2d2;
	background: rgba(232, 105, 105, 0.12);
}

.contract-card--suspended .contract-card-state,
.contract-card--cancelled .contract-card-state {
	border-color: rgba(255, 178, 28, 0.5);
	color: #ffe2a1;
	background: rgba(255, 178, 28, 0.12);
}

.contract-card--draft .contract-card-state {
	border-color: rgba(176, 195, 207, 0.36);
	color: #c5d1d8;
	background: rgba(176, 195, 207, 0.09);
}

.contract-card--deleted {
	opacity: 0.7;
}

.contract-card-rule {
	min-height: 2.6em;
	margin: 0;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

a.contract-card:hover,
a.contract-card:focus-visible {
	border-color: rgba(18, 214, 194, 0.62);
	transform: translateY(-2px);
}

@media (max-width: 700px) {
	.contract-catalog-search,
	.contract-catalog-search input[type="search"] {
		width: 100%;
	}

	.contract-catalog-search input[type="search"] {
		flex: 1 1 200px;
	}
}

.contract-card-heading {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.contract-card-heading > * {
	min-width: 0;
}

.contract-card h2 {
	margin: 0;
	overflow-wrap: anywhere;
}

.contract-card > p,
.contract-inline-empty,
.contract-inline-empty span {
	color: var(--muted);
}

.contract-back-link {
	color: var(--teal);
	font-weight: 700;
	text-decoration: none;
}

.contract-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--line);
}

.contract-facts-compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contract-facts div {
	display: grid;
	gap: 7px;
	min-width: 0;
	padding: 14px;
	background: rgba(6, 27, 42, 0.96);
}

.contract-facts dd {
	min-width: 0;
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.contract-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 7px;
}

.contract-table {
	width: 100%;
	border-collapse: collapse;
}

.contract-table th,
.contract-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.contract-table th {
	color: var(--muted);
	background: rgba(5, 21, 34, 0.96);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.contract-table tr:last-child td {
	border-bottom: 0;
}

.contract-table td small {
	display: block;
	margin-top: 5px;
	color: var(--muted);
}

.capability-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.capability-list span,
.contract-status {
	display: inline-flex;
	border: 1px solid rgba(107, 214, 255, 0.28);
	border-radius: 999px;
	padding: 3px 8px;
	color: #bdeeff;
	background: rgba(17, 82, 107, 0.26);
	font-size: 11px;
	font-weight: 700;
}

.contract-inline-empty {
	display: grid;
	gap: 12px;
}

.contract-inline-empty {
	min-height: 96px;
	place-content: center;
	border: 1px dashed var(--line);
	border-radius: 7px;
	padding: 18px;
	text-align: center;
}

.contract-calendar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(250px, 280px);
	align-items: start;
	gap: 16px;
	min-width: 0;
}

.contract-calendar-main {
	min-width: 0;
	overflow-x: auto;
}

.contract-calendar-select {
	display: grid;
	gap: 6px;
	max-width: 400px;
	margin-bottom: 12px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.contract-calendar-select select {
	min-width: 0;
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0 12px;
	color: var(--text);
	background: rgba(5, 21, 34, 0.92);
}

.contract-calendar-detail {
	display: grid;
	align-content: start;
	gap: 12px;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 16px;
	background: rgba(4, 21, 34, 0.78);
}

.contract-calendar-detail h3,
.contract-calendar-detail p {
	margin: 0;
	overflow-wrap: anywhere;
}

.contract-calendar-detail > p:not(.section-kicker) {
	color: var(--muted);
}

.contract-calendar-facts {
	display: grid;
	gap: 9px;
	margin: 0;
}

.contract-calendar-facts div {
	display: grid;
	gap: 3px;
	min-width: 0;
	border-top: 1px solid var(--line);
	padding-top: 9px;
}

.contract-calendar-facts dt {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.contract-calendar-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.contract-calendar-segments,
.contract-calendar-window-list {
	display: grid;
	gap: 7px;
}

.contract-calendar-segments > div {
	border-left: 3px solid var(--teal);
	padding: 7px 10px;
	background: rgba(18, 214, 194, 0.08);
	font-size: 12px;
}

.contract-week-calendar,
.contract-dated-week,
.contract-dated-month {
	min-width: 630px;
	border: 1px solid var(--line);
	border-radius: 7px;
	overflow: hidden;
}

.contract-week-calendar-header,
.contract-week-calendar-body,
.contract-dated-week-header,
.contract-dated-week-body {
	display: grid;
	grid-template-columns: 60px repeat(7, minmax(0, 1fr));
}

.contract-week-calendar-header,
.contract-dated-week-header {
	background: rgba(5, 21, 34, 0.96);
}

.contract-week-calendar-header > span,
.contract-dated-week-header > * {
	min-width: 0;
	border: 0;
	border-left: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 10px 3px;
	color: var(--text);
	background: transparent;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.contract-week-calendar-header > span:first-child,
.contract-dated-week-header > span:first-child {
	border-left: 0;
	color: var(--muted);
}

.contract-dated-day-heading {
	cursor: pointer;
}

.contract-dated-day-heading:hover,
.contract-dated-day-heading:focus-visible,
.contract-dated-day-heading.is-selected {
	color: var(--teal);
	background: rgba(18, 214, 194, 0.1);
}

.contract-week-calendar-body,
.contract-dated-week-body {
	height: 720px;
}

.contract-calendar-times {
	position: relative;
	background: rgba(2, 15, 25, 0.72);
}

.contract-calendar-times span {
	position: absolute;
	right: 6px;
	color: var(--muted);
	font-size: 10px;
	transform: translateY(-50%);
}

.contract-calendar-times span:first-child {
	transform: none;
}

.contract-week-calendar-day,
.contract-dated-week-day {
	position: relative;
	min-width: 0;
	border-left: 1px solid var(--line);
	background-image: linear-gradient(to bottom, rgba(107, 214, 255, 0.15) 1px, transparent 1px);
	background-size: 100% 15px;
}

.contract-week-calendar-day::after,
.contract-dated-week-day::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	background-image: linear-gradient(to bottom, rgba(107, 214, 255, 0.27) 1px, transparent 1px);
	background-size: 100% 30px;
}

.contract-dated-week-day {
	cursor: pointer;
}

.contract-dated-week-day.is-selected {
	background-color: rgba(18, 214, 194, 0.06);
}

.contract-rule-block,
.contract-window-block {
	box-sizing: border-box;
	position: absolute;
	z-index: 1;
	min-height: 15px;
	border: 1px solid var(--teal);
	border-radius: 4px;
	padding: 2px 4px;
	color: #c5fff5;
	background: rgba(13, 96, 88, 0.84);
	font-size: 10px;
	line-height: 1.2;
	overflow: hidden;
}

.contract-rule-block {
	left: 2px;
	right: 2px;
}

.contract-rule-block.is-continuation {
	border-top-style: dashed;
}

.contract-rule-block.continues {
	border-bottom-style: dashed;
}

.contract-window-block {
	border-color: rgba(107, 214, 255, 0.78);
	color: #d5f5ff;
	background: rgba(18, 82, 117, 0.88);
	text-align: left;
	cursor: pointer;
}

.contract-window-block--extra {
	border-color: rgba(189, 143, 255, 0.8);
	color: #f1e0ff;
	background: rgba(94, 54, 139, 0.88);
}

.contract-window-block.is-cancelled {
	opacity: 0.45;
	text-decoration: line-through;
}

.contract-window-block:hover,
.contract-window-block:focus-visible,
.contract-window-block.is-selected {
	z-index: 2;
	box-shadow: inset 0 0 0 1px #fff;
}

.contract-calendar-toolbar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}

.contract-calendar-toolbar > strong {
	text-align: center;
}

.contract-calendar-navigation,
.contract-calendar-views {
	display: flex;
	align-items: center;
	gap: 7px;
}

.contract-calendar-views {
	justify-content: flex-end;
}

.contract-calendar-views .is-active {
	border-color: var(--teal);
	color: var(--teal);
}

.contract-dated-month {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.contract-dated-month > span {
	border-bottom: 1px solid var(--line);
	padding: 9px 4px;
	background: rgba(5, 21, 34, 0.96);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.contract-dated-month-day {
	display: grid;
	align-content: start;
	gap: 4px;
	min-height: 94px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 5px;
}

.contract-dated-month-day.is-outside {
	opacity: 0.46;
}

.contract-dated-month-day.is-selected {
	background: rgba(18, 214, 194, 0.08);
}

.contract-dated-month-day > button:first-child {
	justify-self: start;
	border: 0;
	padding: 2px 5px;
	color: var(--text);
	background: transparent;
	font-weight: 700;
	cursor: pointer;
}

.contract-dated-month .contract-window-block {
	position: static;
	width: 100%;
	min-width: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.contract-dated-month-day small {
	color: var(--muted);
}

.contract-day-window {
	border: 1px solid rgba(107, 214, 255, 0.65);
	border-radius: 6px;
	padding: 9px 10px;
	color: #d5f5ff;
	background: rgba(18, 82, 117, 0.5);
	text-align: left;
	cursor: pointer;
}

.contract-day-window--extra {
	border-color: rgba(189, 143, 255, 0.8);
	color: #f1e0ff;
	background: rgba(94, 54, 139, 0.88);
}

.contract-day-window.is-selected {
	box-shadow: inset 0 0 0 1px #fff;
}

@media (max-width: 1100px) {
	.contract-calendar-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.contract-calendar-toolbar {
		grid-template-columns: 1fr;
		justify-items: center;
	}
}

.contract-empty {
	max-width: none;
}

@media (max-width: 900px) {
	.contract-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contract-segment-list div {
		grid-template-columns: 1fr auto 1fr;
	}

	.contract-segment-list small {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.contract-facts,
	.contract-facts-compact {
		grid-template-columns: 1fr;
	}

	.contract-catalog-filters,
	.contract-list-filters {
		display: grid;
		grid-template-columns: 1fr;
	}

	.contract-search-control {
		flex-wrap: wrap;
	}

	.contract-list-filters [data-filter-count] {
		margin-left: 0;
		padding-bottom: 0;
	}

	.administration-form-grid,
	.team-validity-fields,
	.administration-permissions {
		grid-template-columns: 1fr;
	}

	.administration-form-grid .is-wide {
		grid-column: auto;
	}

	.team-row-actions,
	.administration-form-actions {
		flex-wrap: wrap;
	}
}

.state {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	min-height: 124px;
	padding: 16px;
}

.state h2 {
	font-size: 16px;
	line-height: 1.25;
}

.state p {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
}

.state-icon {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--cyan);
}

.state-empty .state-icon {
	background: #7f95a6;
}

.state-readonly .state-icon {
	background: var(--cyan);
}

.state-degraded {
	border-color: rgba(255, 178, 28, 0.55);
	background: linear-gradient(145deg, rgba(45, 35, 12, 0.92), rgba(13, 29, 42, 0.94));
}

.state-degraded .state-icon {
	background: var(--amber);
}

.state-blocked {
	border-color: rgba(255, 75, 67, 0.58);
	background: linear-gradient(145deg, rgba(51, 22, 23, 0.92), rgba(13, 29, 42, 0.94));
}

.state-blocked .state-icon {
	background: var(--red);
}

@media (max-width: 1240px) {
	.workspace-layout {
		grid-template-columns: minmax(0, 1fr) 380px;
	}

	.call-video-viewport {
		min-height: 190px;
	}

	.planning-board-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

@media (max-width: 1100px) {
	.console-shell {
		grid-template-columns: 86px minmax(0, 1fr);
	}

	.brand-copy,
	.nav-label,
	.console-version span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.brand {
		justify-content: center;
		align-items: center;
		padding-inline: 0;
	}

	.brand-logo {
		width: 64px;
	}

	.nav-item {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 0;
	}

	.sidebar-footer {
		padding-inline: 12px;
	}

	.console-version {
		text-align: center;
	}

	.workspace-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.right-dock {
		border-top: 1px solid var(--line);
		border-left: 0;
	}

	.right-dock-toggle-input:not(:checked) + .workspace-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.dock-panel {
		min-height: auto;
	}
}

.operational-extension-dialog {
	position: fixed;
	top: 76px;
	right: 20px;
	bottom: auto;
	left: auto;
	z-index: 20;
	width: min(390px, calc(100vw - 32px));
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--text);
	background: #071f30;
	box-shadow: 0 16px 42px rgb(0 0 0 / 32%);
}

.operational-extension-card {
	display: grid;
	gap: 12px;
	padding: 20px;
}

.operational-extension-card h2,
.operational-extension-card p {
	margin: 0;
}

.operational-extension-countdown {
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.operational-extension-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.operational-extension-feedback {
	border-left: 3px solid var(--red);
	border-radius: 4px;
	padding: 10px 12px;
	background: rgba(116, 31, 28, 0.25);
	color: #ffb3af;
	font-size: 13px;
	line-height: 1.5;
}

.operational-extension-feedback[data-kind="warning"] {
	border-color: var(--amber);
	background: rgba(113, 75, 20, 0.25);
	color: #ffe2a1;
}

@media (max-width: 760px) {
	.access-contract-filter,
	.access-contract-filter select {
		width: 100%;
		min-width: 0;
	}

	.operational-extension-dialog {
		top: 12px;
		right: 12px;
		left: 12px;
		width: auto;
	}

	.console-shell {
		grid-template-columns: 1fr;
	}

	.sidebar {
		position: sticky;
		top: 0;
		z-index: 2;
		display: block;
		border-right: 0;
		border-bottom: 1px solid var(--line);
		padding: 10px;
		overflow-x: auto;
	}

	.brand {
		display: none;
	}

	.nav-list {
		display: flex;
		min-width: max-content;
	}

	.nav-item {
		grid-template-columns: 18px auto;
		min-width: 124px;
		justify-items: start;
		padding: 0 10px;
	}

	.nav-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.topbar,
	.topbar-actions,
	.section-heading {
		align-items: stretch;
		grid-template-columns: 1fr;
		flex-direction: column;
	}

	.community-selector select {
		width: 100%;
		max-width: none;
	}

	.benchmark-heading-actions {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.video-wall-workspace-grid,
	.video-wall-active-grid {
		grid-template-columns: 1fr;
	}

	.video-wall-lease-message {
		grid-template-columns: 1fr;
	}

	.video-wall-lease-message > span {
		max-width: none;
		text-align: left;
	}

	.content {
		padding: 16px;
	}

	.sidebar-footer {
		display: none;
	}

	.pattern-grid {
		grid-template-columns: 1fr;
	}

	.camera-panel-footer {
		align-items: stretch;
		grid-template-columns: 1fr;
	}

	.camera-viewport {
		min-height: 240px;
	}

	.benchmark-playback-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.planning-context-controls {
		grid-template-columns: 1fr;
	}

	.planning-context-controls .button {
		width: 100%;
	}

	.planning-board-layout {
		grid-template-columns: 1fr;
	}

	.planning-period-navigation,
	.planning-view-switch {
		justify-content: center;
	}

	.planning-sidebar {
		height: 778px;
		max-height: 90vh;
		border-top: 1px solid var(--line);
		border-left: 0;
	}
}

.event-history {
	display: grid;
	gap: 16px;
}

.event-history-filters {
	display: grid;
	gap: 16px;
	padding: 14px 18px;
}

.event-history-filter-toolbar {
	display: flex;
	align-items: end;
	flex-wrap: wrap;
	gap: 12px;
}

.event-history-filter-toolbar > .event-history-filter-field {
	width: min(300px, 100%);
}

.event-history-entity-apply {
	min-height: 40px;
}

.event-history-scope-label {
	align-self: center;
	font-weight: 700;
}

.event-history-filter-toggle {
	min-height: 39px;
}

.event-history-filter-panel {
	display: grid;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.event-history-filter-panel[hidden] {
	display: none;
}

.event-history-filter-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 1fr));
	gap: 14px;
}

.event-history-filter-grid > label,
.event-history-filter-field {
	display: grid;
	gap: 7px;
	min-width: 0;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 400;
}

.event-history-field-label,
.event-history-filter-grid > label > span {
	font-weight: 600;
}

.event-history-filter-grid input[type="date"] {
	width: 100%;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	color: var(--text);
}

.event-history-multiselect {
	position: relative;
	min-width: 0;
}

.event-history-multiselect summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 40px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	color: var(--text);
	cursor: pointer;
	list-style: none;
}

.event-history-multiselect summary::-webkit-details-marker { display: none; }
.event-history-multiselect summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-history-multiselect[open] summary { border-color: var(--cyan); }

.event-history-multiselect-options {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	max-height: 240px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.event-history-multiselect-options label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px;
	border-radius: 5px;
	color: var(--text);
	cursor: pointer;
}

.event-history-multiselect-options label:hover { background: rgba(107, 214, 255, 0.1); }
.event-history-multiselect-options label[hidden] { display: none; }
.event-history-multiselect-options input { width: auto; margin: 0; accent-color: var(--cyan); }

.event-history-filter-actions,
.event-history-pagination {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.event-history-pagination {
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.event-history-page-link,
.event-history-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	color: var(--text);
	text-decoration: none;
}

.event-history-page-link:hover {
	border-color: var(--cyan);
	color: var(--cyan);
}

.event-history-page-link.is-current {
	border-color: var(--cyan);
	background: rgba(107, 214, 255, 0.16);
	color: var(--cyan);
	font-weight: 700;
}

.event-history-page-link.is-disabled {
	opacity: 0.45;
}

.event-history-page-ellipsis {
	border-color: transparent;
}

.event-history-table-wrap {
	position: relative;
	overflow-x: auto;
}

.event-history-table {
	min-width: 1040px;
}

.event-history-table th:last-child,
.event-history-table td:last-child {
	text-align: right;
}

.event-history-primary-text,
.event-history-table td small,
.event-history-table time {
	display: block;
}

.event-history-primary-text {
	font-weight: 400;
}

.event-history-action {
	font-weight: 400;
}

.event-history-table td small {
	margin-top: 4px;
	color: var(--muted);
	font-size: 0.76rem;
}

.event-history-type-cell {
	min-width: 128px;
}

.event-history-resource-type {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 400;
}

.event-history-resource-type i {
	width: 21px;
	color: var(--cyan);
	font-size: 1.1rem;
	text-align: center;
}

.event-outcome {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border: 1px solid #207a56;
	border-radius: 999px;
	background: #207a56;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.event-outcome--warning {
	border-color: #925300;
	background: #925300;
	color: #fff;
}

.event-outcome--critical {
	border-color: #a62232;
	background: #a62232;
	color: #fff;
}

.event-history-root-entity {
	margin: 0 0 6px !important;
	font-weight: 400;
}

.event-history-primary-row {
	cursor: pointer;
}

.event-history-primary-row:hover td {
	background: rgba(107, 214, 255, 0.07);
}

.event-history-primary-row:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: -2px;
}


.event-history-row-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	cursor: pointer;
}

.event-history-row-toggle:hover {
	color: var(--cyan);
}

.event-history-row-toggle:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 2px;
}

.event-history-row-toggle i {
	transition: transform 160ms ease;
}

.event-history-row-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.event-history-expanded-row[hidden] {
	display: none;
}

.event-history-expanded-row td {
	position: relative;
	padding: 18px !important;
	border-top: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.035);
	overflow: hidden;
	text-align: left !important;
}

.event-history-detail-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 24px;
	margin: 0;
	padding-right: 80px;
}

.event-history-detail-icon {
	position: absolute;
	right: 12px;
	bottom: 8px;
	color: var(--cyan);
	font-size: 96px;
	line-height: 1;
	opacity: 0.16;
	pointer-events: none;
}

.event-history-detail-grid > div {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.event-history-detail-grid dt {
	color: var(--muted);
	font-size: 0.74rem;
	font-weight: 400;
}

.event-history-detail-grid dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
	.event-history-filter-grid {
		grid-template-columns: repeat(2, minmax(150px, 1fr));
	}
	.event-history-detail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.event-history-filter-grid {
		grid-template-columns: 1fr;
	}
	.event-history-detail-grid {
		grid-template-columns: 1fr;
		padding-right: 0;
	}
	.event-history-detail-icon {
		font-size: 78px;
		opacity: 0.1;
	}

	.event-history-filter-actions {
		align-items: stretch;
		flex-direction: column;
	}
}

.contract-resource-table {
	min-width: 720px;
}

.contract-resource-row-group[hidden],
.contract-resource-pagination[hidden],
.contract-inline-empty[data-resource-no-matches][hidden] {
	display: none;
}

.contract-resource-permissions {
	min-width: 210px;
}

.contract-resource-no-permissions {
	color: var(--muted);
}

.contract-resource-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #207a56;
	border-radius: 999px;
	padding: 4px 9px;
	color: #fff;
	background: #207a56;
	font-size: 0.75rem;
	font-weight: 700;
}

.contract-resource-status--paused {
	border-color: #925300;
	background: #925300;
}

.contract-resource-status--ended {
	border-color: #526776;
	background: #526776;
}

.contract-resource-details {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
	.contract-resource-details {
		grid-template-columns: 1fr;
	}
}

.contract-resource-filters [data-resource-count] {
	margin-left: auto;
	padding-bottom: 11px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.contract-resource-pagination button {
	background: rgba(5, 21, 34, 0.92);
	font: inherit;
	cursor: pointer;
}

.contract-resource-pagination button:disabled {
	opacity: 0.45;
	cursor: default;
}
:root { --alarm-accent: #ff6a75; }

.alarm-tray {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	width: min(370px, calc(100vw - 32px));
	border: 1px solid var(--border, #294653);
	border-radius: 12px;
	background: #09202c;
	color: #edf7fa;
	box-shadow: 0 8px 32px #0008;
}
.alarm-tray.has-active-alarms { border-color: var(--alarm-accent); border-top: 4px solid var(--alarm-accent); }
.alarm-tray-header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.has-active-alarms .alarm-tray-header > i { color: var(--alarm-accent); }
.alarm-tray-title {
	flex: 1;
	margin: 0;
	color: inherit;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 600;
}
.alarm-tray-header .icon-button { flex: none; width: 30px; height: 30px; min-height: 30px; }
.alarm-tray.is-minimized { width: auto; max-width: calc(100vw - 16px); }
.alarm-tray.is-minimized .alarm-tray-title { white-space: nowrap; }
.alarm-tray[hidden], .alarm-tray [hidden] { display: none; }
.alarm-tray-status { margin: 0; padding: 0 12px 10px; font-size: 12px; color: #b8ccd7; }
.alarm-tray-list {
	display: grid;
	gap: 12px;
	padding: 0 12px 12px;
	max-height: min(42vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.alarm-tray-list:empty { display: none; }
.active-alarm-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: 12px;
	min-width: 0;
	padding: 12px 0;
	overflow-wrap: anywhere;
}
.has-multiple-alarms .active-alarm-card {
	border: 1px solid #ff6a7580;
	border-left: 3px solid var(--alarm-accent);
	border-radius: 8px;
	background: #102c38;
	padding: 12px;
}
.alarm-watermark {
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 6px;
	color: #c5d4de;
	font-size: 90px;
	line-height: 1;
	opacity: .2;
	pointer-events: none;
}
.active-alarm-card-heading { display: flex; align-items: flex-start; gap: 10px; }
.active-alarm-card-heading > i { flex: none; margin-top: 3px; color: var(--alarm-accent); }
.active-alarm-card-heading h3 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; color: #fff; }
.alarm-card-context { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 6px 10px; margin: 0; font-size: 12px; line-height: 1.5; }
.alarm-card-context dt { color: #aec4d0; font-weight: 400; }
.alarm-card-context dd { min-width: 0; margin: 0; color: #edf7fa; font-weight: 400; }
.alarm-card-actions, .alarm-dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.alarm-deactivate { border: 1px solid var(--alarm-accent); color: #fff; background: #92323d; }
.alarm-tray button:focus-visible, .alarm-dialog-content button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.alarm-tray button:disabled, .alarm-dialog-content button:disabled { opacity: .5; cursor: not-allowed; }
.alarm-detail-dialog, .alarm-confirm-dialog {
	width: min(520px, calc(100vw - 32px));
	max-height: calc(100dvh - 48px);
	overflow: auto;
	border: 1px solid var(--alarm-accent);
	border-radius: 12px;
	padding: 0;
	background: #09202c;
	color: #edf7fa;
}
.alarm-detail-dialog::backdrop, .alarm-confirm-dialog::backdrop { background: #001019bb; }
.alarm-dialog-content { padding: 22px; overflow-wrap: anywhere; }
.alarm-detail-dialog .alarm-dialog-content { position: relative; isolation: isolate; overflow: hidden; }
.alarm-detail-watermark { right: 4px; bottom: 20px; font-size: 130px; }
.alarm-dialog-content header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.alarm-dialog-content h2 { margin: 0 0 16px; font-size: 21px; }
.alarm-dialog-content dl { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: 12px; margin: 18px 0; }
.alarm-dialog-content dt { color: #a8bdc9; }
.alarm-dialog-content dd { margin: 0; }
.alarm-dialog-content [data-alarm-command-feedback] { border-left: 3px solid var(--alarm-accent); padding: 10px; background: #ff6a7515; }
@media (max-width: 600px) {
	.alarm-tray { right: 8px; bottom: 8px; width: min(370px, calc(100vw - 16px)); }
	.alarm-tray-list { max-height: 30vh; }
	.alarm-dialog-content { padding: 16px; }
}