/* ── CSS Variables (Dark mode default) ── */
/* Sliderobes brand tokens → [[CSS Design System]] */
:root {
	/* Surfaces — neutral greys, no blue cast; every surface steps up from the canvas. */
	--bg-primary: #191a1e;
	--bg-secondary: #1f2024;
	--bg-tertiary: #2a2b30;
	--bg-nav: #1f2024;
	--bg-input: #2a2b30;
	--bg-hover: rgba(255, 255, 255, 0.05);
	--bg-card: #212227;
	--bg-page: #141518;
	--bg-zebra: #212226;

	/* Text — soft off-white (never pure #fff), neutral grey steps, no blue cast */
	--text-primary: #dee1e5;
	--text-secondary: #b4b8bf;
	--text-muted: #9da1a9;
	--text-on-color: #ffffff;
	--text-on-warning: #141518;

	/* Primary — Harbour */
	--primary-color: #2f7fa5;
	--primary-hover: #2a7497;
	--primary-active: #236382;
	--primary-subtle: rgba(47, 127, 165, 0.14);
	--accent-glow: rgba(47, 127, 165, 0.18);
	--link-color: #7fc0de;

	/* Brand constants */
	--brand-navy: #153444;
	--brand-navy-700: #1e4a60;
	--brand-harbour: #2a7497;
	--brand-rail: #7cc0dd;
	--brand-mist: #eef1f4;
	--brand-nav-text: #c6d3da;
	--brand-nav-muted: #a0b3bd;

	/* Semantic */
	--success-color: #4bb07a;
	--success-hover: #3e9868;
	--success-subtle: rgba(75, 176, 122, 0.14);

	--warning-color: #e0a33a;
	--warning-hover: #c98d27;
	--warning-subtle: rgba(224, 163, 58, 0.14);

	--danger-color: #e0525c;
	--danger-hover: #c8434d;
	--danger-subtle: rgba(224, 82, 92, 0.14);

	--info-color: #8fb0cf;
	--info-hover: #7a9cbd;
	--info-subtle: rgba(143, 176, 207, 0.14);

	/* Category — a kind of thing, not a state */
	--purple-color: #a58cc8;
	--purple-hover: #9178b6;
	--purple-subtle: rgba(165, 140, 200, 0.14);

	/* Chart fills */
	--chart-good: #47a268;
	--chart-warn: #c09042;
	--chart-bad: #c05059;
	--chart-info: #4f86a6;
	--chart-purple: #8a72b0;

	/* Overlay */
	--overlay-bg: rgba(0, 0, 0, 0.60);
	--overlay-lightbox: rgba(0, 0, 0, 0.88);

	/* Layout */
	--sidebar-width: 260px;
	/* Sidebar rail */
	--sidebar-inset: var(--sp-3);
	--sidebar-rail: calc(var(--sidebar-width) + var(--sidebar-inset));
	/* Assistant rail — the sidebar's mirror on the right */
	--assistant-width: 380px;
	--assistant-rail: calc(var(--assistant-width) + var(--sidebar-inset));
	/* Top bar */
	--topbar-pill-h: 56px;
	--topbar-gap: var(--sp-3);
	--topbar-height: 68px;
	/* Pill inset */
	--topbar-inset: var(--sp-6);

	/* Content width cap */
	--content-max: 1620px;

	/* Modal geometry */
	--modal-offset: calc(var(--topbar-height));
	--modal-max-h: calc(100vh - var(--modal-offset) * 2);

	/* Borders & Shadows — visible neutral border + elevation ring so cards pop on dark */
	--border-color: #34363b;
	--shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 6px rgba(0, 0, 0, 0.45);
	--shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.55);

	/* Scrollbars */
	--scrollbar-size: 8px;
	--scrollbar-thumb: rgba(255, 255, 255, 0.22);
	--scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);

	/* Border radius */
	/* Checkbox radius */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	/* Pill radius — the button/badge system is a pill system */
	--radius-pill: 999px;
	/* Circle/stadium radius — toggle tracks and dots. Not --radius-pill. */
	--radius-round: 999px;

	/* Buttons — Atlas Button Pack v1.0 */
	--btn-h: 32px;
	--btn-h-lg: 40px;
	/* Row exception — see the table-row rule in the Buttons section */
	--btn-h-row: 28px;
	/* Tints clear the panel on dark, so they run heavier than in light mode */
	--btn-tint: 0.18;
	--btn-tint-hover: 0.26;
	--btn-tertiary-bg: var(--bg-tertiary);
	--btn-focus: 0 0 0 3px rgba(var(--primary-rgb), 0.35);

	/* Transitions */
	--transition: all 0.2s ease;

	/* Slow transition */
	--transition-slow: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);

	/* Spacing rhythm */
	--sp-half: 2px;
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;

	/* Layers */
	--z-popup: 200;
	--z-drawer: 500;
	--z-chrome: 1000;
	--z-modal: 2000;
	--z-menu: 3000;
	--z-lightbox: 4000;
	--z-toast: 5000;
	--z-loader: 6000;

	/* Typography */
	--font-display: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Font-size scale — the only sizes the UI uses. Theme-independent. */
	--fs-2xs: 0.5rem;    /* 8px  — micro labels */
	--fs-xs: 0.625rem;   /* 10px — every badge (.badge), meta */
	--fs-sm: 0.75rem;    /* 12px — secondary/dense text; badges only via .badge-md */
	--fs-md: 0.875rem;   /* 14px — base UI/body text */
	--fs-lg: 1rem;       /* 16px — emphasis, section labels */
	--fs-xl: 1.125rem;   /* 18px — card titles */
	--fs-2xl: 1.25rem;   /* 20px — subheadings */
	--fs-3xl: 1.5rem;    /* 24px — page/section headings */
	--fs-4xl: 2rem;      /* 32px — scale cap (large icons, hero numbers) */

	/* Tracking — capitals need opening up, big numerals need closing up */
	--tracking-caps: 0.05em;    /* Studio caps only */
	--tracking-tight: -0.02em;  /* display numerals, --fs-2xl and above */

	/* RGB companions */
	--primary-rgb: 47, 127, 165;
	--success-rgb: 75, 176, 122;
	--danger-rgb: 224, 82, 92;
	--warning-rgb: 224, 163, 58;
	--info-rgb: 143, 176, 207;
	--purple-rgb: 165, 140, 200;
	--text-secondary-rgb: 180, 184, 191;
	/* Legacy aliases referenced by existing feature CSS */
	--danger-color-rgb: var(--danger-rgb);
	--warning-color-rgb: var(--warning-rgb);
}

/* ── Mobile token overrides ── */

/* ── Reset & Base Styles ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hold the scrollbar column open */
html {
	scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    background-color: var(--bg-page);
    color: var(--text-primary);
    /* Native UI theme */
    color-scheme: dark;
    /* Base line-height */
    line-height: 1.25;
    overflow-x: hidden;
}

/* Display type */
h1, h2, h3, h4, h5, h6,
.page-title {
	font-family: var(--font-display);
	font-weight: 500;
}

/* ── Impersonation Banner ── */
.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
	z-index: var(--z-toast);
	background: var(--warning-color);
	color: var(--text-on-warning);
    font-size: var(--fs-md);
    font-weight: 500;
	box-shadow: var(--shadow-md);
}

.impersonation-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-5);
}

.impersonation-stop {
	color: var(--text-on-warning);
    text-decoration: none;
	background: color-mix(in srgb, var(--text-on-warning) 12%, transparent);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background 0.2s;
    margin-left: var(--sp-2);
}

.impersonation-stop:hover {
	background: color-mix(in srgb, var(--text-on-warning) 20%, transparent);
}

/* When impersonating, shift everything down */
body:has(.impersonation-banner) .sidebar {
	top: calc(34px + var(--topbar-gap));
	height: calc(100vh - 34px - var(--topbar-gap) * 2);
}

body:has(.impersonation-banner) .top-navbar {
	top: calc(34px + var(--topbar-gap));
}

body:has(.impersonation-banner) .main-content {
    padding-top: calc(var(--topbar-height) + 34px);
}

/* ── Sidebar Navigation ── */
.sidebar {
	position: fixed;
	top: var(--topbar-gap);
	left: var(--sidebar-inset);
	height: calc(100vh - var(--topbar-gap) * 2);
	width: var(--sidebar-width);
	background-color: var(--bg-nav);
	display: flex;
	flex-direction: column;
	transition: var(--transition);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	z-index: var(--z-chrome);
}

/* ── Navy sidebar (light mode) ── */
@media (width > 1080px) {
	body.light-mode .sidebar {
		background-color: var(--brand-navy);
		border-color: var(--brand-navy);
		--bg-nav: var(--brand-navy);
		--text-primary: var(--text-on-color);
		--text-secondary: var(--brand-nav-text);
		--text-muted: var(--brand-nav-muted);
		--border-color: rgba(255, 255, 255, 0.10);
		--bg-hover: rgba(255, 255, 255, 0.08);
		--primary-color: var(--brand-rail);
		--primary-subtle: rgba(255, 255, 255, 0.08);
		--link-color: var(--brand-rail);
		--nav-marker: var(--brand-rail);
	}

	body.light-mode .sidebar .logo-dark-bg {
		display: block !important;
	}

	body.light-mode .sidebar .logo-light-bg {
		display: none !important;
	}
}

/* Hidden state */
.sidebar.hidden {
	transform: translateX(calc(-100% - var(--sidebar-inset)));
}

/* Sliderobes Hub lockup */
.sidebar-brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	height: var(--topbar-pill-h);
	padding: 0 var(--sp-4);
	border-bottom: 1px solid var(--border-color);
	overflow: hidden;
}

/* Logo sizing */
.logo-full {
	height: 40px;
	width: auto;
	display: block;
	transition: opacity 0.2s ease;
}

.logo-full.logo-atlas {
	height: 34px;
}

/* Light/dark background logo visibility */
.logo-light-bg {
    display: none !important;
}

body.light-mode .logo-dark-bg {
    display: none !important;
}

body.light-mode .logo-light-bg {
	display: block !important;
}

/* Navigation menu */
.sidebar-nav {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding: var(--sp-2);
}

.nav-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	margin-bottom: 0;
	transition: var(--transition);
}

.nav-section.collapsed {
	grid-template-rows: auto 0fr;
}

.sidebar-nav > .nav-section,
.sidebar-nav > .nav-link.single {
    position: relative;
}

.sidebar-nav > * + * {
    margin-top: var(--sp-1);
    padding-top: var(--sp-1);
}

.sidebar-nav > * + *::before {
    content: "";
    position: absolute;
    top: 0;
    left: 4px;
    right: 4px;
    height: 1px;
    background: var(--border-color);
    opacity: 0.3;
}

.nav-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	width: 100%;
	padding: var(--sp-3) var(--sp-3) var(--sp-1);
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	font-family: inherit;
	font-weight: 800;
	font-size: var(--fs-sm);
	text-align: left;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	user-select: none;
	cursor: pointer;
	transition: var(--transition);
}

