/*
 * top-bar.css — MLP-425 (Zeus3) Option 3 global top bar.
 *
 * Fixed to the top of the viewport, above both #root and #form. Height is the
 * shared --top-bar-height token (optimiserConstants.css) so the icon sidebar, the audit
 * toolbar and the React project list all offset from one value.
 *
 * Values mirror the shipped zeus-admin bar (decision D1: independent copies,
 * matched by hand — see zeus-admin/frontend/src/layouts/topbar/TopBarStyles.css)
 * while using Zeus3's own palette tokens.
 */
#top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--top-bar-height);
	background-color: var(--white);
	box-shadow: 0 1px 2px #00000021;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Guarantees separation between the nav (which can grow to the full project
	   name / tab labels) and the right-hand icon cluster, so on narrow screens the
	   nav can never sit flush against the hamburger. Pairs with min-width:0 +
	   overflow-x:auto on .top-bar-nav, which yields the space. */
	gap: 12px;
	padding: 0 20px 0 12px;
	/* Above the fixed left icon sidebar (z-index 22) so its shadow lands under the bar. */
	z-index: 30;
	font-family: var(--font-family);
}

.top-bar-left {
	display: flex;
	align-items: stretch;
	height: 100%;
	gap: 4px;
	min-width: 0;
}

.top-bar-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.top-bar-logo img {
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.top-bar-divider {
	width: 1px;
	align-self: center;
	height: 28px;
	background-color: #e0e0e0;
	margin: 0 12px 0 4px;
	flex-shrink: 0;
}

.top-bar-nav {
	display: flex;
	align-items: stretch;
	gap: 4px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.top-bar-nav::-webkit-scrollbar {
	display: none;
}

.top-bar-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 18px;
	height: 100%;
	font-size: 14px;
	font-weight: 500;
	color: var(--dark-black);
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	border-radius: 6px 6px 0 0;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.top-bar-tab:hover,
.top-bar-tab:focus-visible {
	color: var(--blue);
	background-color: #ecf6ff;
	text-decoration: none;
}

.top-bar-tab.active {
	color: var(--blue);
	background-color: #ecf6ff;
	border-bottom-color: var(--blue);
}

.top-bar-tab-icon {
	font-size: 16px;
}

/* The selected-project tab shows a max-width so long addresses truncate. */
.top-bar-project-tab {
	max-width: 260px;
}

.top-bar-project-tab span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-bar-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.top-bar-menu-wrapper {
	position: relative;
	/* Never let the icon controls be squeezed into each other on narrow screens. */
	flex-shrink: 0;
}

.top-bar-icon-btn {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	border-radius: 50%;
	color: var(--dark-black);
	font-size: 20px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.top-bar-icon-btn:hover,
.top-bar-icon-btn:focus-visible,
.top-bar-icon-btn[aria-expanded="true"] {
	background-color: #ecf6ff;
	color: var(--blue);
}

.top-bar-menu {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 190px;
	background-color: var(--white);
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	box-shadow: 0 4px 16px #00000014;
	z-index: 31;
}

.top-bar-menu li {
	list-style: none;
}

.top-bar-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	font-size: 14px;
	padding: 8px 18px;
	color: var(--dark-black);
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
}

.top-bar-menu-item:hover,
.top-bar-menu-item:focus-visible {
	background-color: #ecf6ff;
	color: var(--blue);
}

.top-bar-menu-item.top-bar-logout {
	color: #e35d0a;
}

/* Deployment-info modal (triple-click the logo — staff convenience). */
.top-bar-deployment-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
.top-bar-deployment-modal {
	position: relative;
	background: var(--white);
	border-radius: 10px;
	box-shadow: 0 8px 32px #00000033;
	padding: 24px 28px;
	min-width: 320px;
	max-width: 90vw;
	font-size: 14px;
	color: var(--dark-black);
}
.top-bar-deployment-modal p {
	margin: 4px 0;
}
.top-bar-deployment-title {
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 10px !important;
}
.top-bar-deployment-close {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--grey);
}

/* The icon-sidebar-toggle hamburger only exists on mobile (desktop keeps the icon sidebar open). */
.top-bar-hamburger {
	display: none;
}

/* MLP-425 Option 3 — on mobile the responsive top bar stays (matching the design's
   mobile frames) and replaces the legacy #mobile-topbar. A shorter bar height on
   mobile flows through every var-based offset. */
@media screen and (max-width: 992px) {
	:root {
		--top-bar-height: 56px;
	}
	/* Superseded by the responsive top bar. */
	#mobile-topbar {
		display: none !important;
	}
	/* MLP-425 mobile UI — the hamburger no longer lives in the top bar. Each mode
	   owns its own hamburger in its second bar: the React list bar (filters drawer)
	   and the audit detail bar (form nav panel). Keep it hidden here. */
	.top-bar-hamburger {
		display: none;
	}
	/* On mobile the project tab is removed from the top bar to keep it clean; the route
	   back to the open project is the "back to project" chip beside the Active Projects
	   label on the Projects list (React Header). Desktop keeps the top-bar project tab. */
	#top-bar-project-tab {
		display: none !important;
	}
	#top-bar {
		padding: 0 6px;
	}
	.top-bar-logo img {
		width: 36px;
		height: 36px;
	}
	.top-bar-divider {
		margin: 0 6px 0 2px;
	}
	.top-bar-tab {
		padding: 0 10px;
		font-size: 13px;
	}
	.top-bar-tab-icon {
		font-size: 15px;
	}
	.top-bar-icon-btn {
		width: 34px;
		height: 34px;
		font-size: 18px;
	}
	.top-bar-right {
		gap: 4px;
	}

	/* MLP-425 mobile UI — scroll-collapsing bars. On scroll-down the top bar and Bar 2
	   hide and Bar 3 (and, in audit mode, the tab bar) slide up to the top; on scroll-up
	   they return immediately. Driven by body.bars-collapsed, toggled by the scroll
	   handlers in App.js (Projects list) and main-sidenav.js (Audit). */
	body.bars-collapsed #top-bar {
		transform: translateY(-100%);
	}
}

