/*
 * SellKit UI — layout
 * ---------------------------------------------------------------------------
 * App shell (sidebar + mobile bar + main), page header, containers, grids,
 * the single-column auth layout, logo and scrollbars. The shell markup lives
 * in partials/ui-shell-sidebar.php; each page template wraps its content in
 * <div class="sellkit-main-content with-vertical-header [ui-main]">.
 *
 * Legacy classes (.sellkit-vertical-header, .sellkit-menu, …) stay on the
 * shell markup because style.css and frontend.js reference them. Rules here
 * out-rank style.css by specificity, and use !important only where legacy
 * CSS does or where frontend.js writes inline styles (fadeIn/fadeOut).
 *
 * Breakpoint: the sidebar becomes an off-canvas sheet at <= 1024px, the
 * legacy breakpoint that style.css and frontend.js already use.
 */

:root { --sidebar-current: var(--sidebar-width); }
:root[data-sidebar="collapsed"] { --sidebar-current: var(--sidebar-width-collapsed); }

/* ===========================================================================
 * Sidebar
 * ======================================================================== */
.ui-sidebar.sellkit-vertical-header {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: var(--z-sidebar);
	display: flex !important;           /* frontend.js fadeIn/fadeOut writes inline display */
	flex-direction: column;
	width: var(--sidebar-current);
	height: 100%;
	min-height: 0;
	padding: 0;
	border-right: 1px solid var(--sidebar-border);
	background: var(--sidebar);
	color: var(--sidebar-foreground);
	opacity: 1 !important;               /* … and inline opacity */
	transform: none !important;          /* … and inline transform */
	transition: width var(--duration) var(--ease-out);
	overflow: visible;
}

.ui-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	height: var(--topbar-h);
	/* Left edge matches the nav icons: content padding (space-3) + link padding (space-2-5). */
	padding: 0 var(--space-3) 0 calc(var(--space-3) + var(--space-2-5));
	flex-shrink: 0;
}
.ui-sidebar .sellkit-logo.ui-sidebar__brand {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1);
	margin: 0 0 0 calc(var(--space-1) * -1);
	border-radius: var(--radius-md);
	color: var(--foreground);
}
.ui-sidebar__brand .ui-logo { height: 1.5rem; width: auto; display: block; }
.ui-sidebar__brand .ui-logo--mark { display: none; height: 1.75rem; }

.ui-sidebar__collapse { color: var(--sidebar-muted-foreground); }
.ui-sidebar .sellkit-mobile-header-close.ui-sidebar__close { display: none; position: static; opacity: 1; }

.ui-sidebar__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--space-2) var(--space-3) var(--space-4);
}

/* Nav list (.sellkit-menu kept for legacy CSS) */
.ui-sidebar .ui-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
	flex: none;
}
.ui-sidebar .ui-nav li { padding: 0; margin: 0; border: 0; line-height: inherit; }
.ui-sidebar .ui-nav li span { padding-left: 0; vertical-align: baseline; }
.ui-sidebar .ui-nav li a.ui-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2-5);
	height: 2.25rem;
	padding: 0 var(--space-2-5);
	border-radius: var(--radius-md);
	color: var(--sidebar-muted-foreground);
	background: transparent;
	font: var(--weight-medium) var(--text-base) / 1 var(--font-sans);
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
/* Monochrome navigation: hover and the active item get the subtle accent
   background; the icon always follows the label colour. */
.ui-sidebar .ui-nav li a.ui-nav__link:hover {
	background: var(--sidebar-accent);
	color: var(--sidebar-accent-foreground);
}
.ui-sidebar .ui-nav li.is-current-page > a.ui-nav__link {
	background: var(--sidebar-accent);
	color: var(--sidebar-accent-foreground);
	font-weight: var(--weight-semibold);
}
.ui-sidebar .ui-nav__link svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; color: currentColor; }
.ui-sidebar .ui-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-sidebar .ui-nav__trail { display: inline-flex; margin-left: auto; color: var(--sidebar-muted-foreground); }
.ui-sidebar .ui-nav__trail svg { width: 0.875rem; height: 0.875rem; }