.nav-section-header:hover,
.nav-section.collapsed:has(.nav-link.active) .nav-section-header {
	color: var(--text-primary);
}

.nav-section-header:focus-visible {
	outline: none;
	box-shadow: var(--btn-focus);
}

.nav-section.collapsed .nav-section-header {
	padding-bottom: var(--sp-3);
}

/* ── Collapse arrow ── */
.nav-section-arrow {
	flex-shrink: 0;
	font-size: var(--fs-2xs);
	transition: var(--transition);
}

.nav-section.collapsed .nav-section-arrow {
	transform: rotate(-90deg);
}

.nav-section-content {
	min-height: 0;
	overflow: hidden;
	padding-bottom: var(--sp-1);
	transition: var(--transition);
}

.nav-section.collapsed .nav-section-content {
	padding-bottom: 0;
	visibility: hidden;
}

.nav-link:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.nav-link.active {
	background-color: var(--bg-hover);
	color: var(--text-primary);
	box-shadow: inset 3px 0 0 var(--nav-marker, var(--primary-color));
}

.nav-link.single {
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    border-left: none;
    border-radius: var(--radius-sm);
}

.nav-link.single i {
    color: var(--text-muted);
    margin-right: var(--sp-half);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nav-link.single:hover {
    color: var(--text-primary);
    border-left: none;
}

/* Nav badge counters */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
	background-color: var(--primary-color);
	color: var(--text-on-color);
}

.nav-badge.unread {
	background-color: var(--warning-color);
}

.nav-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-link.disabled:hover {
    padding-left: var(--sp-4);
}

.nav-section-content .nav-link + .nav-link {
    margin-top: var(--sp-half);
}

.nav-section-content .nav-link:focus-visible {
	outline-offset: -2px;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: var(--sp-1) var(--sp-3);
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    border-radius: var(--radius-xs);
}

.nav-section-header,
.nav-link:hover {
    transform: none;
    box-shadow: none;
}

/* ── Sliderobes Studio launcher ── */
.sidebar-foot {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	height: var(--topbar-pill-h);
	padding: 0 var(--sp-2);
	border-top: 1px solid var(--border-color);
}

.sidebar-studio {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	gap: var(--sp-3);
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-size: var(--fs-md);
	font-weight: 600;
	text-decoration: none;
	transition: var(--transition);
}

.sidebar-studio:hover {
	background-color: var(--bg-hover);
}

.sidebar-studio:focus-visible {
	outline: none;
	box-shadow: var(--btn-focus);
}

.sidebar-studio-logo {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	width: auto;
	height: 24px;
}

.sidebar-studio-go {
	margin-left: auto;
	color: var(--text-muted);
	transition: var(--transition);
}

.sidebar-studio:hover .sidebar-studio-go {
	color: var(--primary-color);
	transform: translate(var(--sp-half), calc(var(--sp-half) * -1));
}

/* ── Top Navbar ── */
.top-navbar {
	position: fixed;
	top: var(--topbar-gap);
	left: calc(var(--sidebar-rail) + var(--topbar-inset));
	right: var(--topbar-inset);
	max-width: var(--content-max);
	margin: 0 auto;
	height: var(--topbar-pill-h);
	background-color: var(--bg-nav);
	border: 1px solid var(--border-color);
	border-radius: 28px;
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--sp-4);
	z-index: calc(var(--z-chrome) - 1);
	transition: var(--transition);
}

.top-navbar.expanded {
	left: var(--topbar-inset);
}

/* Left group cap */
.top-navbar-left {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	max-width: calc(50% - 230px);
}

/* Scope slider width */
body.has-local-search .top-navbar-left {
	max-width: calc(50% - 300px);
}

.page-content {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: var(--content-max);
    padding-top: 0;
    gap: var(--sp-6);
}

.page-content.card {
    border-radius: var(--radius-md);
}

.page-title {
	font-size: var(--fs-xl);
	font-weight: 500;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Breadcrumb page nav */
.page-breadcrumb {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	min-width: 0;
}

.page-breadcrumb a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: var(--transition);
}

.page-breadcrumb a:hover {
	color: var(--primary-color);
}

.page-breadcrumb .breadcrumb-sep {
	color: var(--text-muted);
	font-weight: 400;
}

.page-breadcrumb .breadcrumb-current {
	color: var(--text-primary);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-navbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.top-navbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
	gap: var(--sp-2);
    pointer-events: none;
}

.top-navbar-center .top-search,
.top-navbar-center .search-scope {
    pointer-events: auto;
}

.top-search {
	width: 360px;
}

.top-search form {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
	height: 36px;
	padding: 0 var(--sp-4);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-round);
}

.top-search input[type="search"] {
	padding: 0;
}

/* Live search dropdown */
.search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, var(--radius-sm));
	box-shadow: var(--shadow-lg);
    z-index: var(--z-menu);
    padding: var(--sp-1) 0;
}

.search-dropdown[hidden] {
    display: none;
}

.search-dropdown-group-label {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.search-dropdown-group-label i {
    position: static;
    left: auto;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    pointer-events: auto;
}

.search-dropdown-item {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
}

.search-dropdown-item:hover,
.search-dropdown-item.is-active {
	background-color: var(--bg-secondary);
}

.search-dropdown-item-title {
    font-size: var(--fs-md);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown-item-subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown-empty,
.search-dropdown-footer {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
}

.search-dropdown-empty kbd {
    padding: 1px var(--sp-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: inherit;
}

/* Results held over while the next fetch lands */
.search-dropdown.is-stale {
    opacity: 0.55;
}

.search-dropdown-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.search-dropdown-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: var(--radius-round);
    animation: search-dropdown-spin 0.6s linear infinite;
}

@keyframes search-dropdown-spin {
    to {
    	transform: rotate(360deg);
    }
}

.search-dropdown-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.search-dropdown-footer a:hover {
    text-decoration: underline;
}

/* Location Selector */
/* Location picker */
.top-location-menu {
	flex-shrink: 0;
}

/* .kebab-trigger-labeled must stay after this */

.top-location-menu.open .top-location-caret {
	transform: rotate(180deg);
}

.top-location-dropdown {
	min-width: 220px;
	border-radius: var(--radius-lg);
}

/* Footer row holding the Apply button */
.top-location-actions {
	display: flex;
	justify-content: flex-end;
	padding: var(--sp-1) var(--sp-1) 0;
}

/* Theme Toggle — labelled sliding switch (Light / Dark) */
/* Theme toggle indicator */
.theme-switch {
	position: relative;
	display: inline-block;
	height: 26px;
	padding: 0;
	flex-shrink: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-round);
	background: var(--bg-primary);
	pointer-events: none;
	transition: var(--transition);
}

.theme-switch-track {
	position: relative;
	display: block;
	width: 68px;
	height: 100%;
}

/* Active theme label */
.theme-switch-label {
	position: absolute;
	top: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	color: var(--text-secondary);
	pointer-events: none;
	transition: var(--transition);
}

/* Dark active (default): thumb on the left, "Dark" fills the space to its right. */
.theme-switch-label-dark {
	left: 24px;
	right: 6px;
}

/* Light active: thumb on the right, "Light" fills the space to its left. */
.theme-switch-label-light {
	left: 6px;
	right: 24px;
	opacity: 0;
}

.theme-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-round);
	background: var(--primary-color);
	box-shadow: var(--shadow-sm);
	/* Springy overshoot so the slide feels physical rather than linear. */
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
	z-index: 1;
}

.theme-switch-thumb i {
	display: block;
	font-size: var(--fs-sm);
	line-height: 1;
	color: var(--text-on-color);
	/* Fade/rotate the icon as it swaps so the change reads as one motion. */
	transition: var(--transition);
}

/* Default (dark): only the moon icon shows inside the thumb. */
.theme-switch-thumb .theme-icon-light {
	display: none;
}

/* Light mode: thumb slides right, icon + label swap to the light variants. */
body.light-mode .theme-switch-thumb {
	transform: translateX(42px);
}

body.light-mode .theme-switch-thumb .theme-icon-dark {
	display: none;
}

body.light-mode .theme-switch-thumb .theme-icon-light {
	display: inline-flex;
}

body.light-mode .theme-switch-label-dark {
	opacity: 0;
}

/* Theme cross-fade */
body.theme-animating *,
body.theme-animating *::before,
body.theme-animating *::after {
	transition: background-color 2.4s ease, border-color 2.4s ease, color 2.4s ease, fill 2.4s ease, box-shadow 2.4s ease !important;
}

/* Toggle thumb transition */
body.theme-animating .theme-switch-thumb {
	transition: transform 2.4s ease, background-color 2.4s ease !important;
}

body.light-mode .theme-switch-label-light {
	opacity: 1;
}

/* Orders-to-check bell */
.validation-bell-wrapper {
	position: relative;
	display: block;
}

.validation-bell-btn {
	position: relative;
}

.validation-bell-btn > i,
.validation-bell-btn:hover > i {
	color: var(--warning-color);
}

.validation-bell-badge {
	margin-left: auto;
	background: var(--danger-color);
	color: var(--text-on-color);
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--radius-round);
	min-width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--sp-2);
	line-height: 1;
}

/* Bell panel flies left */
.validation-bell-dropdown {
	position: absolute;
	top: calc(var(--sp-2) * -1);
	right: calc(100% + var(--sp-5));
	width: 420px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	z-index: var(--z-menu);
	overflow: hidden;
}

.validation-bell-header {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.validation-bell-loading,
.validation-bell-empty {
    padding: var(--sp-3);
    font-size: var(--fs-md);
    color: var(--text-secondary);
    text-align: center;
}

/* Bell dropdown table */
.vbell-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.vbell-table thead tr th {
    padding: var(--sp-1) var(--sp-1);
    text-align: center;
    border-bottom: 2px solid var(--border-color);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.vbell-table thead tr th.vbell-th-order {
    text-align: left;
    padding-left: var(--sp-3);
}

.vbell-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s;
}

.vbell-table tbody tr:last-child {
    border-bottom: none;
}

.vbell-table tbody tr:hover {
	background: var(--bg-hover);
}

.vbell-td-order {
    padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-3);
    text-align: left;
    max-width: 190px;
}