/* Dark mode — global top bar (MLP-425). Matches the audit/React dark palette. */
body.dark-mode #top-bar {
	background-color: #1e1e1e;
	box-shadow: 0 1px 2px #00000066;
}
body.dark-mode .top-bar-divider {
	background-color: #555;
}
body.dark-mode .top-bar-tab {
	color: #e8e8e8;
}
body.dark-mode .top-bar-tab:hover,
body.dark-mode .top-bar-tab:focus-visible {
	color: #86b7fe;
	background-color: rgba(0, 133, 255, 0.15);
}
body.dark-mode .top-bar-tab.active {
	color: #86b7fe;
	background-color: rgba(0, 133, 255, 0.2);
	border-bottom-color: #86b7fe;
}
body.dark-mode .top-bar-icon-btn {
	color: #e8e8e8;
}
body.dark-mode .top-bar-icon-btn:hover,
body.dark-mode .top-bar-icon-btn:focus-visible,
body.dark-mode .top-bar-icon-btn[aria-expanded="true"] {
	background-color: rgba(0, 133, 255, 0.15);
	color: #86b7fe;
}
body.dark-mode .top-bar-menu {
	background-color: #1e1e1e;
	border-color: #555;
	box-shadow: 0 4px 16px #00000066;
}
body.dark-mode .top-bar-menu-item {
	color: #e8e8e8;
}
body.dark-mode .top-bar-menu-item:hover,
body.dark-mode .top-bar-menu-item:focus-visible {
	background-color: rgba(0, 133, 255, 0.15);
	color: #86b7fe;
}
body.dark-mode .top-bar-menu-item.top-bar-logout {
	color: #ff8a4c;
}
body.dark-mode .top-bar-deployment-overlay {
	background: rgba(0, 0, 0, 0.7);
}
body.dark-mode .top-bar-deployment-modal {
	background: #1e1e1e;
	color: #e8e8e8;
	box-shadow: 0 8px 32px #00000088;
}
body.dark-mode .top-bar-deployment-close {
	color: #aaa;
}

/* Dark mode — global top bar (MLP-425). Matches the audit/React dark palette. */
body.dark-mode #top-bar {
	background-color: #1e1e1e;
	box-shadow: 0 1px 2px #00000066;
}
body.dark-mode .top-bar-divider {
	background-color: #555;
}
body.dark-mode .top-bar-tab {
	color: #e8e8e8;
}
body.dark-mode .top-bar-tab:hover,
body.dark-mode .top-bar-tab:focus-visible {
	color: #86b7fe;
	background-color: rgba(0, 133, 255, 0.15);
}
body.dark-mode .top-bar-tab.active {
	color: #86b7fe;
	background-color: rgba(0, 133, 255, 0.2);
	border-bottom-color: #86b7fe;
}
body.dark-mode .top-bar-icon-btn {
	color: #e8e8e8;
}
body.dark-mode .top-bar-icon-btn:hover,
body.dark-mode .top-bar-icon-btn:focus-visible,
body.dark-mode .top-bar-icon-btn[aria-expanded="true"] {
	background-color: rgba(0, 133, 255, 0.15);
	color: #86b7fe;
}
body.dark-mode .top-bar-menu {
	background-color: #1e1e1e;
	border-color: #555;
	box-shadow: 0 4px 16px #00000066;
}
body.dark-mode .top-bar-menu-item {
	color: #e8e8e8;
}
body.dark-mode .top-bar-menu-item:hover,
body.dark-mode .top-bar-menu-item:focus-visible {
	background-color: rgba(0, 133, 255, 0.15);
	color: #86b7fe;
}
body.dark-mode .top-bar-menu-item.top-bar-logout {
	color: #ff8a4c;
}
body.dark-mode .top-bar-deployment-overlay {
	background: rgba(0, 0, 0, 0.7);
}
body.dark-mode .top-bar-deployment-modal {
	background: #1e1e1e;
	color: #e8e8e8;
	box-shadow: 0 8px 32px #00000088;
}
body.dark-mode .top-bar-deployment-close {
	color: #aaa;
}

/* ---------------------------------------------------------------------------
   ZEUS-2531 — the notification bell.
   Sits on top of .top-bar-icon-btn and .top-bar-menu, which already supply the
   round button and the dropdown frame; only the badge, the list and the header
   and footer rows are new. Kept in this file rather than a new one so the bar
   stays one stylesheet, and visually in step with the zeus-admin copy by hand.
   --------------------------------------------------------------------------- */

.notification-bell-toggle {
	position: relative;
}

/* Anchored to the button rather than laid out in flow, so a two digit count
   cannot push the neighbouring icons along the bar. */
.notification-bell-badge {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background-color: #d93025;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	pointer-events: none;
}

.top-bar-menu.notification-bell-menu {
	width: 360px;
	max-width: calc(100vw - 24px);
	padding: 0;
}

.notification-bell-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid #eee;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-black);
}

.notification-bell-mark-all,
.notification-bell-settings {
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--blue);
	cursor: pointer;
	font-family: inherit;
}

/* Capped and scrollable: the menu is a glance at the newest few. */
.notification-bell-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 380px;
	overflow-y: auto;
}

.notification-bell-list li {
	list-style: none;
}

.notification-bell-list li + li {
	border-top: 1px solid #f2f2f2;
}

.notification-bell-item {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.notification-bell-item:hover,
.notification-bell-item:focus-visible {
	background-color: #ecf6ff;
}

/* Unread is carried by weight and a left marker, not by colour alone. */
.notification-bell-list li.is-unread .notification-bell-item {
	border-left: 3px solid var(--blue);
	padding-left: 11px;
}

.notification-bell-list li.is-unread .notification-bell-summary {
	font-weight: 600;
}

.notification-bell-summary {
	display: block;
	font-size: 13px;
	line-height: 18px;
	color: var(--dark-black);
}

.notification-bell-when {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: #717171;
}

.notification-bell-empty {
	padding: 18px 14px;
	font-size: 13px;
	color: #717171;
	text-align: center;
}

.notification-bell-foot {
	padding: 9px 14px;
	border-top: 1px solid #eee;
	font-size: 12px;
	text-align: center;
}

.notification-bell-foot-sep {
	margin: 0 8px;
	color: #c7ccd4;
}

/* ---------------------------------------------------------------------------
   ZEUS-2531 — the bell in dark mode.
   Same palette as the MLP-425 rules above, and needed for the same reason they
   are: by the time the menu paints, .top-bar-menu is already #1e1e1e, so every
   rule up there that still names a light border or var(--dark-black) would be
   dark on dark.
   The badge is deliberately left alone. Red on white reads at any brightness,
   and it is the one thing on this bar that should not blend in.
   --------------------------------------------------------------------------- */

body.dark-mode .notification-bell-head {
	border-bottom-color: #555;
	color: #e8e8e8;
}
body.dark-mode .notification-bell-mark-all,
body.dark-mode .notification-bell-settings {
	color: #86b7fe;
}
body.dark-mode .notification-bell-list li + li {
	border-top-color: #333;
}
body.dark-mode .notification-bell-item:hover,
body.dark-mode .notification-bell-item:focus-visible {
	background-color: rgba(0, 133, 255, 0.15);
}
body.dark-mode .notification-bell-list li.is-unread .notification-bell-item {
	border-left-color: #86b7fe;
}
body.dark-mode .notification-bell-summary {
	color: #e8e8e8;
}
body.dark-mode .notification-bell-when,
body.dark-mode .notification-bell-empty {
	color: #aaa;
}
body.dark-mode .notification-bell-foot {
	border-top-color: #555;
}
body.dark-mode .notification-bell-foot-sep {
	color: #666;
}