/* Staff-only "Admin" group: pinned to the bottom of the nav, own heading. */
.ui-sidebar .ui-nav-group--admin {
	margin-top: auto;               /* pushes the group to the bottom of the nav */
	padding-top: var(--space-2);
	border-top: 1px solid var(--sidebar-border);
}
.ui-sidebar .ui-nav:has(+ .ui-nav-group--admin) { margin-bottom: var(--space-6); } /* minimum gap when the nav is long */
.ui-sidebar .ui-nav__group-label {
	display: flex;
	align-items: center;
	gap: var(--space-1-5);
	margin: 0;
	padding: var(--space-2) var(--space-2-5) var(--space-1-5);
	font: var(--weight-medium) var(--text-xs) / 1.3 var(--font-sans);
	letter-spacing: 0.02em;
	color: var(--sidebar-muted-foreground);
	white-space: nowrap;
}
.ui-sidebar .ui-nav__group-label svg { width: 0.875rem; height: 0.875rem; }

/* Footer: user menu (account, theme, sign out) */
.ui-sidebar .ui-sidebar__footer {
	position: relative;
	display: block;
	margin: 0;
	padding: var(--space-2) var(--space-3) var(--space-3);
	border-top: 1px solid var(--sidebar-border);
	flex-shrink: 0;
}
.ui-sidebar .ui-sidebar__footer .ui-dropdown { display: flex; width: 100%; }
.ui-sidebar .ui-user {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1 1 auto;
	gap: var(--space-2-5);
	width: 100%;
	min-height: 3rem;
	padding: var(--space-2);
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--sidebar-foreground);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--duration-fast) ease;
}
.ui-sidebar .ui-user:hover,
.ui-sidebar .ui-user[aria-expanded="true"] { background: var(--sidebar-accent); }
.ui-sidebar .ui-user img { width: 2rem; height: 2rem; flex-shrink: 0; border: 0; border-radius: var(--radius-md); }
.ui-sidebar .ui-user__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}
.ui-sidebar .ui-user__name,
.ui-sidebar .ui-user__email {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}
.ui-sidebar .ui-user__name { color: var(--sidebar-accent-foreground); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ui-sidebar .ui-user__email { color: var(--sidebar-muted-foreground); font-size: var(--text-xs); }
.ui-sidebar .ui-user__chevron { display: inline-flex; color: var(--sidebar-muted-foreground); }
.ui-sidebar .ui-user__chevron svg { width: 1rem; height: 1rem; }
.ui-sidebar .ui-sidebar__footer .ui-dropdown__menu { left: 0; right: 0; min-width: 0; max-width: none; }
.ui-sidebar .ui-sidebar__legal {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-2) 0;
	font-size: var(--text-xs);
}
.ui-sidebar .ui-sidebar__legal a { color: var(--sidebar-muted-foreground); text-decoration: none; }
.ui-sidebar .ui-sidebar__legal a:hover { color: var(--sidebar-accent-foreground); text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Collapsed (desktop icon rail): html[data-sidebar="collapsed"]
 * ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
	:root[data-sidebar="collapsed"] .ui-sidebar__header { flex-direction: column; justify-content: center; height: auto; padding: var(--space-3) 0 var(--space-1); gap: var(--space-1); }
	:root[data-sidebar="collapsed"] .ui-sidebar .sellkit-logo.ui-sidebar__brand { margin: 0; }
	:root[data-sidebar="collapsed"] .ui-sidebar__brand .ui-logo--full { display: none; }
	:root[data-sidebar="collapsed"] .ui-sidebar__brand .ui-logo--mark { display: block; }
	:root[data-sidebar="collapsed"] .ui-sidebar__collapse svg { transform: scaleX(-1); }
	:root[data-sidebar="collapsed"] .ui-sidebar__content { padding: var(--space-2) var(--space-2-5); overflow: visible; }
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-nav li a.ui-nav__link { justify-content: center; padding: 0; width: 2.5rem; }
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-nav__label,
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-nav__trail,
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-nav__group-label span,
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-user__text,
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-user__chevron,
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar__legal {
		position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
		clip: rect(0 0 0 0) !important; white-space: nowrap !important; padding: 0 !important; margin: -1px !important;
	}
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-nav__group-label { justify-content: center; padding: var(--space-2) 0 var(--space-1); }
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar__footer { padding: var(--space-2); }
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-user { justify-content: center; padding: var(--space-1); min-height: 2.5rem; }
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar__footer .ui-dropdown__menu { left: calc(100% + var(--space-2)); right: auto; bottom: 0; width: 15rem; }

	/* Hover label for icon-only links */
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-nav__link[data-ui-tooltip]:hover::after,
	:root[data-sidebar="collapsed"] .ui-sidebar .ui-nav__link[data-ui-tooltip]:focus-visible::after {
		content: attr(data-ui-tooltip);
		position: absolute;
		left: calc(100% + 0.75rem);
		top: 50%;
		transform: translateY(-50%);
		z-index: var(--z-tooltip);
		padding: var(--space-1-5) var(--space-2);
		border-radius: var(--radius-sm);
		background: var(--contrast);
		color: var(--contrast-foreground);
		font: var(--weight-medium) var(--text-xs) / 1.2 var(--font-sans);
		white-space: nowrap;
		pointer-events: none;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile: off-canvas sheet (<= 1024px)
 * ------------------------------------------------------------------------ */
.ui-sidebar-backdrop { display: none; }

@media (max-width: 1024px) {
	.ui-sidebar.sellkit-vertical-header {
		width: min(18rem, 86vw);
		transform: translateX(-100%) !important;
		visibility: hidden;
		box-shadow: none;
		transition: transform var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow), box-shadow var(--duration-slow) ease;
	}
	:root[data-sidebar-mobile="open"] .ui-sidebar.sellkit-vertical-header {
		transform: none !important;
		visibility: visible;
		box-shadow: var(--shadow-xl);
		transition: transform var(--duration-slow) var(--ease-out), visibility 0s, box-shadow var(--duration-slow) ease;
	}
	.ui-sidebar__collapse { display: none !important; }
	.ui-sidebar .sellkit-mobile-header-close.ui-sidebar__close { display: inline-flex; }
	.ui-sidebar .ui-nav li a.ui-nav__link { height: var(--touch-target); }
	.ui-sidebar .ui-user { min-height: var(--touch-target); }
	.ui-sidebar .ui-sidebar__legal a { display: inline-flex; align-items: center; min-height: var(--touch-target); }

	.ui-sidebar-backdrop {
		position: fixed;
		inset: 0;
		z-index: calc(var(--z-sidebar) - 1);
		display: block;
		background: var(--overlay);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--duration-slow) ease, visibility 0s linear var(--duration-slow);
	}
	:root[data-sidebar-mobile="open"] .ui-sidebar-backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--duration-slow) ease, visibility 0s;
	}
}