.vbell-order-top {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.vbell-sale {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
}

.vbell-type {
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: var(--sp-half) var(--sp-1);
    border-radius: var(--radius-sm);
	background: rgba(var(--warning-rgb), 0.15);
	color: var(--warning-color);
	border: 1px solid rgba(var(--warning-rgb), 0.35);
}

.vbell-customer {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.vbell-meta {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    opacity: 0.7;
    margin-top: var(--sp-half);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.vbell-td-done,
.vbell-td-todo,
.vbell-td-na,
.vbell-td-saving {
    padding: var(--sp-2) var(--sp-1);
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 700;
    min-width: 28px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

.vbell-td-done {
	color: var(--success-color);
}

.vbell-td-done:hover {
	background: rgba(var(--success-rgb), 0.10);
}

.vbell-td-todo {
	color: var(--warning-color);
}

.vbell-td-todo:hover {
	background: rgba(var(--warning-rgb), 0.10);
}

.vbell-td-na {
    color: var(--text-secondary);
    opacity: 0.45;
    cursor: default;
}

.vbell-td-saving {
    color: var(--text-secondary);
    cursor: wait;
}

.validation-bell-dismiss {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--fs-sm);
    padding: var(--sp-1) var(--sp-1);
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: var(--transition);
}

.validation-bell-dismiss:hover {
	color: var(--danger-color);
	background: rgba(var(--danger-rgb), 0.1);
}

.validation-bell-footer {
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--border-color);
    text-align: right;
}

.validation-bell-view-all {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.validation-bell-view-all:hover {
    text-decoration: underline;
}

.profile-menu-wrapper {
    position: relative;
}

/* Top-bar controls */
.profile-menu-btn {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-round);
	border: 1px solid transparent;
	background: none;
	color: var(--primary-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-2xl);
	transition: var(--transition);
	padding: 0;
}

.profile-menu-btn:hover {
	color: var(--primary-hover);
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
	width: 248px;
	padding: var(--sp-2);
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	z-index: var(--z-menu);
	/* The bell's panel flies out of this one, so it must not be clipped. */
	overflow: visible;
}

.profile-dropdown.open {
    display: block;
}

.profile-dropdown-header {
	padding: var(--sp-2) var(--sp-2) var(--sp-3);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.profile-dropdown-avatar {
    font-size: var(--fs-4xl);
    color: var(--primary-color);
    flex-shrink: 0;
    line-height: 1;
}

.profile-dropdown-name {
    font-weight: 600;
}

.profile-dropdown-role {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: var(--sp-half);
}

/* Profile menu rows */
.profile-dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
	padding: var(--sp-2) var(--sp-3);
	border: none;
	border-radius: var(--radius-sm);
	background: none;
	font: inherit;
	text-align: left;
	color: var(--text-primary);
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition);
}

.profile-dropdown-item > i {
	font-size: var(--fs-lg);
	color: var(--text-secondary);
	line-height: 1;
	flex-shrink: 0;
	transition: var(--transition);
}

.profile-dropdown-item:hover > i {
	color: var(--primary-color);
}

/* The theme row carries the switch as an indicator, pushed to the far end. */
.profile-dropdown-theme .theme-switch {
	margin-left: auto;
}

.profile-dropdown-theme:hover .theme-switch {
	border-color: var(--primary-color);
}

.profile-dropdown-item:hover {
    background: var(--bg-hover);
}

.profile-dropdown-logout,
.profile-dropdown-logout > i,
.profile-dropdown-logout:hover > i {
	color: var(--danger-color);
}

.profile-dropdown-logout:hover {
    background: var(--danger-subtle);
}

.top-login {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-pill);
    background: var(--primary-color);
	color: var(--text-on-color);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: 500;
    transition: var(--transition);
}

.top-login:hover {
    opacity: 0.9;
}

/* ── Main Content Area ── */
.main-content {
    margin-left: var(--sidebar-rail);
    margin-top: var(--topbar-height);
    min-height: calc(100vh - var(--topbar-height));
    transition: var(--transition);
    padding: var(--sp-6);
}

.main-content.expanded {
    margin-left: 0;
}

.content-wrapper {
	max-width: var(--content-max);
	margin: 0 auto;
}

/* ── Chromeless pages ── */
html:has(body.chromeless) {
	scrollbar-gutter: auto;
}

body.chromeless {
	overflow: hidden;
}

body.chromeless .top-navbar {
	display: none;
}

body.chromeless .main-content {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body.chromeless:has(.impersonation-banner) .main-content {
	padding-top: 34px;
}

body.chromeless .content-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	max-width: none;
	margin: 0;
}

/* ── Cards ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border-color);
    background-color: transparent;
    font-weight: 600;
    font-size: var(--fs-lg);
}

.card-body {
    padding: var(--sp-4);
    padding-top: var(--sp-3);
}

.entity-hero-name a {
    color: var(--text-primary);
    text-decoration: none;
}

/* ── Kebab menu ── */
.kebab-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.kebab-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--fs-lg);
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.kebab-trigger:hover,
.kebab-menu.open .kebab-trigger {
	color: var(--primary-color);
}

/* Labelled trigger — keep after .kebab-trigger */
.kebab-trigger-labeled {
	width: auto;
	max-width: 200px;
	height: 36px;
	gap: var(--sp-1);
	padding: 0 var(--sp-3);
	border-radius: var(--radius-round);
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--text-primary);
	border-color: var(--border-color);
	background: var(--bg-primary);
}

/* Labelled trigger in the top bar */
.top-navbar .kebab-trigger-labeled {
	background: none;
	border-color: transparent;
}

.top-navbar .kebab-trigger-labeled:hover,
.top-navbar .kebab-menu.open .kebab-trigger-labeled {
	background: none;
	border-color: transparent;
	color: var(--primary-color);
}

.kebab-trigger-labeled .bi-geo-alt {
	color: var(--primary-color);
}

.kebab-trigger-labeled .top-location-current {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kebab-trigger-labeled .top-location-caret {
	font-size: var(--fs-sm);
	opacity: 0.7;
	transition: var(--transition);
}

.kebab-dropdown {
    display: none;
    position: fixed;
    z-index: var(--z-menu);
    min-width: 210px;
    padding: var(--sp-1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    /* overflow visible so nested popovers (e.g. edging diagram) can escape */
    overflow: visible;
}

.kebab-menu.open .kebab-dropdown,
.kebab-dropdown.open {
    display: flex;
}

.kebab-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-primary);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    transition: background 0.12s;
}

.kebab-item[hidden] {
	display: none;
}

.kebab-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Unavailable action */
.kebab-item:disabled {
    opacity: 0.4;
    cursor: default;
}

.kebab-item:disabled:hover {
    background: none;
    color: var(--text-secondary);
}

.kebab-item i {
    font-size: var(--fs-lg);
    color: var(--success-color);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Muted (e.g. "add missing data") variant */
.kebab-item.muted i {
    color: var(--text-muted);
}

/* Danger variant */
.kebab-item.danger,
.kebab-item-danger {
    color: var(--danger-color);
}

.kebab-item.danger i,
.kebab-item-danger i {
    color: var(--danger-color);
}

.kebab-item.danger:hover,
.kebab-item-danger:hover {
    background: var(--danger-subtle);
    color: var(--danger-color);
}

.kebab-item.disabled,
.kebab-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Divider + section label inside the dropdown */
.kebab-divider,
.kebab-separator {
    height: 4px;
    margin: var(--sp-1) 0;
}

.kebab-dropdown hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--sp-1) 0;
}

.kebab-label {
    display: block;
    padding: var(--sp-1) var(--sp-2) var(--sp-half);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-muted);
}

.kebab-item.active {
    color: var(--success-color);
}

.kebab-check-icon {
    margin-left: auto;
    font-size: var(--fs-lg);
    color: var(--success-color);
    opacity: 0;
    transition: opacity 0.1s;
}

.kebab-item.active .kebab-check-icon {
    opacity: 1;
}

/* Toggle item variant: label row with a checkbox/control on the right */
.kebab-item-toggle {
    justify-content: space-between;
    gap: var(--sp-3);
    cursor: pointer;
}

.kebab-item-toggle > span {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.kebab-item-toggle i {
    color: inherit;
}

.kebab-item-toggle input[type="checkbox"] {
    flex-shrink: 0;
    cursor: pointer;
    --checkbox-color: var(--success-color);
}

/* Mobile location row */
.mobile-loc-toggle {
    justify-content: space-between;
    width: 100%;
}

.mobile-loc-caret {
    transition: var(--transition);
}

.mobile-loc-toggle.open .mobile-loc-caret {
    transform: rotate(180deg);
}

/* ── Buttons ── */
/* Atlas Button Pack v1.0 — pill system → [[CSS Design System]] */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	min-height: var(--btn-h);
	padding: 0 var(--sp-4);
	border: 1px solid transparent;
	border-radius: var(--radius-round);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--transition);
	box-sizing: border-box;
}

.btn i {
	font-size: var(--fs-md);
	line-height: 1;
}

.btn i::before,
.link i::before {
	vertical-align: 0;
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--btn-focus);
}

.btn:disabled,
.btn[disabled],
.btn:disabled:hover,
.btn[disabled]:hover {
	background-color: var(--bg-tertiary);
	background-image: none;
	color: var(--text-muted);
	border-color: transparent;
	cursor: not-allowed;
	box-shadow: none;
}

/* ── Button sizes ── */
.btn--lg {
	min-height: var(--btn-h-lg);
	padding: 0 var(--sp-5);
	font-size: var(--fs-md);
	gap: var(--sp-2);
}

.btn--lg i {
	font-size: var(--fs-lg);
}

/* Inline/in-table button — sits inside a row without setting its height. */
.btn--row {
	min-height: var(--btn-h-row);
	padding: 0 var(--sp-3);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	gap: var(--sp-1);
	box-shadow: none;
}

.btn--row i {
	font-size: var(--fs-md);
}

/* Full-width — auth forms, mobile action bars */
.btn--block {
	width: 100%;
}

/* Icon-only button: circular, no text padding (pair with an intent, e.g. .btn--tertiary) */
.btn--icon {
	width: var(--btn-h);
	padding: 0;
	flex-shrink: 0;
}

.btn--icon.btn--row {
	width: var(--btn-h-row);
}

/* ── Intents ── */
/* Primary — the one action the screen exists for. Never two in a view. */
.btn--primary,
.btn-primary,
.btn-save {
	background-color: var(--primary-color);
	color: var(--text-on-color);
}

.btn--primary:hover,
.btn-primary:hover,
.btn-save:hover {
	background-color: var(--primary-hover);
}

.btn--primary:active,
.btn-primary:active,
.btn-save:active {
	background-color: var(--primary-active);
}

/* Secondary — accent tint. Supporting actions that still belong to the flow. */
.btn--secondary {
	background-color: rgba(var(--primary-rgb), var(--btn-tint));
	color: var(--link-color);
}

.btn--secondary:hover {
	background-color: rgba(var(--primary-rgb), var(--btn-tint-hover));
}

/* Tertiary — neutral outline. Cancel, Back, anything on a coloured surface. */
.btn--tertiary,
.btn-secondary,
.btn-cancel {
	background-color: var(--btn-tertiary-bg);
	color: var(--text-secondary);
	border-color: var(--border-color);
}

.btn--tertiary:hover,
.btn-secondary:hover,
.btn-cancel:hover {
	background-color: var(--bg-hover);
	color: var(--text-primary);
	border-color: var(--text-muted);
}

