/* Legacy header notifications — keep out of custom.css to reduce merge conflicts. */
.header-notifications__trigger{
	overflow:visible;
	position:relative;
	z-index:1;
}

.header-action-btn--notifications:hover,
.header-action-btn--unfinished-tasks:hover{
	background-color:#1f2937;
}

.header-action-btn--notifications img,
.header-action-btn--unfinished-tasks img{
	display:block;
	height:20px;
	width:20px;
}

/* Legacy header: notifications dropdown (aligned with React NotificationsDropdown) */
.header-notifications{
	display:inline-flex;
	overflow:visible;
	position:relative;
	vertical-align:middle;
	z-index:2;
}

.header-notifications__trigger-inner{
	align-items:center;
	display:inline-flex;
	justify-content:center;
	overflow:visible;
	position:relative;
}

.header-notifications__badge{
	align-items:center;
	background:#dc2626;
	border-radius:999px;
	box-shadow:0 0 0 2px #374151;
	color:#ffffff;
	display:inline-flex;
	font-size:9px;
	font-weight:700;
	justify-content:center;
	line-height:1;
	min-height:16px;
	min-width:16px;
	padding:0;
	position:absolute;
	right:-12px;
	top:-12px;
}

.header-notifications__badge[hidden]{
	display:none !important;
}

.header-notifications__trigger[aria-expanded="true"]{
	border-color:rgba(96,165,250,0.85);
	box-shadow:0 0 0 1px rgba(96,165,250,0.5);
}

.header-notifications__dropdown{
	background:#ffffff;
	border:1px solid #c8d5e3;
	border-radius:8px;
	box-shadow:0 10px 25px rgba(15,23,42,0.12);
	color:#1f2937;
	display:flex;
	flex-direction:column;
	left:auto;
	margin-top:6px;
	max-width:26rem;
	min-width:0;
	overflow:hidden;
	position:absolute;
	right:0;
	text-align:left;
	top:100%;
	transform:none;
	width:min(26rem,calc(100vw - 1.5rem));
	z-index:200;
}

/* Class sets display:flex; ensure closed panel is fully hidden (some UAs let flex win over [hidden]). */
.header-notifications__dropdown[hidden]{
	display:none !important;
}

/* Do not use position:sticky here: nearest scrollport is often the viewport, so the row sticks
   to the top of the screen while scrolling the page. The list scrolls inside .header-notifications__list-scroll. */
.header-notifications__dropdown-head{
	align-items:center;
	background:#ffffff;
	border-bottom:1px solid #e2e8f0;
	display:flex;
	flex-shrink:0;
	gap:8px;
	justify-content:space-between;
	padding:8px 12px 6px;
}

.header-notifications__dropdown-title{
	color:#64748b;
	flex:1;
	font-size:11px;
	font-weight:600;
	letter-spacing:0.06em;
	line-height:1.2;
	min-width:0;
	padding:0;
	text-transform:uppercase;
}

.header-notifications__dropdown-actions{
	align-items:center;
	display:flex;
	flex-shrink:0;
	gap:4px;
}

.header-notifications__head-btn[hidden]{
	display:none !important;
}

.header-notifications__head-btn{
	align-items:center;
	background-color:#f1f5f9;
	border:1px solid #c8d5e3;
	border-radius:6px;
	box-sizing:border-box;
	color:#1f2937;
	cursor:pointer;
	display:inline-flex;
	height:1.5rem;
	justify-content:center;
	min-width:1.5rem;
	padding:0;
	width:1.5rem;
}

.header-notifications__head-btn:hover:not(:disabled){
	background-color:#e2e8f0;
}

.header-notifications__head-btn:disabled{
	background-color:#e2e8f0;
	border-color:#cbd5e1;
	box-shadow:inset 0 1px 2px rgba(15,23,42,0.06);
	color:#94a3b8;
	cursor:not-allowed;
	filter:grayscale(1);
	opacity:0.65;
	pointer-events:none;
}