/* ===========================================================================
 * Mobile top bar (.sellkit-horizontal-header kept for legacy CSS)
 * ======================================================================== */
.sellkit-horizontal-header.ui-mobilebar { display: none; }
@media (max-width: 1024px) {
	.sellkit-horizontal-header.ui-mobilebar {
		position: sticky;
		top: 0;
		z-index: var(--z-sticky);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		width: auto;
		height: var(--topbar-h);
		margin: 0;
		padding: 0 var(--space-2);
		border-bottom: 1px solid var(--border);
		box-shadow: none;
		background: color-mix(in srgb, var(--background) 88%, transparent);
		-webkit-backdrop-filter: saturate(1.4) blur(10px);
		backdrop-filter: saturate(1.4) blur(10px);
		color: var(--foreground);
	}
	.ui-mobilebar .sellkit-burger-link { color: var(--foreground); font-size: inherit; }
	.ui-mobilebar__brand { display: inline-flex; align-items: center; color: var(--foreground); margin-right: auto; padding: var(--space-2); border-radius: var(--radius-md); }
	.ui-mobilebar__brand .ui-logo { height: 1.375rem; width: auto; }
}

/* ===========================================================================
 * Main content area
 * ======================================================================== */
html .with-vertical-header,
html .sellkit-main-content.with-vertical-header { /* beats legacy margin-left: 380px */
	margin-left: var(--sidebar-current);
	transition: margin-left var(--duration) var(--ease-out);
}
@media (max-width: 1024px) {
	html .with-vertical-header,
	html .sellkit-main-content.with-vertical-header { margin-left: 0; }
}