/* Outline — accent outline. The add action under a list of rows. */
.btn--outline {
	background-color: transparent;
	color: var(--link-color);
	border-color: var(--primary-color);
}

.btn--outline:hover {
	background-color: rgba(var(--primary-rgb), var(--btn-tint));
}

/* Ghost — low-stakes or repeated actions. No border, no fill until hover. */
.btn--ghost {
	background-color: transparent;
	color: var(--link-color);
	border-color: transparent;
	padding: 0 var(--sp-4);
}

.btn--ghost:hover {
	background-color: rgba(var(--primary-rgb), var(--btn-tint));
	text-decoration: none;
}

.btn-ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--text-secondary);
	padding: 0 var(--sp-4);
}

.btn-ghost:hover {
	color: var(--text-primary);
	background-color: var(--bg-hover);
}

.btn[hidden] {
	display: none;
}

.btn--icon:is(.btn--ghost, .btn-ghost) {
	padding: 0;
}

/* ── Semantic — tint by default, solid only when irreversible ── */
.btn--danger {
	background-color: rgba(var(--danger-rgb), var(--btn-tint));
	color: var(--danger-color);
}

.btn--danger:hover {
	background-color: rgba(var(--danger-rgb), var(--btn-tint-hover));
	color: var(--danger-color);
}

.btn--danger-solid {
	background-color: var(--danger-color);
	color: var(--text-on-color);
}

.btn--danger-solid:hover {
	background-color: var(--danger-hover);
	color: var(--text-on-color);
}

.btn--warning {
	background-color: rgba(var(--warning-rgb), var(--btn-tint));
	color: var(--warning-color);
}

.btn--warning:hover {
	background-color: rgba(var(--warning-rgb), var(--btn-tint-hover));
	color: var(--warning-color);
}

.btn--success,
.btn-success {
	background-color: rgba(var(--success-rgb), var(--btn-tint));
	color: var(--success-color);
}

.btn--success:hover,
.btn-success:hover {
	background-color: rgba(var(--success-rgb), var(--btn-tint-hover));
	color: var(--success-color);
}

.btn--info {
	background-color: rgba(var(--info-rgb), var(--btn-tint));
	color: var(--info-color);
}

.btn--info:hover {
	background-color: rgba(var(--info-rgb), var(--btn-tint-hover));
	color: var(--info-color);
}

.btn--purple {
	background-color: rgba(var(--purple-rgb), var(--btn-tint));
	color: var(--purple-color);
}

.btn--purple:hover {
	background-color: rgba(var(--purple-rgb), var(--btn-tint-hover));
	color: var(--purple-color);
}

/* ── Button group ── */
.btn-group {
	display: inline-flex;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-round);
	background-color: var(--btn-tertiary-bg);
	overflow: hidden;
}

.btn-group .btn {
	border-radius: 0;
	border-color: transparent;
	border-right: 1px solid var(--border-color);
	background-color: transparent;
	color: var(--text-secondary);
	box-shadow: none;
}

.btn-group .btn:last-child {
	border-right: 0;
}

.btn-group .btn:hover {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

.btn-group .btn.active,
.btn-group .btn[aria-pressed="true"],
.btn-group .btn[aria-selected="true"],
.btn[aria-pressed="true"] {
	background-color: rgba(var(--primary-rgb), var(--btn-tint));
	color: var(--link-color);
	font-weight: 700;
}

/* ── Loading ── */
.btn.is-loading,
.btn.is-busy {
	pointer-events: none;
	opacity: 0.75;
}

.btn.is-loading i,
.btn.is-busy i {
	animation: btn-spin 1s linear infinite;
}

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

/* ── Table rows ── */
td .btn,
th .btn,
.table-row .btn {
	min-height: var(--btn-h-row);
	padding: 0 var(--sp-3);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	box-shadow: none;
}

td .btn--icon,
th .btn--icon,
.table-row .btn--icon {
	width: var(--btn-h-row);
	padding: 0;
}

/* ── Utility Classes ── */
.hidden,
.d-none {
    display: none !important;
}

/* ── Forms ── */
.form-label,
label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-secondary);
}

/* Keep in step with the iOS-zoom block at the foot of the file — same controls. */
.form-control,
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="file"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
textarea,
select {
    width: 100%;
    padding: var(--sp-1) var(--sp-2);
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
	font-family: inherit;
    font-size: var(--fs-md);
    line-height: inherit;
    transition: var(--transition);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* ── Hide native number spinners ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    appearance: none;
    -moz-appearance: textfield;
}

/* ── Checkboxes (site-wide custom style) ── */
/* Override per instance by setting --checkbox-color (e.g. success green). */
input[type="checkbox"] {
    --checkbox-color: var(--primary-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--bg-input);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s;
}

input[type="checkbox"]:hover {
    border-color: var(--checkbox-color);
}

input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
    background: var(--checkbox-color);
    border-color: var(--checkbox-color);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    border: solid var(--text-on-color);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
}

input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--text-on-color);
    transform: translate(-50%, -50%);
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--checkbox-color);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Switch (site-wide on/off toggle) ── */
/* <label class="switch"><span class="switch-label">…</span><input type="checkbox"><span class="switch-track"></span></label> */
.switch {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	cursor: pointer;
	user-select: none;
}

/* Hidden: the label reads its state with :has(), so the input needs no box */
.switch input[type="checkbox"] {
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	border: none;
	opacity: 0;
	pointer-events: none;
}

.switch-label {
	font-weight: 600;
}

.switch-track {
	position: relative;
	flex-shrink: 0;
	width: 34px;
	height: 18px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-round);
	background: var(--bg-tertiary);
	transition: var(--transition);
}

.switch-track::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: var(--radius-round);
	background: var(--text-muted);
	transition: var(--transition);
}

.switch:has(input:checked) .switch-track {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.switch:has(input:checked) .switch-track::after {
	transform: translateX(16px);
	background: var(--text-on-color);
}

.switch:has(input:focus-visible) .switch-track {
	box-shadow: var(--btn-focus);
}

.switch:has(input:disabled) {
	color: var(--text-muted);
	cursor: not-allowed;
}

.switch:has(input:disabled) .switch-track {
	opacity: 0.5;
}

/* ── Site-wide ± qty stepper ── */
.qty-stepper-input {
    display: inline-flex;
    align-items: stretch;
    width: 102px;
    min-width: 92px;
    height: 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    vertical-align: middle;
    transition: border-color 0.2s ease;
}

/* Focus on the whole pill */
.qty-stepper-input:focus-within {
	border-color: var(--primary-color);
}

/* Center stepper pills when placed directly inside a table cell */
td > .qty-stepper-input {
    display: flex;
    margin: 0 auto;
}

.qty-step-btn {
    width: 26px;
    border: none;
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    font-size: var(--fs-md);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.qty-stepper-input .qty-step-btn:hover {
    background: var(--bg-hover);
    color: var(--primary-hover);
}

/* Any input inside the pill renders borderless so − input + reads as one control. */
.qty-stepper-input input,
.qty-step-value {
    flex: 1 1 auto;
    min-width: 30px;
    width: auto;
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    padding: 0 var(--sp-half);
    outline: none;
    box-shadow: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* No inner focus ring */
.qty-stepper-input input:focus,
.qty-stepper-input .qty-step-value:focus {
	border: none;
	box-shadow: none;
	outline: none;
}

.qty-stepper-input input::-webkit-inner-spin-button,
.qty-stepper-input input::-webkit-outer-spin-button,
.qty-step-value::-webkit-inner-spin-button,
.qty-step-value::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* ── Tables ── */

/* Scroll container — pair with .table when the table can overflow. */
.table-wrap {
	overflow-x: auto;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background-color: var(--bg-secondary);
}

/* Table inside a bordered panel */
.table-wrap-flush {
	border: none;
	border-radius: 0;
	background-color: transparent;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-secondary);
    overflow: hidden;
}

.table thead th {
    background-color: var(--bg-tertiary);
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    font-weight: 600;
	/* Header type */
	font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
	white-space: nowrap;
}

.table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}

/* Zebra striping — aids row scanning on data tables (hover rule below wins) */
.table tbody tr:nth-child(even) {
    background-color: var(--bg-zebra);
}

/* Manual zebra opt-out */
.table-zebra-manual > tbody > tr:nth-child(even) {
	background-color: transparent;
}

.table-zebra-manual > tbody > tr.zebra-row {
	background-color: var(--bg-zebra);
}

.table tbody tr:hover {
    background-color: var(--bg-hover);
}

.table tbody td {
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
	vertical-align: middle;
}

.table tbody tr:last-child {
	border-bottom: none;
}

/* ── Table modifiers ── */

/* Compact rows */
.table.table-sm thead th,
.table.table-sm tbody td {
	padding: var(--sp-1) var(--sp-2);
	font-size: var(--fs-sm);
}

/* Header stays put while the body scrolls (needs a height-bounded wrapper). */
.table-sticky thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}

/* Column widths honoured exactly; pair with explicit th widths. */
.table-fixed {
	table-layout: fixed;
}

/* ── Mobile: wide data tables scroll instead of breaking the layout ── */

/* ── Badges ── */
.badge {
	/* display: inline-flex;
	align-items: center;
	gap: var(--sp-1); */
	padding: var(--sp-1) var(--sp-3);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	display: inline-block;
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.badge::first-letter {
	text-transform: uppercase;
}

.badge[hidden] {
	display: none;
}

.badge-primary {
    background-color: var(--primary-subtle);
    color: var(--primary-color);
}

.badge-success {
    background-color: var(--success-subtle);
    color: var(--success-color);
}

.badge-warning {
    background-color: var(--warning-subtle);
    color: var(--warning-color);
}

.badge-danger {
    background-color: var(--danger-subtle);
    color: var(--danger-color);
}

.badge-info {
	background-color: var(--info-subtle);
	color: var(--info-color);
}

.badge-purple {
	background-color: var(--purple-subtle);
	color: var(--purple-color);
}

.badge-neutral {
	background-color: var(--bg-tertiary);
	color: var(--text-secondary);
}

/* Badge sizes */
.badge-sm {
	padding: var(--sp-half) var(--sp-2);
}

.badge-md {
	font-size: var(--fs-sm);
}

/* Data pill — carries a value rather than a status, so it stays sentence case */
.badge-plain {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	border-color: var(--border-color);
}

/* ── Alerts ── */
.alert {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
}

.alert-info {
    background-color: var(--info-subtle);
    color: var(--text-primary);
}

.alert-warning {
    background-color: var(--warning-subtle);
    color: var(--text-primary);
}

.alert-danger {
    background-color: var(--danger-subtle);
}

.alert-success {
    background-color: var(--success-subtle);
}

/* ── Modal ── */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    align-items: flex-start;
    justify-content: center;
    padding: var(--modal-offset) var(--sp-4);
    overflow-y: auto;
}

.modal.show {
    display: flex !important;
}

.modal.active {
    display: flex !important;
}

/* Lock background scrolling while a modal is open */
body:has(.modal.show),
body:has(.modal.active),
body:has(.modal-overlay.active) {
    overflow: hidden;
}

/* When overlay is inside .modal, it's just a backdrop behind the dialog */
.modal > .modal-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: -1;
}

/* Standalone overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: calc(var(--z-modal) + 2);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--modal-offset) var(--sp-4);
    overflow-y: auto;
}

.modal-overlay.active {
    display: flex;
}

/* ── Native <dialog> ── */
dialog {
	margin: var(--modal-offset) auto auto;
	max-height: var(--modal-max-h);
	overflow-y: auto;
}

dialog::backdrop {
    background: var(--overlay-bg);
}

.modal-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 760px;
    max-width: 90vw;
    max-height: var(--modal-max-h);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.modal-dialog .modal-content {
    border: none;
    box-shadow: none;
    margin: 0;
    max-width: none;
    border-radius: 0;
	min-height: 0;
}

/* Modal content used directly inside a flex modal: no auto vertical margins */
.modal > .modal-content {
    margin-top: 0;
    margin-bottom: 0;
}

.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    max-height: var(--modal-max-h);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* .modal-box + .modal-header h2 consolidated here from per-page CSS */
.modal-box {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	width: 520px;
	max-width: 95vw;
	max-height: var(--modal-max-h);
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
}

dialog.modal-box {
	padding: 0;
	color: var(--text-primary);
}

dialog.modal-box[open] {
	display: flex;
	flex-direction: column;
}

dialog.modal-box[open] > :is(.modal-header, .modal-footer) {
	flex-shrink: 0;
}

dialog.modal-box[open] > .modal-body {
	min-height: 0;
}

/* ── Modal sizes ── */
.modal--sm {
	width: 100%;
	max-width: min(480px, 95vw);
}

.modal--md {
	width: 100%;
	max-width: min(720px, 95vw);
}

.modal--lg {
	width: 100%;
	max-width: min(1000px, 95vw);
}

.modal--xl {
	width: 100%;
	max-width: min(1440px, 95vw);
}

/* ── Confirm dialog ── */
.confirm-dialog::backdrop {
	background: var(--overlay-bg);
}

.confirm-dialog-form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
}

.confirm-dialog-title {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 700;
}

.confirm-dialog-body {
	margin: 0;
	color: var(--text-secondary);
	line-height: 1.5;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.confirm-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--sp-2);
	margin-top: var(--sp-1);
}

.modal-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: var(--fs-2xl);
}

.modal-header h2 {
	margin: 0;
	font-size: var(--fs-xl);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.modal-close {
    background: none;
    border: none;
    font-size: var(--fs-4xl);
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
	transition: var(--transition);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-5);
	overflow-y: auto;
	flex: 1 1 auto;
}

/* Edge-to-edge body — for a modal holding its own table or scroller */
.modal-body--flush {
	gap: 0;
	padding: 0;
}

.modal-footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* ── Utility Classes ── */

/* Alignment utilities */
.text-center {
	text-align: center !important;
}

.text-right {
	text-align: right !important;
}

.text-left {
	text-align: left !important;
}

/* ── Global helper utilities ── */
.text-accent {
	color: var(--primary-color) !important;
}

.text-success {
	color: var(--success-color) !important;
}

.text-danger {
	color: var(--danger-color) !important;
}

.text-warning {
	color: var(--warning-color) !important;
}

.text-info {
	color: var(--info-color) !important;
}

.text-secondary {
	color: var(--text-secondary);
}

/* .text-muted already defined above */

.flex-1 {
	flex: 1;
}

.w-full {
	width: 100%;
}

.nowrap {
	white-space: nowrap;
}

.truncate {
	display: inline-block;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.table-link,
.table-link:visited {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 600;
}

.cursor-pointer {
	cursor: pointer;
}

.overflow-x-auto {
	overflow-x: auto;
}

/* ── Sidebar Toggle Button (top bar) ── */
.mobile-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: var(--fs-3xl);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    margin-right: var(--sp-2);
    flex-shrink: 0;
}

.mobile-hamburger:hover {
	background: none;
	color: var(--primary-color);
}

.mobile-menu-close-icon {
    display: none;
}

/* ── Mobile-only top-bar controls ── */
/* Mobile top-bar items */
.mobile-topbar-only {
	display: none;
}

.mobile-topbar-btn {
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: none;
	color: var(--text-primary);
	font-size: var(--fs-2xl);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: var(--transition);
	flex-shrink: 0;
}

.mobile-topbar-btn:hover {
	background: none;
	color: var(--primary-color);
}

/* Count pill for a kebab item (e.g. "Orders to check") */
.kebab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: auto;
	padding: 0 var(--sp-1);
	border-radius: var(--radius-pill);
	background: var(--warning-color);
	color: var(--text-on-warning);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1;
}

/* ── Mobile Overlay ── */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    z-index: calc(var(--z-chrome) - 1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* ── Responsive Design ── */

/* ── Scrollbar styling ── */
::-webkit-scrollbar {
	width: var(--scrollbar-size);
	height: var(--scrollbar-size);
}

/* Transparent track */
::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

/* Where a vertical and horizontal bar meet — otherwise a native grey square. */
::-webkit-scrollbar-corner {
	background: transparent;
}

/* Firefox only */
@supports (-moz-appearance: none) {
	/* scrollbar-width doesn't inherit */
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb) transparent;
	}
}

/* ── Page Header ── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.page-header h1 {
    font-size: var(--fs-4xl);
    font-weight: 600;
    margin: 0;
}

.page-header-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

/* ── Toolbar ── */
.toolbar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	flex-wrap: wrap;
}

.toolbar-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-left: auto;
	flex-shrink: 0;
	flex-wrap: wrap;
}

/* Toolbar: title and one control */
.toolbar-spread {
	justify-content: space-between;
}

/* Toolbar sitting flush inside a card/panel header rather than above it. */
.toolbar-flush {
	margin-bottom: 0;
	padding: var(--sp-2) var(--sp-3);
	border-bottom: 1px solid var(--border-color);
}

/* ── Period navigator ── */
.period-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: var(--sp-2);
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	margin-bottom: var(--sp-4);
}

.period-nav-label {
	text-align: center;
	min-width: 0;
}

.period-nav-range {
	display: block;
	font-weight: 700;
	font-size: var(--fs-lg);
}

/* Sub-line under the range */
.period-nav-meta {
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

.period-nav-reset {
	color: var(--primary-color);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.period-nav-reset:hover {
	text-decoration: underline;
}

/* Inline variant — no panel, for a nav that already sits inside a toolbar. */
.period-nav-inline {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	margin-bottom: 0;
	gap: var(--sp-2);
}

.form-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr auto;
    gap: var(--sp-4);
    align-items: end;
}

.tab-nav {
    display: flex;
    gap: var(--sp-2);
    border-bottom: 2px solid var(--border-color);
    background-color: transparent;
}

.tab-button {
    padding: var(--sp-2) var(--sp-5);
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--fs-md);
    transition: all 0.15s;
    margin-bottom: calc(var(--sp-half) * -1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    white-space: nowrap;
    text-decoration: none;
}

.tab-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.tab-button.active {
    color: var(--primary-color);
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    border-bottom-color: var(--bg-primary);
}

.tab-button .badge {
    font-size: var(--fs-sm);
    padding: var(--sp-half) var(--sp-2);
}

/* ── Pill tabs ── */
.tab-nav-pills {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	max-width: 100%;
	padding: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-round);
	background-color: var(--btn-tertiary-bg);
	background-image: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.tab-nav-pills::-webkit-scrollbar {
	display: none;
}

.tab-nav-pills .tab-button {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	min-height: var(--btn-h);
	margin: 0;
	padding: var(--sp-2) var(--sp-5);
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: var(--text-secondary);
	font-size: var(--fs-md);
	box-shadow: none;
	transition: var(--transition);
}

.tab-nav-pills .tab-button + .tab-button {
	border-left: 1px solid var(--border-color);
}

.tab-nav-pills .tab-button:hover {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

.tab-nav-pills .tab-button:focus-visible {
	outline: none;
	box-shadow: inset var(--btn-focus);
}

.tab-nav-pills .tab-button.active {
	background-color: rgba(var(--primary-rgb), var(--btn-tint));
	background-image: none;
	color: var(--link-color);
}

/* Sliding thumb */
.tab-pill-thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background-color: rgba(var(--primary-rgb), var(--btn-tint));
	transition: var(--transition);
	pointer-events: none;
}

.tab-nav-pills:has(.tab-pill-thumb) .tab-button.active {
	background-color: transparent;
}

/* ── Top-nav search scope slider (Global / This Page) ── */
.search-scope {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-shrink: 0;
}

.search-scope[hidden] {
	display: none;
}

.search-scope-label {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	white-space: nowrap;
}

.search-scope-toggle[data-pill-slider] {
	height: 36px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.search-scope-toggle[data-pill-slider] .tab-button {
	padding: 0 var(--sp-3);
	font-size: var(--fs-sm);
}

/* Rows the "This Page" filter has ruled out */
.atlas-search-hidden {
	display: none !important;
}

/* ── Cross-page tab transition ── */
.tab-swapping {
	opacity: 0.4;
	transition: var(--transition);
}

/* ── Vertical pill tab column ── */
.tab-nav-pills-vertical {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-radius: var(--radius-md);
	overflow-x: hidden;
	overflow-y: auto;
}

.tab-nav-pills-vertical .tab-button {
	width: 100%;
	min-height: 0;
	font-size: var(--fs-sm);
	justify-content: space-between;
	text-align: left;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
}

.tab-nav-pills-vertical .tab-button + .tab-button {
	border-left: 0;
	border-top: 1px solid var(--border-color);
}

.tab-nav-pills-vertical .tab-pill-thumb {
	top: 0;
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
}

.tab-content {
    padding: 0;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

/* ── Global Utilities ── */
.icon-warning {
	color: var(--warning-color);
}

.required-star {
    color: var(--danger-color);
}

/* ── Empty State ── */
.empty-state {
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	font-size: var(--fs-md);
	color: var(--text-muted);
}

.empty-state h3,
.empty-state h4,
.empty-state h5 {
	display: inline;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	color: var(--text-secondary);
}

.empty-state p {
	margin: var(--sp-1) 0 0;
	color: var(--text-muted);
}

.empty-state .btn {
	margin-top: var(--sp-3);
}

/* ── Spinner ── */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.spin {
	display: inline-block;
	animation: spin 1s linear infinite;
}

.spinner {
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: 2px solid var(--border-color);
	border-top-color: var(--primary-color);
	border-radius: var(--radius-round);
	animation: spin 0.6s linear infinite;
	vertical-align: middle;
}

.spinner-lg {
	width: 32px;
	height: 32px;
	border-width: 3px;
}

/* ── Meter ── */
.meter {
	width: 100%;
	height: 6px;
	background: var(--bg-tertiary);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.meter-lg {
	height: 10px;
}

.meter-fill {
	height: 100%;
	width: 0;
	background: var(--primary-color);
	border-radius: var(--radius-pill);
	transition: var(--transition);
}

.meter-fill.meter-good {
	background: var(--chart-good);
}

.meter-fill.meter-warn {
	background: var(--chart-warn);
}

.meter-fill.meter-bad {
	background: var(--chart-bad);
}

.meter-fill.meter-info {
	background: var(--chart-info);
}

.meter-fill.meter-purple {
	background: var(--chart-purple);
}

/* ── Figure band ── */
.fig-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--border-color);
	background: var(--bg-tertiary);
}

.fig-band-accent {
	background: var(--primary-subtle);
}

.fig-band-main {
	display: flex;
	flex-direction: column;
	gap: var(--sp-half);
	min-width: 0;
}

.fig-band-title {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-size: var(--fs-2xl);
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

.fig-band-sub {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--text-muted);
}

.fig-band-note {
	margin-top: var(--sp-half);
	color: var(--text-secondary);
}

.fig-band-figure {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	min-width: 260px;
	max-width: 380px;
	flex: 1 1 300px;
}

.fig-band-figure-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.fig-band-total {
	font-size: var(--fs-2xl);
	font-weight: 800;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

.fig-band-meta {
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	white-space: nowrap;
}

.fig-band-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fig-band-item {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-1);
}

.fig-band-item em {
	font-style: normal;
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

@media (max-width: 768px) {
	.fig-band {
		flex-direction: column;
		align-items: flex-start;
	}

	.fig-band-figure {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}
}

/* ── Figure strip ── */
.fig-strip {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.fig-strip-flat {
	border: 0;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	border-radius: 0;
	box-shadow: none;
	background: none;
}

.fig-strip-item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-half);
	flex: 1 1 150px;
	min-width: 0;
	padding: var(--sp-3) var(--sp-4);
	box-shadow: -1px 0 0 var(--border-color), 0 -1px 0 var(--border-color);
}

.fig-strip-value {
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--text-primary);
}

.fig-strip-label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-muted);
}