.header-notifications__head-btn:disabled:hover{
	background-color:#e2e8f0;
	border-color:#cbd5e1;
	box-shadow:inset 0 1px 2px rgba(15,23,42,0.06);
	color:#94a3b8;
	filter:grayscale(1);
	opacity:0.65;
}

.header-notifications__head-btn img{
	display:block;
	height:14px;
	width:14px;
}

.header-notifications__head-btn--spinning img{
	animation:header-notifications-spin 0.8s linear infinite;
}

.header-notifications__head-link{
	align-items:center;
	background-color:#f1f5f9;
	border:1px solid #c8d5e3;
	border-radius:6px;
	box-sizing:border-box;
	color:#1f2937;
	display:inline-flex;
	height:1.5rem;
	justify-content:center;
	min-width:1.5rem;
	padding:0;
	text-decoration:none;
	width:1.5rem;
}

.header-notifications__head-link:hover{
	background-color:#e2e8f0;
}

.header-notifications__head-link img{
	display:block;
	height:14px;
	width:14px;
}

/* Do not use flex:1 + min-height:0 here: parent has no fixed height, so the body can
   collapse to 0px and clip the list (badge still uses meta.* from API). */
.header-notifications__dropdown-body{
	flex:0 1 auto;
	padding:0;
}

/* Ensure [hidden] wins over component display (e.g. flex on loading row). */
.header-notifications__dropdown-body [hidden]{
	display:none !important;
}

.header-notifications__loading{
	align-items:center;
	display:flex;
	justify-content:center;
	min-height:3.5rem;
	padding:12px 16px;
}

.header-notifications__spinner{
	animation:header-notifications-spin 0.8s linear infinite;
	border:2px solid #e2e8f0;
	border-radius:50%;
	border-top-color:#2364aa;
	display:inline-block;
	height:22px;
	width:22px;
}

@keyframes header-notifications-spin{
	to{ transform:rotate(360deg); }
}

.header-notifications__empty{
	color:#64748b;
	font-size:0.875rem;
	padding:12px 16px;
}

.header-notifications__list{
	list-style:none;
	margin:0;
	padding:0;
}

.header-notifications__list-scroll{
	box-sizing:border-box;
	max-height:18rem;
	min-width:0;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	width:100%;
}

.header-notifications__row{
	align-items:start;
	border-top:1px solid #e2e8f0;
	cursor:default;
	display:grid;
	gap:8px 10px;
	grid-template-columns:1fr auto;
	min-width:0;
	padding:10px 12px 10px 8px;
	position:relative;
}

.header-notifications__row-aside{
	align-items:flex-end;
	align-self:start;
	display:flex;
	flex-direction:column;
	flex-shrink:0;
	gap:4px;
	position:relative;
}

.header-notifications__row:first-of-type{
	border-top:0;
}

.header-notifications__row--unread{
	background:#eef3f8;
}

.header-notifications__row--selectable{
	cursor:pointer;
}

.header-notifications__row--selectable:focus-visible{
	outline:2px solid #2364aa;
	outline-offset:-2px;
}

.header-notifications__row--selectable:hover{
	background:#e2ecf6;
}

.header-notifications__row--selectable.header-notifications__row--selected{
	background:#c9dcef;
}

.header-notifications__row--selectable.header-notifications__row--selected:hover{
	background:#bdd4e8;
}

.header-notifications__row:not(.header-notifications__row--unread):hover{
	background:#f8fafc;
}

.header-notifications__row-main{
	min-width:0;
}

.header-notifications__enriched{
	display:flex;
	flex:1 1 auto;
	flex-direction:column;
	gap:4px;
	min-width:0;
}

.header-notifications__type-icon{
	align-items:center;
	border-radius:999px;
	display:inline-flex;
	flex-shrink:0;
	height:1.25rem;
	justify-content:center;
	width:1.25rem;
}

.header-notifications__type-icon--assignment{
	background:#dbeafe;
	color:#1d4ed8;
}

.header-notifications__type-icon--mention{
	background:#ffedd5;
	color:#d97706;
}

.header-notifications__type-icon--completed{
	background:#ecfdf5;
	color:#059669;
}