.sellkit-main-content.ui-main {
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--space-8) var(--page-gutter) var(--space-16);
	background: var(--background);
	color: var(--foreground);
}
@media (max-width: 1024px) {
	.sellkit-main-content.ui-main { min-height: calc(100dvh - var(--topbar-h)); padding-top: var(--space-6); }
}

.ui-container { width: 100%; max-width: var(--container); margin-inline: auto; min-width: 0; }
.ui-container--narrow { max-width: var(--container-narrow); }
.ui-container--wide { max-width: var(--container-wide); }
.ui-container--full { max-width: none; }

/* ===========================================================================
 * Page header
 * ======================================================================== */
.ui-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
	margin-bottom: var(--space-8);
}
.ui-page-header__text { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; flex: 1 1 20rem; }
.ui-page-header .ui-breadcrumb { margin-bottom: var(--space-1); }
.ui-page-header__title {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	letter-spacing: var(--tracking-tighter);
	color: var(--foreground);
}
.ui-page-header__description { margin: 0; max-width: 42rem; font-size: var(--text-base); color: var(--muted-foreground); }
.ui-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-page-header--divider { padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
@media (min-width: 768px) {
	.ui-page-header__title { font-size: 1.75rem; }
}
@media (max-width: 639px) {
	.ui-page-header { margin-bottom: var(--space-6); }
	.ui-page-header__actions { width: 100%; }
	.ui-page-header__actions > .ui-btn { flex: 1 1 auto; }
}

/* Optional in-content top bar (sticky): title/breadcrumb left, actions right */
.ui-topbar {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--topbar-h);
	margin: calc(var(--space-8) * -1) calc(var(--page-gutter) * -1) var(--space-6);
	padding: 0 var(--page-gutter);
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--background) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.ui-topbar__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--foreground); }
.ui-topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 1024px) {
	.ui-topbar { top: var(--topbar-h); margin-top: calc(var(--space-6) * -1); }
}

/* ===========================================================================
 * Sections, toolbars, grids
 * ======================================================================== */
.ui-section { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ui-section + .ui-section { margin-top: var(--space-10); }
.ui-section__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ui-section__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--foreground); }
.ui-section__description { margin: var(--space-1) 0 0; color: var(--muted-foreground); }

.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.ui-toolbar__search { flex: 1 1 16rem; max-width: 24rem; }
.ui-toolbar__spacer { flex: 1 1 auto; }
@media (max-width: 639px) { .ui-toolbar__search { max-width: none; flex-basis: 100%; } }

.ui-grid { display: grid; gap: var(--gap, var(--space-4)); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); min-width: 0; }
.ui-grid--2 { --cols: 2; }
.ui-grid--3 { --cols: 3; }
.ui-grid--4 { --cols: 4; }
.ui-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 16rem)), 1fr)); }
@media (max-width: 1199px) { .ui-grid--4 { --cols: 2; } .ui-grid--3 { --cols: 2; } }
@media (max-width: 639px) { .ui-grid--2, .ui-grid--3, .ui-grid--4 { --cols: 1; } }