.fig-strip-note {
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}

.card > .fig-strip-flat:last-child {
	border-bottom: 0;
}

/* ── Info tip ── */
.info-tip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	color: var(--text-muted);
	font-size: var(--fs-md);
	font-weight: 400;
	cursor: help;
}

.info-tip:hover,
.info-tip:focus-within {
	color: var(--link-color);
}

.info-tip-pop {
	display: none;
	position: absolute;
	top: calc(100% + var(--sp-1));
	left: 0;
	z-index: var(--z-popup);
	width: 300px;
	max-width: calc(100vw - var(--sp-6));
	padding: var(--sp-3);
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	white-space: normal;
	color: var(--text-secondary);
	cursor: auto;
}

.info-tip-end .info-tip-pop {
	left: auto;
	right: 0;
}

.info-tip:hover .info-tip-pop,
.info-tip:focus-within .info-tip-pop {
	display: block;
}

.card:has(.info-tip:hover, .info-tip:focus-within) {
	overflow: visible;
}

.info-tip-pop p {
	margin: 0;
}

.info-tip-pop p + p {
	margin-top: var(--sp-2);
}

/* ── Inline empty ── */
.empty-inline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--text-muted);
	text-align: center;
}

.empty-inline[hidden] {
	display: none;
}

/* ── Link ── */
.link {
	color: var(--link-color);
	font-weight: 500;
	text-decoration: none;
}

.link:hover {
	text-decoration: underline;
}

/* ── Page stack ── */
.page-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.page-stack > * {
	margin-bottom: 0;
}

/* ── Log box ── */
.log-box {
	margin: 0;
	padding: var(--sp-3);
	max-height: var(--log-box-max-h, 340px);
	overflow: auto;
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ── Option tile ── */
.option-tiles {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.option-tile {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition);
}

.option-tile:hover {
	background-color: var(--bg-hover);
}

.option-tile:has(input:checked),
.option-tile.is-selected {
	border-color: var(--primary-color);
	background-color: var(--primary-subtle);
}

.option-tile-sub {
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

/* ── Hint bubble ── */
.hint-bubble {
	position: fixed;
	z-index: var(--z-menu);
	max-width: 22rem;
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--bg-tertiary);
	color: var(--text-primary);
	box-shadow: var(--shadow-md);
	font-size: var(--fs-sm);
	line-height: 1.45;
	pointer-events: none;
	opacity: 0;
	transition: var(--transition);
}

.hint-bubble.is-open {
	opacity: 1;
}

/* ── Overlay button ── */
.overlay-btn {
	background-color: var(--overlay-bg);
	border-color: transparent;
	color: var(--text-on-color);
	backdrop-filter: blur(4px);
}

.overlay-btn:hover {
	background-color: var(--overlay-bg);
	color: var(--text-on-color);
	border-color: var(--text-on-color);
}

/* ── Disclosure ── */
.disclosure-icon {
	display: inline-block;
	transition: var(--transition);
}

:is(.is-expanded, [aria-expanded="true"]) .disclosure-icon {
	transform: rotate(90deg);
}

/* ── Print sheet ── */
@media print {
	.print-sheet {
		--bg-page: #ffffff;
		--bg-primary: #ffffff;
		--bg-secondary: #ffffff;
		--bg-tertiary: #f1f3f7;
		--bg-zebra: #f5f7fa;
		--bg-hover: transparent;
		--bg-card: #ffffff;
		--border-color: #d5d9e0;
		--text-primary: #1a1d24;
		--text-secondary: #333740;
		--text-muted: #6b7280;
		--text-on-color: #ffffff;
		--primary-color: #1d4ed8;
		--info-color: #1d4ed8;
		--link-color: #1d4ed8;
		--success-color: #15803d;
		--warning-color: #b45309;
		--danger-color: #b91c1c;
		--purple-color: #6d28d9;
		--chart-good: #15803d;
		--chart-warn: #b45309;
		--chart-bad: #b91c1c;
		--chart-info: #1d4ed8;
		--chart-purple: #6d28d9;
		--shadow-sm: none;
		--shadow-md: none;
		--shadow-lg: none;
		color: var(--text-primary);
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ── Pagination ── */
.pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

/* ── Dropzone ── */
.dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-6);
	background: var(--bg-secondary);
	border: 2px dashed var(--border-color);
	border-radius: var(--radius-md);
	color: var(--text-secondary);
	text-align: center;
	cursor: pointer;
	transition: var(--transition);
}

.dropzone:hover,
.dropzone.is-dragover {
	border-color: var(--primary-color);
	background: var(--bg-tertiary);
}

.dropzone:focus-visible {
	outline: none;
	box-shadow: var(--btn-focus);
}

.dropzone-icon {
	font-size: var(--fs-4xl);
	color: var(--primary-color);
}

.dropzone-hint {
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

/* ── Typeahead anchor ── */
.search-dropdown-anchor {
	position: relative;
}

/* ── Responsive Grid ── */

/* ── Additional Styles ── */
.errorlist {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--danger-color);
}

.errorlist li {
    padding: var(--sp-1) 0;
    font-size: var(--fs-md);
}

.text-muted {
    color: var(--text-muted);
}

.checkbox-label {
    display: flex;
    align-items: center;
    margin: var(--sp-2) var(--sp-1) var(--sp-1) var(--sp-1);
}

#id_all_items_ordered,
#id_job_finished {
    height: 20px;
    width: 20px;
    margin-left: var(--sp-3);
}

#csv_file {
    margin-bottom: var(--sp-5);
}

.job-info-link {
	color: var(--text-on-color);
}

/* ── Global Toast Notifications ── */
.toast-container {
	position: fixed;
	inset: auto var(--topbar-inset) var(--topbar-inset) auto;
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	max-width: min(400px, calc(100vw - var(--topbar-inset) * 2));
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-primary);
	overflow: visible;
	pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
	box-shadow: var(--shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast.toast-hiding {
    opacity: 0;
    transform: translateX(30px);
}

.toast::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-round);
	background: var(--toast-c, var(--text-muted));
}

.toast-success {
	--toast-c: var(--success-color);
}

.toast-error,
.toast-danger {
	--toast-c: var(--danger-color);
}

.toast-warning {
	--toast-c: var(--warning-color);
}

.toast-info {
	--toast-c: var(--primary-color);
}

.toast-text {
    flex: 1;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.toast-copy,
.toast-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    cursor: pointer;
	padding: 0 var(--sp-half);
    line-height: 1;
}

.toast-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
}

.toast-copy:hover,
.toast-close:hover {
    color: var(--text-primary);
}

.toast-copy-success {
    color: var(--success-color);
}

.search-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	gap: var(--sp-2);
	border-radius: var(--radius-md);
	padding: 0 var(--sp-3);
	transition: var(--transition);
	color: var(--text-secondary);
	flex-shrink: 0;
}

.search-input-wrapper:focus-within {
	border: 1px solid var(--primary-color);
}

.search-input-wrapper input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	padding: var(--sp-2) 0;
	font-size: var(--fs-md);
	color: var(--text-primary);
	width: 100%;
	outline: none;
}

/* No inner focus ring */
.search-input-wrapper input:focus {
	box-shadow: none;
}

.search-input-wrapper input::placeholder {
	color: var(--text-muted);
}

/* Inline clear button */
.search-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: none;
	background: none;
	padding: 0 var(--sp-1);
	color: var(--text-secondary);
	font-size: var(--fs-2xl);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition);
}

/* Author-set display beats the UA [hidden] rule, so restore it explicitly. */
.search-clear[hidden] {
	display: none;
}

.search-clear:hover {
	color: var(--text-primary);
}

.entity-hero-header {
    padding: var(--sp-4);
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

/* Left: avatar + name/subtitle */
.entity-hero-identity {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
    padding-right: var(--sp-5);
    min-width: 180px;
}

.entity-hero-avatar {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-round);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entity-hero-avatar i {
    font-size: var(--fs-3xl);
	color: var(--text-on-color);
}

.entity-hero-identity-text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-half);
}

.entity-hero-name {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 600;
}

.entity-hero-name a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.entity-hero-since {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

/* Middle: info columns (Phone | Email | Address) */
.entity-hero-cols {
    display: flex;
    gap: 0;
    flex: 1;
    flex-wrap: wrap;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.entity-hero-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-half);
    padding: 0 var(--sp-5);
    min-width: 140px;
}

.entity-hero-col + .entity-hero-col {
    border-left: 1px solid var(--border-color);
}

.entity-hero-col-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.entity-hero-col-value {
    font-size: var(--fs-md);
    color: var(--text-primary);
    white-space: nowrap;
}