.header-notifications__type-icon--default{
	background:#f3f4f6;
	color:#64748b;
}

.header-notifications__headline-row{
	align-items:center;
	display:flex;
	flex-wrap:nowrap;
	gap:8px;
	min-width:0;
}

.header-notifications__headline-text{
	align-items:baseline;
	display:flex;
	flex:1 1 auto;
	flex-wrap:nowrap;
	gap:4px;
	min-width:0;
	overflow:hidden;
}

.header-notifications__category-prefix{
	color:#1f2937;
	flex-shrink:0;
	font-size:0.875rem;
	font-weight:400;
	line-height:1.35;
	opacity:0.9;
}

.header-notifications__headline{
	color:#1f2937;
	flex:0 1 auto;
	font-size:0.875rem;
	font-weight:700;
	line-height:1.35;
	max-width:100%;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.header-notifications__headline-separator{
	color:#1f2937;
	flex-shrink:0;
	font-size:0.875rem;
	font-weight:400;
	line-height:1.35;
	opacity:0.5;
}

.header-notifications__task-name{
	color:#1f2937;
	flex:1 1 auto;
	font-size:0.875rem;
	font-weight:400;
	line-height:1.35;
	min-width:0;
	opacity:0.85;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.header-notifications__meta{
	display:flex;
	flex-direction:column;
	gap:4px;
	min-width:0;
}

.header-notifications__chips{
	align-items:center;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}

.header-notifications__chip{
	align-items:center;
	border-radius:6px;
	box-sizing:border-box;
	display:inline-flex;
	flex-shrink:0;
	font-size:0.75rem;
	font-weight:400;
	gap:4px;
	height:1.25rem;
	line-height:1;
	max-width:100%;
	padding:0 8px;
	vertical-align:middle;
}

.header-notifications__chip--project{
	background:#f1f5f9;
	border:1px solid #e2e8f0;
	color:#64748b;
	min-width:0;
	text-decoration:none;
}

a.header-notifications__chip--project:hover{
	background:#e2e8f0;
	border-color:#cbd5e1;
	color:#334155;
}

a.header-notifications__chip--project:focus-visible{
	outline:2px solid #2364aa;
	outline-offset:2px;
}

.header-notifications__chip--record{
	background:#f0f7ff;
	border:1px solid #bfdbfe;
	color:#2563eb;
	flex:0 1 auto;
	font-size:0.75rem;
	line-height:1;
	min-width:0;
	text-decoration:none;
}

a.header-notifications__chip--record:hover{
	background:#dbeafe;
	border-color:#93c5fd;
	color:#1d4ed8;
}

a.header-notifications__chip--record:focus-visible{
	outline:2px solid #2364aa;
	outline-offset:2px;
}

.header-notifications__chip-icon{
	display:inline-flex;
	flex-shrink:0;
}

.header-notifications__chip-text{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.header-notifications__actor{
	align-items:center;
	color:#64748b;
	display:flex;
	font-size:0.6875rem;
	gap:4px;
	line-height:1.35;
	min-width:0;
}

.header-notifications__avatar{
	align-items:center;
	background:#e5e7eb;
	border-radius:999px;
	color:#64748b;
	display:inline-flex;
	flex-shrink:0;
	font-size:0.625rem;
	font-weight:700;
	height:1.25rem;
	justify-content:center;
	letter-spacing:0.02em;
	width:1.25rem;
}

.header-notifications__actor-text{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.header-notifications__new-badge{
	background:#3b82f6;
	border-radius:4px;
	color:#ffffff;
	flex:0 0 auto;
	flex-shrink:0;
	font-size:0.625rem;
	font-weight:500;
	letter-spacing:0.04em;
	line-height:1;
	padding:2px 5px;
	text-transform:uppercase;
}

.header-notifications__time{
	align-self:start;
	color:#64748b;
	flex-shrink:0;
	font-size:11px;
	padding-top:2px;
	white-space:nowrap;
}

.header-notifications__sr-only{
	border:0;
	clip:rect(0,0,0,0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
}