/* Main + aside (detail pages, dashboards) */
.ui-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--aside, 20rem);
	gap: var(--space-8);
	align-items: start;
	min-width: 0;
}
.ui-split--aside-left { grid-template-columns: var(--aside, 16rem) minmax(0, 1fr); }
.ui-split__aside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ui-split__aside--sticky { position: sticky; top: var(--space-6); }
@media (max-width: 1099px) {
	.ui-split,
	.ui-split--aside-left { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.ui-split__aside--sticky { position: static; }
}

/* ===========================================================================
 * Auth: single centred column (authentication-template.php → .ui-auth)
 * Logo + theme toggle on top, the form card-less in the middle, legal last.
 * ======================================================================== */
.full-height-page.ui-auth {
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 100vh;
	min-height: 100dvh;
	width: 100%;
	background: var(--background);
	color: var(--foreground);
}
.ui-auth__main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: 32rem;
	margin: 0 auto;
	padding: var(--space-6) var(--space-6) var(--space-5);
}
@media (max-width: 639px) {
	.ui-auth__main { padding: var(--space-4) var(--page-gutter); }
}
.ui-auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ui-auth .sellkit-logo.ui-auth__logo {
	display: inline-flex;
	padding: var(--space-1);
	margin-left: calc(var(--space-1) * -1);
	border-radius: var(--radius-md);
	color: var(--foreground);
}
.ui-auth__logo .ui-logo { height: 1.75rem; width: auto; display: block; }
.ui-auth__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	width: 100%;
	max-width: 24rem;
	margin: 0 auto;
	padding: var(--space-12) 0;
}
.ui-auth__form { display: flex; flex-direction: column; gap: var(--space-5); }
.ui-auth__heading { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-auth .ui-auth__title {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	letter-spacing: var(--tracking-tighter);
	color: var(--foreground);
}
.ui-auth__description { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--muted-foreground); }
.ui-auth__switch { margin: 0; text-align: center; font-size: var(--text-base); color: var(--muted-foreground); }
.ui-auth__switch a,
.ui-auth__link {
	color: var(--foreground);
	font-weight: var(--weight-medium);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--foreground) 30%, transparent);
	text-underline-offset: 3px;
}
.ui-auth__switch a:hover,
.ui-auth__link:hover { color: var(--brand); text-decoration-color: currentColor; }
.ui-auth__link--muted { color: var(--muted-foreground); font-size: var(--text-sm); text-decoration-color: transparent; }
.ui-auth__link--muted:hover { color: var(--foreground); }
.ui-auth__fields { display: flex; flex-direction: column; gap: var(--space-4); }
.ui-auth__social { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 767px) {
	.ui-auth__switch a,
	.ui-auth__link { display: inline-flex; align-items: center; min-height: var(--touch-target); }
}

/* Legal note (partials/legal-footer.php) */
.footer-legals.ui-legal-note {
	margin: 0;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
	text-align: center;
}
.footer-legals.ui-legal-note a { color: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.footer-legals.ui-legal-note a:hover { color: var(--foreground); }

/* ===========================================================================
 * Print
 * ======================================================================== */
@media print {
	.ui-sidebar,
	.ui-mobilebar,
	.ui-sidebar-backdrop,
	.ui-toaster { display: none !important; }
	html .with-vertical-header,
	html .sellkit-main-content.with-vertical-header { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
 * Brand logo (partials/ui-logo.php). The artwork is the original: the violet
 * "kit" tile with white letters reads on both backgrounds, so it is never
 * outlined or recoloured. Only the near-black "Sell" wordmark (#222) would
 * vanish on dark, so in dark mode that one ink switches to near-white.
 * ------------------------------------------------------------------------ */
.ui-logo { overflow: visible; }
.ui-logo__ink { fill: #222222; }
:root[data-theme="dark"] .ui-logo__ink { fill: #fafafa; }
@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] .ui-logo__ink { fill: #fafafa; }
}
/* Light islands (legacy pages) keep the light artwork. */
body:not(:has(.ui-sidebar, .ui-auth)) .ui-logo__ink { fill: #222222; }

/* ---------------------------------------------------------------------------
 * Scrollbars: slim, rounded, theme-aware for the page and every scroll area.
 * Firefox uses scrollbar-width/color; WebKit/Blink the pseudo-elements.
 * ------------------------------------------------------------------------ */
:root {
	--scrollbar-thumb: color-mix(in srgb, var(--foreground) 22%, transparent);
	--scrollbar-thumb-hover: color-mix(in srgb, var(--foreground) 38%, transparent);
}
/* Standard properties disable the ::-webkit-scrollbar styling in Chromium,
   so only apply them where those pseudo-elements don't exist (Firefox). */
@supports not selector(::-webkit-scrollbar) {
	* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }