/* ════════════════════════════════════════════════════════════════════════════
 * topbar.css — the unified slim sticky top bar (partials/_topbar.html).
 * Loaded LAST and scoped entirely under .icms-topbar, so the
 * 17 legacy stylesheets and their !important wars can never touch it. Pages
 * without a .icms-topbar element (landing, admin) are unaffected.
 * ══════════════════════════════════════════════════════════════════════════*/

.icms-topbar {
	position: sticky;
	top: 0;
	z-index: 120; /* above page content, far below #welcomeModal/auth (9000) */
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 20px;
	min-height: 52px;
	background: var(--surface-card, #ffffff);
	border-bottom: 1px solid var(--ink-200, #e2e8f0);
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ── Brand (single line — no tagline bloat) ────────────────────────────────── */
.icms-topbar__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	flex-shrink: 0;
	min-width: 0;
}
.icms-topbar__mark {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--gold-50, #fdf9f2);
	border: 1px solid var(--gold-300, #efd4a0);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.icms-topbar__name {
	color: var(--ink-900, #0f172a);
	font-family: var(--font-display, 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.icms-topbar__name b { color: var(--gold-700, #92610f); font-weight: 800; }
.icms-topbar__sub {
	color: var(--ink-500, #64748b);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	border-left: 1px solid var(--ink-200, #e2e8f0);
	padding-left: 10px;
	margin-left: 2px;
}

/* ── Module links — the actual top nav ─────────────────────────────────────── */
.icms-topbar__links {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	/* Safety net: if the bar ever runs short of room before the burger
	   breakpoint kicks in, the nav clips rather than overlapping the right
	   cluster (the old crowding bug). */
	overflow: hidden;
}
.icms-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ink-600, #475569);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 8px;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease;
}
.icms-topbar__linkbtn {
	border: 0;
	background: transparent;
	font-family: inherit;
	cursor: pointer;
}
.icms-topbar__link i { font-size: 12px; color: var(--ink-400, #94a3b8); transition: color 0.14s ease; }
.icms-topbar__link:hover { background: var(--ink-100, #eef2f7); color: var(--ink-900, #0f172a); }
.icms-topbar__link:hover i { color: var(--gold-600, #b07d1f); }
/* Active tab keeps the brand gold, on the LIGHT gold ramp — #fbbf24 as text on
   white is ~1.7:1 and unreadable, so the pill is gold-100 fill + gold-700 ink. */
.icms-topbar__link.is-active {
	background: var(--gold-100, #fbf2e3);
	color: var(--gold-700, #92610f);
}
.icms-topbar__link.is-active i { color: var(--gold-700, #92610f); }

/* ── Prices dropdown (always visible — never collapses into the burger) ─────── */
/* Stretch the wrapper to the bar's full height so the panel's `top: 100%`
   anchors to the bar's bottom edge (not the centered button), regardless of
   how tall the right cluster makes the bar. */
.icms-topbar__prices { position: relative; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; }
.icms-topbar__pricesbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ink-600, #475569);
	background: var(--ink-50, #f8fafc);
	border: 1px solid var(--ink-200, #e2e8f0);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 12px;
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.icms-topbar__pricesbtn > i:first-child { font-size: 12px; color: var(--gold-600, #b07d1f); }
.icms-topbar__pricescaret { display: inline-block; font-size: 10px; opacity: 0.85; transition: transform 0.16s ease; }
.icms-topbar__pricesbtn:hover,
.icms-topbar__prices.open .icms-topbar__pricesbtn {
	background: var(--gold-100, #fbf2e3);
	color: var(--gold-700, #92610f);
	border-color: var(--gold-300, #efd4a0);
}
.icms-topbar__prices.open .icms-topbar__pricescaret { transform: rotate(180deg); }

/* Compact by design (2026-07): tight row/group rhythm everywhere, the four
   groups flow into TWO columns on desktop, and a viewport max-height keeps
   the panel scrollable rather than off-screen on short displays. */
.icms-topbar__prices-menu {
	display: none;
	box-sizing: border-box;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 200; /* above page content, below #welcomeModal/auth (9000) */
	min-width: 300px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: 12px;
	box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.04));
	padding: 10px 12px;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.icms-topbar__prices.open .icms-topbar__prices-menu {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 16px;
	row-gap: 6px;
}
/* Two columns once there's room — halves the panel height on desktop. */
@media (min-width: 769px) {
	.icms-topbar__prices.open .icms-topbar__prices-menu {
		grid-template-columns: 1fr 1fr;
		min-width: 520px;
	}
}
.icms-prices-group {
	padding-top: 6px;
	border-top: 1px solid var(--ink-100, #eef2f7);
}
/* First group in each column shouldn't draw a divider — on desktop that's
   the first TWO groups (one per column). */
.icms-prices-group:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 769px) {
	.icms-prices-group:nth-child(2) { border-top: 0; padding-top: 0; }
}
.icms-prices-head {
	color: var(--gold-700, #92610f);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 3px;
}
.icms-prices-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
}
.icms-prices-name { color: var(--ink-900, #0f172a); font-size: 12px; font-weight: 700; flex: 0 0 78px; }
.icms-prices-units { color: var(--ink-500, #64748b); font-size: 11px; font-weight: 600; flex: 1 1 auto; }
.icms-prices-amt {
	color: var(--gold-700, #92610f);
	background: var(--gold-50, #fdf9f2);
	border: 1px solid var(--gold-300, #efd4a0);
	font-size: 11px;
	font-weight: 800;
	padding: 1.5px 8px;
	border-radius: 999px;
	white-space: nowrap;
	flex: 0 0 auto;
}
.icms-prices-foot {
	grid-column: 1 / -1;
	margin-top: 2px;
	padding-top: 6px;
	border-top: 1px solid var(--ink-100, #eef2f7);
	color: var(--ink-500, #64748b);
	font-size: 10px;
	line-height: 1.45;
}
/* When the module nav collapses into the burger (≤768px) the Prices button
   shifts to the left of the bar, so anchoring the panel to the button's right
   edge would push it off-screen. Pin it to the viewport's right edge instead
   (position:fixed) so it stays fully visible at every width. Its top is set to
   the bar's actual bottom by icmsTogglePrices() — the value here is a fallback. */
@media (max-width: 768px) {
	.icms-topbar__prices-menu {
		position: fixed;
		top: 62px;
		right: 12px;
		left: auto;
		width: 320px;
		min-width: 0;
		max-width: calc(100vw - 24px);
	}
}
@media (max-width: 560px) {
	.icms-topbar__priceslabel { display: none; }     /* icon + caret only on phones */
	.icms-topbar__pricesbtn { padding: 7px 10px; }
	/* Phone menu: plan name + price carry the message — drop the middle
	   "N credits" column and tighten the rhythm so the panel stays short. */
	.icms-prices-units { display: none; }
	.icms-prices-row { padding: 1px 0; }
	.icms-prices-name { flex: 1 1 auto; }
	.icms-prices-head { margin-bottom: 2px; }
	.icms-prices-foot { font-size: 9.5px; }
}

/* ── Right cluster: credits · user · theme · sign out ──────────────────────── */
.icms-topbar__right {
	display: flex !important;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
	flex-wrap: nowrap !important;
}
/* The right cluster reuses the bare .header-right class (JS-injection
   contract), so the OLD fat-header CSS still targets it — v4.css gives it
   a top border + padding ("row below the title" look) and ui-enhance.css
   makes it width:100% centered + wrapping under 768px, which overflows the
   bar off-screen on phones. Out-specific those leaks here. */
.icms-topbar .header-right {
	width: auto !important;
	flex: 0 0 auto !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	justify-content: flex-end !important;
	margin-left: auto !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
	gap: 6px !important;
}
.icms-topbar .quota-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: var(--gold-50, #fdf9f2) !important;
	border: 1px solid var(--gold-300, #efd4a0) !important;
	color: var(--gold-700, #92610f) !important;
	font-size: 12px !important;
	font-weight: 700;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	min-height: 32px !important;
	white-space: nowrap;
}
/* !important + webkit-text-fill guards fight the dark-theme quota-pill leaks in
   v4.css (gold #fbbf24 on this light bar → ~1.6:1). Keep both properties. */
.icms-topbar .quota-pill i { color: var(--gold-600, #b07d1f) !important; font-size: 11px; }
.icms-topbar .quota-pill strong {
	color: var(--ink-900, #0f172a) !important;
	-webkit-text-fill-color: var(--ink-900, #0f172a) !important;
}
.icms-topbar .quota-pill--modules {
	gap: 8px;
}
.icms-topbar .quota-pill__sep {
	width: 1px;
	height: 14px;
	background: var(--gold-300, #efd4a0);
	display: inline-block;
}
.icms-topbar .user-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--ink-50, #f8fafc) !important;
	border: 1px solid var(--ink-200, #e2e8f0) !important;
	border-radius: 999px !important;
	padding: 2px 12px 2px 8px !important;
	height: 32px !important;          /* hard cap — the pill sets the bar height */
	min-height: 0 !important;
	box-sizing: border-box !important;
	cursor: pointer;
	max-width: 200px;
	overflow: hidden;
}
.icms-topbar .user-pill:hover { background: var(--ink-100, #eef2f7) !important; }
.icms-topbar .user-pill > i { color: var(--gold-600, #b07d1f); font-size: 16px; }
/* Dedicated avatar slot inside the pill — always shows SOMETHING: the real
   avatar image when users.avatar_url is set, initials otherwise, and the
   generic icon only before the session resolves. Rendered/updated by
   icmsRenderTopbarAvatar() (inline in partials/_topbar.html). */
.icms-topbar .user-pill-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.icms-topbar .user-pill-avatar i { color: var(--gold-600, #b07d1f); font-size: 16px; }
.icms-topbar .user-pill-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.icms-topbar .user-pill-initials {
	width: 100%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gold-100, #fbf2e3);
	border: 1px solid var(--gold-300, #efd4a0);
	border-radius: 50%;
	color: var(--gold-700, #92610f);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
	box-sizing: border-box;
}
.icms-topbar .user-pill-info { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.icms-topbar .user-pill-name {
	color: var(--ink-900, #0f172a); font-size: 11.5px; font-weight: 700; line-height: 1.15;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icms-topbar .user-pill-email {
	color: var(--ink-500, #64748b); font-size: 9.5px; line-height: 1.15;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icms-topbar__iconbtn {
	display: inline-flex !important;   /* defeats the legacy .icms-libnav-btn hide */
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--ink-50, #f8fafc);
	border: 1px solid var(--ink-200, #e2e8f0);
	color: var(--ink-600, #475569);
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	transition: background 0.14s ease, color 0.14s ease;
}
.icms-topbar__iconbtn:hover { background: var(--ink-100, #eef2f7); color: var(--gold-700, #92610f); }
.icms-topbar__out {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	border: 1px solid var(--ink-200, #e2e8f0);
	color: var(--ink-600, #475569);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 13px;
	border-radius: 999px;
	min-height: 32px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.icms-topbar__out:hover { background: #fef2f2; border-color: rgba(220, 38, 38, 0.35); color: var(--danger-500, #dc2626); }

/* Widgets other scripts inject into .header-right (bell, refer button) —
   clamp them to the bar's 32px rhythm so nothing inflates the height, and
   repaint them for the white bar. The bell is built by icms-app-extras.js and
   still carries dark-theme colours from icms-extras.css (white-alpha fill,
   near-white glyph) — invisible on white. Overridden HERE, scoped to the bar,
   rather than in icms-extras.css, which other surfaces may still rely on. */
.icms-topbar .icms-notif-btn,
.icms-topbar .icms-notif-bell {
	width: 32px !important;
	height: 32px !important;
	min-height: 32px !important;
	border-radius: 999px !important;
	background: var(--ink-50, #f8fafc);
	border: 1px solid var(--ink-200, #e2e8f0);
	color: var(--ink-600, #475569);
}
.icms-topbar .icms-notif-btn:hover,
.icms-topbar .icms-notif-bell:hover {
	background: var(--gold-100, #fbf2e3);
	border-color: var(--gold-300, #efd4a0);
	color: var(--gold-700, #92610f);
}
/* The unread badge rings itself with the bar colour to punch out of the icon. */
.icms-topbar .icms-notif-badge { border-color: var(--surface-card, #ffffff); }
.icms-topbar .icms-topbar__right > * {
	max-height: 32px;
}
/* (Removed 2026-07: the injected #referralsPill and the legacy
   .icms-refer-btn styling. The pill duplicated the permanent
   'Referrals' nav link, and no JS ever created .icms-refer-btn.) */

/* ── Burger (mobile only) ──────────────────────────────────────────────────── */
.icms-topbar__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--ink-50, #f8fafc);
	border: 1px solid var(--ink-200, #e2e8f0);
	color: var(--gold-700, #92610f);
	font-size: 15px;
	cursor: pointer;
	padding: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
/* Trim the decorative bits (module subtitle + the user's secondary email line)
   on anything but a very wide desktop, so the nav + right cluster never crowd
   into each other on the heavier bars (exam adds a "My Assessments" button, a
   "Review" button + the injected bell — together they need ~1500px to sit
   beside the full inline nav). */
@media (max-width: 1500px) {
	.icms-topbar__sub { display: none; }
	.icms-topbar .user-pill-email { display: none; }
	.icms-topbar .user-pill { max-width: 130px; }
	/* Tighten the bar (NOT a burger collapse) so all five module links stay
	   visible inline beside the dense right cluster on laptop-width screens. */
	.icms-topbar { gap: 10px; padding: 8px 14px; }
	.icms-topbar__link { padding: 7px 9px; gap: 6px; }
	.icms-topbar__links { gap: 0; }
	.icms-topbar__outlabel { display: none; }   /* Sign out → icon only */
	.icms-topbar__out { width: 32px; padding: 0; justify-content: center; gap: 0; }
	/* Compact the dense credits pill so the heavy bars (Docs / Assessments /
	   Tool Dev) clear room for the full inline nav on common laptops. */
	.icms-topbar .quota-pill { padding: 5px 9px !important; gap: 5px; }
	.icms-topbar .quota-pill--modules { gap: 6px; }
}
/* ── Mid-width desktop/laptop steps (1450 → 1280 → 1100 → 980) ──────────────
   These keep ALL FIVE module links (incl. the tail "Referrals") visible with
   their text labels on every desktop width down to the 768px burger point.
   Strategy per user preference: shrink labels + compact the credits pill —
   never an early burger, never icon-only tabs. */
@media (max-width: 1450px) {
	/* Heavy bars (Docs / Assessments / Tool Dev) carry a logged-in right
	   cluster of ~620px (4-value credits pill + injected Referrals pill +
	   bell + user pill + Sign out) — the full inline nav needs the credits
	   pill compacted (coin + Docs value) and the Prices label gone a step
	   before the shared ≤1280px trims. */
	.icms-topbar--has-extra .quota-pill--modules span:not(:first-of-type),
	.icms-topbar--has-extra .quota-pill--modules .quota-pill__sep { display: none; }
	.icms-topbar--has-extra .icms-topbar__priceslabel { display: none; }
	.icms-topbar--has-extra .icms-topbar__pricesbtn { padding: 7px 10px; }
}
@media (max-width: 1280px) {
	.icms-topbar__priceslabel { display: none; }     /* Prices → icon + caret */
	.icms-topbar__pricesbtn { padding: 7px 10px; }
	.icms-topbar__link { padding: 6px 9px; font-size: 12.5px; gap: 5px; }
	.icms-topbar__links { gap: 2px; }
	/* The 4-value credits pill is ~286px — the single widest thing in the bar.
	   Compact it to coin icon + the first (Docs) value here, or the tail nav
	   links lose the space race long before the next breakpoint. */
	.icms-topbar .quota-pill--modules span:not(:first-of-type),
	.icms-topbar .quota-pill--modules .quota-pill__sep { display: none; }
	.icms-topbar .quota-pill { font-size: 11px !important; padding: 5px 8px !important; gap: 5px; }
	.icms-topbar .quota-pill--modules { gap: 5px; }
	/* Heavy workspaces (Docs / Assessments / Tool Dev) inject extra chrome
	   into the right cluster once logged in (bell + Referrals pill), so on
	   those bars the wordmark goes and the user pill collapses to the avatar
	   a step earlier than on the light bars (Notes / Referrals). */
	.icms-topbar--has-extra .icms-topbar__name { display: none; }
	.icms-topbar--has-extra .user-pill { max-width: 40px; padding: 2px !important; justify-content: center; }
	.icms-topbar--has-extra .user-pill-info { display: none; }
}
@media (max-width: 1100px) {
	.icms-topbar { gap: 8px; }
	.icms-topbar .user-pill { max-width: 110px; }
	.icms-topbar--has-extra .user-pill { max-width: 40px; }
	.icms-topbar__link { padding: 6px 7px; font-size: 12px; gap: 4px; }
	.icms-topbar__links { gap: 0; }
}
@media (max-width: 980px) {
	/* Drop the brand wordmark (square mark stays) and collapse the user pill
	   to just the avatar so the five labelled tabs clear the right cluster —
	   including its injected extras (bell / Referrals / Review) — all the way
	   down to the 768px burger point. */
	.icms-topbar__name { display: none; }
	.icms-topbar { gap: 8px; padding: 8px 12px; }
	.icms-topbar__link { padding: 5px 6px; font-size: 11.5px; }
	.icms-topbar .user-pill { max-width: 40px; padding: 2px !important; justify-content: center; }
	.icms-topbar .user-pill-info { display: none; }
}
@media (max-width: 620px) {
	.icms-topbar .quota-pill--modules span:not(:first-of-type),
	.icms-topbar .quota-pill--modules .quota-pill__sep {
		display: none;
	}
}
/* Collapse the module links into the burger ONLY on phones / small screens.
   On computers and laptops every link stays visible inline (the ≤1500px block
   above just tightens spacing). The module links stay fully reachable in the
   dropdown below 768px. */
@media (max-width: 768px) {
	.icms-topbar { gap: 10px; padding: 8px 14px; }
	.icms-topbar__burger { display: inline-flex; }
	.icms-topbar__links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		overflow: visible;          /* dropdown must not clip (base sets hidden) */
		background: var(--surface-card, #ffffff);
		border-bottom: 1px solid var(--ink-200, #e2e8f0);
		box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.04));
		padding: 8px 12px 12px;
	}
	.icms-topbar__links.open { display: flex; }
	.icms-topbar__link { padding: 11px 12px; font-size: 14px; }
	.icms-topbar__outlabel { display: none; }
	.icms-topbar__out { width: 32px; padding: 0; justify-content: center; gap: 0; }
}
@media (max-width: 560px) {
	/* Drop the brand wordmark (keep the square mark) — frees ~110px so the
	   right cluster, which never shrinks, stops pushing Sign out off-screen. */
	.icms-topbar__name { display: none; }
	.icms-topbar .quota-pill span { display: none; }     /* coin icon only */
	.icms-topbar .quota-pill { padding: 5px 9px !important; }
	/* Pill collapses to just the avatar — keep it centred and unclipped. */
	.icms-topbar .user-pill { max-width: 40px; padding: 2px !important; justify-content: center; }
	.icms-topbar .user-pill-info { display: none; }
}
/* Tightest phones (≤440px): trim the lowest-priority chrome so the essential
   set — brand mark · burger (nav) · notification bell · theme toggle ·
   compact user · Sign out — always fits and Sign out is never clipped (the
   reported bug). Referrals lives in the burger nav at this width. */
@media (max-width: 440px) {
	.icms-topbar { gap: 8px; padding: 8px 10px; }
	.icms-topbar__iconbtn:not(.icms-notif-btn):not(.icms-notif-bell):not(.icms-theme-toggle) { display: none !important; }
	.icms-topbar .quota-pill { display: none !important; }
	/* Belt-and-braces: Sign out must never be the item that gets clipped. */
	.icms-topbar__out { flex-shrink: 0; }
}

/* Heavy workspaces (Docs / Assessments / Tool Dev) carry a wider right cluster
   (4-value credits pill + injected Referrals/bell/Review). They no longer collapse
   the nav early — the ≤1500px spacing trims above keep all links inline on laptops,
   and the shared ≤768px burger handles phones. */