.entity-hero-col-email {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right status block and action buttons are now separate flex items */
.entity-hero-status-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 30px;
    row-gap: var(--sp-1);
    padding: 0 var(--sp-5);
    border-left: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Each section: label stacked above its value, sections read left-to-right */
.entity-hero-status-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
}

/* Smaller, squared-off status badge inside the hero bar */
.entity-hero-updated {
    flex-basis: 100%;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Pushed right, and it carries the action buttons right with it */
.entity-hero-check {
	margin-left: auto;
	padding-left: var(--sp-4);
	flex-shrink: 0;
}

.entity-hero-check + .entity-hero-actions {
	padding-left: var(--sp-3);
}

.entity-hero-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    padding-left: var(--sp-4);
    flex-shrink: 0;
}

.entity-hero-links {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}

/* Copy-to-clipboard button inside hero card columns */.entity-hero-copy-btn.copied {
    color: var(--success-color);
    border-color: var(--success-color);
	background-color: rgba(var(--success-rgb), 0.1);
}

[data-theme="dark"] .entity-hero-copy-btn.copied {
	background-color: rgba(var(--success-rgb), 0.2);
}

.entity-hero-col-address {
    white-space: normal;
}

/* Value + copy button side by side */
.entity-hero-col-value-row {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/* "Show Details" toggle (replaces the "Customer Since" line on order/sale pages) */
.entity-hero-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: none;
    border: none;
    padding: 0;
    margin-top: var(--sp-half);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
}

.entity-hero-toggle:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.entity-hero-toggle i {
    font-size: var(--fs-sm);
    transition: transform 0.2s ease;
}

.entity-hero-details-menu.open .entity-hero-toggle i {
    transform: rotate(180deg);
}

/* Contact details popup (Phone | Email | multi-line Address) */
.entity-hero-details-dropdown {
	width: min(360px, calc(100vw - var(--sp-4)));
	padding: var(--sp-1) 0;
}

.entity-hero-detail-item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-half);
	padding: var(--sp-2) var(--sp-4);
}

.entity-hero-detail-item + .entity-hero-detail-item {
	border-top: 1px solid var(--border-color);
}

.entity-hero-detail-item .entity-hero-col-value-row {
	justify-content: space-between;
	gap: var(--sp-3);
}

.entity-hero-detail-item .entity-hero-col-value {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Status-block value rows (Fit Date, Value, Next Step) */
.entity-hero-status-val {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Detail page component library ── */

/* ── Two-column detail layout ── */
.order-details-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}

.main-column {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	min-width: 0;
}

.sidebar-column {
	min-width: 0;
}

/* ── Info sections (grouped read-only fields inside a card) ── */
.info-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--sp-3);
}

.info-section-title {
	flex: 1;
	margin: 0;
	padding-bottom: var(--sp-1);
	border-bottom: 1px solid var(--border-color);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--text-primary);
}

.info-display {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

/* ── Label / value field rows ── */
.field-label {
	font-size: var(--fs-sm);
	color: var(--text-secondary);
}

.field-value {
	font-size: var(--fs-md);
	color: var(--text-primary);
}

.field-value-large {
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--text-primary);
}

.field-row-with-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.field-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-1) 0;
}

.field-row > .field-value,
.field-row > .field-value-large {
	text-align: right;
	min-width: 0;
}

.field-row > .field-label {
	flex-shrink: 0;
}

.field-row > .edit-val,
.field-row > .field-input {
	flex: 1;
	min-width: 0;
	max-width: 60%;
}

.field-row-top {
	align-items: flex-start;
}

.field-row-top > .field-label {
	padding-top: var(--sp-2);
}

.field-row-divided {
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--border-color);
}

.field-row-divided:last-child {
	border-bottom: none;
}

/* ── Total rows ── */
.total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--border-color);
}

.total-row[hidden] {
	display: none;
}

.total-row:last-child {
	border-bottom: none;
}

.total-row-label {
	color: var(--text-secondary);
	font-weight: 500;
}

.total-row-value {
	color: var(--text-primary);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.total-row.is-grand {
	border-top: 2px solid var(--border-color);
	border-bottom: none;
}

.total-row.is-grand .total-row-label,
.total-row.is-grand .total-row-value {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--text-primary);
}

/* ── Payment milestone breakpoints ── */
.pay-bp {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: rgba(255, 255, 255, 0.85);
	mix-blend-mode: difference;
	z-index: 2;
	pointer-events: none;
}

/* Fixed breakpoint positions (deposit / stock / pre-fit) */
.pay-bp-20 {
	left: 20%;
}

.pay-bp-55 {
	left: 55%;
}

.pay-bp-90 {
	left: 90%;
}

.form-grid-3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
	align-items: start;
}

/* ── Card chrome used by detail pages ── */
.card-header h3 {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 600;
}

/* Spacing comes from the flex gap */
.card-header h3 .badge-ml {
	margin-left: 0;
}

/* Opt-in zero padding so a table sits flush to the card edges. */
.card-body.flush {
	padding: 0;
}

/* Opt-in card padding */
.card-body.padded {
	padding: var(--sp-4);
}

/* ── Detail Tab Panels ── */
/* Content panels for the combined sale/order detail page (nav bar uses the standard .tab-nav/.tab-button) */

.detail-tab-panel {
    display: none;
}

.detail-tab-panel.active {
    display: block;
    padding-top: var(--sp-4);
}

/* ── Sale+Order Combined Page Layout ── */
/* Persistent two-column layout: tab panels on the left, financial summary on the right */

.sale-page-layout {
    display: flex;
    gap: var(--sp-6);
    align-items: flex-start;
}

.sale-page-main {
    flex: 3;
    min-width: 0;
}

.sale-page-summary-col {
	flex: 1;
	align-self: flex-start;
	min-width: 240px;
	max-width: 320px;
	overflow: hidden;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.sale-page-summary-col > .card {
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

.sale-page-summary-col > .card + .card {
	border-top: 1px solid var(--border-color);
}

/* Checkboxes inherit the site-wide style */

/* ── Pagination ── */
.pagination-info {
	font-size: var(--fs-sm);
	color: var(--text-secondary);
}

.pagination-controls {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

.page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 32px;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

/* ── Egger board tile ── */
.egger-tile {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
}

/* ── Consolidated shared components (auto-merged) ── */

.results-section {
    margin-bottom: 32px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
}

.results-header .section-title {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 600;
}

.results-count {
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--text-secondary);
}

.detail-row > td {
    padding: 0 !important;
    background: var(--bg-primary);
}

.detail-row.hidden {
    display: none;
}

.modal-body .form-row {
    display: flex;
    gap: var(--sp-4);
}

.status-cell {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.status-icon {
	font-size: var(--fs-lg);
	font-weight: 700;
}

.status-icon.success {
	color: var(--success-color);
}

.status-icon.warning {
	color: var(--warning-color);
}

.status-icon.danger {
	color: var(--danger-color);
}

.decision-options {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* Gantt-only badges */

.accessory-price-info {
    font-size: 0.8em;
    min-width: 110px;
}

.accessory-price-info > div {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
}

.accessory-remaining {
    font-weight: bold;
}

.accessory-remaining-negative {
    color: var(--danger-color);
}

.accessory-remaining-positive {
    color: var(--success-color);
}

.accessory-remaining-zero {
    color: var(--warning-color);
}

.accessory-price-info > div.stock-detail-hidden {
    display: none;
}

.incoming-highlight {
	color: var(--primary-color);
    font-weight: 600;
}

.incoming-zero {
    color: var(--text-primary);
    font-weight: normal;
}

.egger-tile img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.egger-tile-code {
    padding: var(--sp-1);
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    background: var(--bg-tertiary);
}

/* ── Lead source badge ── */
.source-badge {
	display: inline-block;
	padding: var(--sp-half) var(--sp-2);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 500;
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
}

.source-badge.website {
	color: var(--primary-color);
	border-color: rgba(var(--primary-rgb), 0.3);
}

.source-badge.referral {
	color: var(--success-color);
	border-color: rgba(var(--success-rgb), 0.3);
}

.source-badge.social_media {
	color: var(--purple-color);
	border-color: rgba(var(--purple-rgb), 0.3);
}

.source-badge.email {
	color: var(--info-color);
	border-color: rgba(var(--info-rgb), 0.3);
}

.source-badge.phone,
.source-badge.advertisement {
	color: var(--warning-color);
	border-color: rgba(var(--warning-rgb), 0.3);
}

.source-badge.walk_in {
	color: var(--text-secondary);
	border-color: var(--border-color);
}

/* ── Lightbox ── */
.lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--z-lightbox);
	background: var(--overlay-lightbox);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	cursor: pointer;
}

.lightbox.active {
	display: flex;
}

.lightbox img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: var(--radius-sm);
	cursor: default;
}

.lightbox-close {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	background: transparent;
	border: none;
	color: var(--text-on-color);
	font-size: var(--fs-4xl);
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
	transition: var(--transition);
}

.lightbox-close:hover {
	opacity: 1;
}

/* Square, like every other icon button — one of these used to be a circle. */
.lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: var(--radius-sm);
	color: var(--text-on-color);
	font-size: var(--fs-3xl);
	cursor: pointer;
	opacity: 0.7;
	transition: var(--transition);
	z-index: 10;
}

.lightbox-arrow:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.75);
}

.lightbox-prev {
	left: var(--sp-4);
}

.lightbox-next {
	right: var(--sp-4);
}

.lightbox-header {
	position: absolute;
	top: var(--sp-4);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--sp-2);
	z-index: 10;
}

.lightbox-footer {
	color: var(--text-on-color);
	margin-top: var(--sp-3);
	opacity: 0.8;
	display: flex;
	gap: var(--sp-4);
	align-items: center;
}

.tabs {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.tabs[hidden] {
	display: none;
}

.tabs .tab-nav-pills {
	flex: 0 1 auto;
	min-width: 0;
}

.tabs .tab-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-left: auto;
	flex-shrink: 0;
}

/* ── Toolbar filter menu ── */
/* Desktop leaves the filters inline; mobile folds them behind one trigger */
.filter-menu,
.filter-panel {
	display: contents;
}

.filter-toggle {
	display: none;
}

@media (max-width: 768px) {
	.filter-menu {
		display: inline-flex;
		position: relative;
		flex-shrink: 0;
	}

	.filter-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--sp-1);
		min-width: 32px;
		height: 32px;
		padding: 0 var(--sp-1);
		background: transparent;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		color: var(--text-secondary);
		font-size: var(--fs-lg);
		cursor: pointer;
		transition: background 0.12s, color 0.12s, border-color 0.12s;
	}

	.filter-toggle:hover,
	.filter-menu.open .filter-toggle {
		background: var(--bg-hover);
		color: var(--text-primary);
		border-color: var(--border-color);
	}

	.filter-toggle.active {
		color: var(--primary-color);
	}

	.filter-badge {
		font-size: var(--fs-sm);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.filter-panel {
		display: none;
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		z-index: var(--z-menu);
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-2);
		width: min(280px, calc(100vw - var(--sp-6)));
		padding: var(--sp-2);
		background: var(--bg-secondary);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);
	}

	.filter-menu.open .filter-panel {
		display: flex;
	}

	/* Every control in the panel spans it */
	.filter-panel > *,
	.filter-panel > .kebab-menu > .kebab-trigger {
		width: 100%;
		max-width: none;
	}
}

/* ── Form group ── */
.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.form-group[hidden] {
	display: none;
}

/* Fields split a shared row */
.form-row > .form-group {
	flex: 1 1 0;
	min-width: 0;
}

.form-group .required,
.form-group label .required {
	color: var(--danger-color);
}

.form-group input:not([type="checkbox"]),
.form-group select,
.form-group textarea {
	padding: var(--sp-2) var(--sp-3);
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-size: var(--fs-md);
	transition: var(--transition);
}

.form-group textarea {
	font-family: inherit;
	resize: vertical;
}

/* Focus restated */
.form-group input:not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 1px var(--primary-color);
}

/* Guard for .search-input-wrapper — keep after those rules */
.search-input-wrapper.search-input-wrapper input {
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	padding: var(--sp-2) 0;
}

/* Same guard for focus */
.search-input-wrapper.search-input-wrapper input:focus {
	border-color: transparent;
	box-shadow: none;
}

/* ── Tab Count Badge ── */
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--sp-1);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 700;
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.customer-order-badge {
    display: inline-block;
    padding: var(--sp-half) var(--sp-2);
	background: var(--primary-subtle);
	color: var(--primary-color);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
}

.customer-order-badge:hover {
	background: rgba(var(--primary-rgb), 0.24);
    text-decoration: none;
}

/* ── Save Notification ── */
/* Inline save flash */
.save-notification {
    display: none;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 500;
}

.save-notification.success {
    display: flex;
    background: var(--success-subtle);
    color: var(--success-color);
    border-color: rgba(var(--success-rgb), 0.35);
}

.save-notification.error {
    display: flex;
    background: var(--danger-subtle);
    color: var(--danger-color);
    border-color: rgba(var(--danger-rgb), 0.35);
}

/* ── Header Actions ── */
.header-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* ── Edit mode ── */
.edit-val:not(.is-editing *) {
	display: none;
}

.is-editing .view-val {
	display: none;
}

/* ── Admin pages component library ── */
.admin-page {
	padding: 0;
}

.admin-page .page-subtitle {
	color: var(--text-secondary);
	margin: 0 0 var(--sp-4) 0;
}

.user-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 500;
}

.user-badge i {
	font-size: var(--fs-xl);
	color: var(--primary-color);
}

@media (max-width: 1080px) {
    /* Stack the sale page columns and restore normal document scrolling */
    .sale-page-layout {
        flex-direction: column;
    }

	.sale-page-summary-col {
		max-width: none;
	}

    .form-row {
        grid-template-columns: 1fr;
    }

    .tab-nav:not(.tab-nav-pills) {
        flex-wrap: wrap;
    }

    .tab-nav:not(.tab-nav-pills) .tab-button {
        flex: 1 1 50%;
    }
}

@media (max-width: 768px) {
	/* Name and actions on the top row */
	.entity-hero-header {
		align-items: flex-start;
		row-gap: var(--sp-3);
	}

	.entity-hero-identity {
		flex: 1 1 auto;
		padding-right: var(--sp-3);
		min-width: 0;
	}

	.entity-hero-check {
		order: 2;
		margin-left: auto;
		padding-left: 0;
	}

	.entity-hero-actions {
		order: 2;
		border-left: none;
		padding-left: 0;
		flex-shrink: 0;
	}

	.entity-hero-check + .entity-hero-actions {
		padding-left: var(--sp-2);
	}

	.entity-hero-cols {
		order: 3;
		flex-basis: 100%;
		flex-direction: column;
		border-left: none;
		border-right: none;
		border-top: 1px solid var(--border-color);
		border-bottom: 1px solid var(--border-color);
		padding: var(--sp-3) 0;
		gap: var(--sp-3);
	}

	.entity-hero-col {
		padding: 0;
		min-width: 0;
	}

	.entity-hero-col + .entity-hero-col {
		border-left: none;
	}

	.entity-hero-status-block {
		order: 4;
		flex-basis: 100%;
		border-left: none;
		padding: 0;
		column-gap: var(--sp-6);
	}

	.entity-hero-links {
		order: 5;
		flex-basis: 100%;
		width: 100%;
	}
}

@media (max-width: 1080px) {
	/* ── Top nav / sidebar collapse to mobile form ── */

	/* Nav gap and content gutter are the same number */
	:root {
		--topbar-gap: var(--sp-1);
		--topbar-height: calc(var(--topbar-pill-h) + var(--sp-1));
	}

	/* The pill is the only chrome */
	.top-navbar {
		left: var(--topbar-gap) !important;
		right: var(--topbar-gap);
		z-index: calc(var(--z-chrome) + 2);
		padding: 0 var(--sp-3);
		height: auto;
		min-height: var(--topbar-pill-h);
		flex-wrap: wrap;
		align-items: flex-start;
		border-radius: calc(var(--topbar-pill-h) / 2);
	}

	.top-navbar.expanded {
		left: var(--topbar-gap);
	}

	/* The bar row keeps the pill's closed height whatever the pill is doing. */
	.top-navbar-left,
	.top-navbar-right {
		height: var(--topbar-pill-h);
	}

	/* Nav as a row of the pill */
	.sidebar {
		position: static;
		flex-basis: 100%;
		width: auto;
		height: auto;
		max-height: 0;
		overflow: hidden;
		background: none;
		border: none;
		box-shadow: none;
		pointer-events: none;
		transition: var(--transition-slow);
		/* Bottom curve on the last link */
		border-radius: 0 0 calc(var(--topbar-pill-h) / 2) calc(var(--topbar-pill-h) / 2);
	}

	.sidebar.mobile-open {
		max-height: calc(100dvh - var(--topbar-height) - var(--topbar-gap));
		padding-bottom: var(--sp-2);
		pointer-events: auto;
	}

	body:has(.impersonation-banner) .sidebar.mobile-open {
		max-height: calc(100dvh - var(--topbar-height) - 34px - var(--topbar-gap));
	}

	/* Clear the desktop collapse translate */
	.sidebar.hidden {
		transform: none;
	}

	/* Sized from content, not flex:1 */
	.sidebar-nav {
		flex: 0 1 auto;
		min-height: 0;
	}

	/* Tighter nav padding */
	.nav-section-header {
		padding: var(--sp-2) var(--sp-3) var(--sp-half);
	}

	.nav-section.collapsed .nav-section-header {
		padding-bottom: var(--sp-2);
	}

	.nav-link,
	.nav-section-content .nav-link {
		padding: var(--sp-1) var(--sp-3);
	}

	/* No brand row inside the pill */
	.sidebar-brand {
		display: none;
	}

	/* Main content reclaims the sidebar's space */
	.main-content {
		margin-left: 0 !important;
		padding-left: var(--topbar-gap);
		padding-right: var(--topbar-gap);
	}

	.main-content.expanded {
		margin-left: 0;
	}

	/* Mobile search icon and kebab */
	.mobile-topbar-only {
		display: inline-flex;
	}

	.profile-menu-wrapper,
	.top-location-menu {
		display: none;
	}

	/* Search as a second row */
	.top-navbar-center {
		position: static;
		flex-basis: 100%;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-2);
		max-height: 0;
		overflow: hidden;
		pointer-events: none;
		transition: var(--transition-slow);
	}

	.top-navbar.search-open .top-navbar-center {
		max-height: calc(var(--topbar-pill-h) * 2);
		padding-bottom: var(--sp-3);
		pointer-events: auto;
	}

	/* Clip released once the roll is done */
	.top-navbar.search-open.search-settled .top-navbar-center {
		overflow: visible;
	}

	.top-navbar-center .top-search,
	.top-navbar-center .top-search form {
		width: 100%;
	}

	.search-scope {
		width: 100%;
	}

	.search-scope .search-scope-toggle {
		flex: 1;
		min-width: 0;
	}

	.search-scope-toggle[data-pill-slider] {
		height: 32px;
	}

	.search-scope-toggle[data-pill-slider] .tab-button {
		flex: 1;
		justify-content: center;
	}

	.top-navbar-right {
		gap: var(--sp-2);
	}

	/* Search owns its own row */
	.top-navbar-left,
	body.has-local-search .top-navbar-left {
		max-width: none;
	}
}

@media (max-width: 768px) {
	:root {
		/* Cap the top of the type scale */
		--fs-4xl: 1.5rem;    /* 32 → 24 */
		--fs-3xl: 1.25rem;   /* 24 → 20 */
		--fs-2xl: 1.125rem;  /* 20 → 18 */
		--fs-xl: 1rem;       /* 18 → 16 */

		/* Body text drops to 12px */
		--fs-md: 0.75rem;    /* 14 → 12 */

		/* Tighten the large spacing steps */
		--sp-6: 16px;        /* 24 → 16 */
		--sp-5: 14px;        /* 20 → 14 */

		/* Modal offset matches the side gap */
		--modal-offset: 16px;
	}

	/* iOS zoom: controls stay at 16px */
	input:not([type]),
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="time"],
	textarea,
	select {
		font-size: var(--fs-lg);
	}

	/* Every table wrapper */
	[class*="table-wrap"],
	[class*="table-container"] {
		overflow-x: auto;
	}

	/* Unwrapped tables scroll themselves */
	table {
		display: block;
		overflow-x: auto;
	}

	/* Wrapped tables stay full width */
	[class*="table-wrap"] > table,
	[class*="table-container"] > table {
		display: table;
		overflow: hidden;
	}

    /* Trim side padding */
    .main-content {
        padding: var(--sp-2) var(--topbar-gap);
    }

    .page-content {
        padding-left: 0;
        padding-right: 0;
    }

    .page-title {
        font-size: var(--fs-lg);
    }

    /* Remove card body extra padding on mobile */
    .card-header {
        padding: var(--sp-2);
    }

    .card-body {
        padding: var(--sp-2);
    }

    /* Reset content-wrapper margin */
    .content-wrapper {
        margin: 0;
    }

    /* Page header tighter on mobile */
    .page-header {
        margin-bottom: var(--sp-2);
    }

    .page-header h1 {
        font-size: var(--fs-2xl);
    }

    .header-actions {
        width: 100%;
    }

	.results-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-3);
	}
}

@media (max-width: 480px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-4);
    }

    .tab-nav:not(.tab-nav-pills) .tab-button {
        flex: 1 1 100%;
        font-size: var(--fs-md);
        padding: var(--sp-3) var(--sp-4);
    }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.tab-pill-thumb {
		transition: none;
	}

	.tab-swapping {
		transition: none;
	}

}