/**
 * Digital Worker — Modern Refresh (v1)
 *
 * "Friendlier SaaS" pass over the existing template. This file is loaded
 * AFTER style.css, theme-override.css, and the theme stylesheet (light/dark)
 * so it always wins the cascade. Reuses the existing --accent / --surface /
 * --background / --border / --heading / --default / --muted CSS variables
 * so it adapts to both light and dark themes automatically; dark-only
 * adjustments are scoped under [data-theme='dark'].
 *
 * To disable: remove the <link> to this file in HTML, or delete this file.
 */

/* Digital Apex brand fonts (Manrope body + Space Grotesk display). Imported
   here so all 60+ pages pick them up without per-file <link> edits. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	/* Spacing (4px base) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;

	/* Type scale */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;

	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-normal: 1.55;
	--leading-relaxed: 1.7;

	--font-display: 'Space Grotesk', 'Nunito', system-ui, -apple-system,
		'Segoe UI', Roboto, sans-serif;
	--font-sans: 'Manrope', 'Nunito', system-ui, -apple-system, 'Segoe UI',
		Roboto, sans-serif;

	/* Motion */
	--ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--duration-fast: 120ms;
	--duration-base: 220ms;
	--duration-slow: 360ms;

	/* Refined radius (the existing tokens stay; these are aliases for
	   slightly larger SaaS-feel surfaces) */
	--radius-card: 1.25rem;
	--radius-control: 0.625rem;
	--radius-control-pill: 50rem;

	/* Brand gradient (purple → pink) */
	--gradient-brand: linear-gradient(
		135deg,
		var(--accent-color) 0%,
		var(--secondary-color) 100%
	);
	--gradient-brand-soft: linear-gradient(
		135deg,
		rgba(var(--accent-color-rgb), 0.12) 0%,
		rgba(var(--secondary-color-rgb), 0.12) 100%
	);
	--gradient-surface-soft: radial-gradient(
			1200px 600px at 0% -10%,
			rgba(var(--accent-color-rgb), 0.07),
			transparent 60%
		),
		radial-gradient(
			900px 500px at 100% 0%,
			rgba(var(--secondary-color-rgb), 0.05),
			transparent 55%
		);

	/* Shadows — soft, layered, brand-tinted */
	--shadow-xs: 0 1px 2px rgba(15, 17, 21, 0.04);
	--shadow-sm: 0 2px 6px rgba(15, 17, 21, 0.05),
		0 1px 2px rgba(15, 17, 21, 0.04);
	--shadow-md: 0 6px 16px rgba(15, 17, 21, 0.06),
		0 2px 4px rgba(15, 17, 21, 0.04);
	--shadow-lg: 0 14px 36px rgba(15, 17, 21, 0.08),
		0 4px 8px rgba(15, 17, 21, 0.04);
	--shadow-xl: 0 28px 60px rgba(15, 17, 21, 0.12),
		0 10px 20px rgba(15, 17, 21, 0.06);
	--shadow-glow: 0 12px 30px rgba(var(--accent-color-rgb), 0.22);
	--ring-focus: 0 0 0 4px rgba(var(--accent-color-rgb), 0.18);

	/* Tinted surfaces for elevated panels in light mode */
	--surface-tint-1: rgba(var(--accent-color-rgb), 0.04);
	--surface-tint-2: rgba(var(--accent-color-rgb), 0.07);
}

[data-theme='dark'] {
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45),
		0 1px 2px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5),
		0 2px 4px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55),
		0 4px 8px rgba(0, 0, 0, 0.35);
	--shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.6),
		0 10px 20px rgba(0, 0, 0, 0.4);
	--shadow-glow: 0 12px 30px rgba(var(--accent-color-rgb), 0.35);
	--ring-focus: 0 0 0 4px rgba(var(--accent-color-rgb), 0.32);
	--surface-tint-1: rgba(var(--accent-color-rgb), 0.08);
	--surface-tint-2: rgba(var(--accent-color-rgb), 0.12);
}

/* ==========================================================================
   2. Body, typography, selection
   ========================================================================== */
body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--default-color);
	background: var(--background-color);
	background-image: var(--gradient-surface-soft);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

[data-theme='dark'] body {
	background-image: radial-gradient(
			1100px 600px at 0% -10%,
			rgba(var(--accent-color-rgb), 0.18),
			transparent 60%
		),
		radial-gradient(
			900px 500px at 100% 0%,
			rgba(var(--secondary-color-rgb), 0.12),
			transparent 55%
		);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	color: var(--heading-color);
	letter-spacing: -0.01em;
	line-height: var(--leading-tight);
}

h1 {
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}
h2 {
	font-size: var(--text-2xl);
	font-weight: 700;
}
h3 {
	font-size: var(--text-xl);
	font-weight: 700;
}
h4 {
	font-size: var(--text-lg);
	font-weight: 600;
}
h5 {
	font-size: var(--text-base);
	font-weight: 600;
}
h6 {
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted-color);
}

/* Reusable gradient text — apply to .text-gradient or to specific headings */
.text-gradient-brand,
.hero-title {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

::selection {
	background: rgba(var(--accent-color-rgb), 0.25);
	color: var(--heading-color);
}

/* Scrollbars (WebKit) */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(var(--accent-color-rgb), 0.25);
	border-radius: 50rem;
	border: 2px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--accent-color-rgb), 0.45);
	background-clip: padding-box;
	border: 2px solid transparent;
}

/* ==========================================================================
   3. Page chrome (header, sidebar, page-title)
   ========================================================================== */
.header {
	height: 64px;
	background: rgba(var(--surface-color-rgb), 0.85);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.08);
	box-shadow: var(--shadow-xs);
}

.header .logo {
	gap: 0.6rem;
}

.header .logo span {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}

.header .toggle-sidebar-btn {
	border-radius: var(--radius-control);
	padding: 6px 8px;
	transition: background-color var(--duration-fast) var(--ease-out-soft);
}
.header .toggle-sidebar-btn:hover {
	background: rgba(var(--accent-color-rgb), 0.08);
}

/* Profile dropdown trigger — soften */
.header-nav .nav-profile {
	border-radius: 50rem;
	padding: 4px 10px 4px 4px;
	transition: background-color var(--duration-fast) var(--ease-out-soft);
}
.header-nav .nav-profile:hover {
	background: rgba(var(--accent-color-rgb), 0.08);
}

/* Sidebar refinements */
.sidebar {
	background: var(--surface-color);
	border-right: 1px solid rgba(var(--accent-color-rgb), 0.08);
	box-shadow: var(--shadow-xs);
}

.sidebar-nav {
	padding: var(--space-4) var(--space-3);
}

.sidebar-nav .nav-item {
	margin-bottom: 2px;
}

.sidebar-nav .nav-link {
	border-radius: var(--radius-control);
	padding: 10px 12px;
	font-weight: 500;
	transition: background-color var(--duration-fast) var(--ease-out-soft),
		color var(--duration-fast) var(--ease-out-soft),
		transform var(--duration-fast) var(--ease-out-soft);
}

.sidebar-nav .nav-link:hover {
	background: rgba(var(--accent-color-rgb), 0.08);
}

/* Active item: gradient pill */
.sidebar-nav .nav-link:not(.collapsed) {
	background: var(--gradient-brand);
	color: var(--contrast-color);
	box-shadow: var(--shadow-glow);
}
.sidebar-nav .nav-link:not(.collapsed) i,
.sidebar-nav .nav-link:not(.collapsed):hover {
	color: var(--contrast-color);
}

.sidebar-nav .nav-content a {
	border-radius: var(--radius-control);
	padding: 6px 10px 6px 36px;
	font-size: var(--text-sm);
}
.sidebar-nav .nav-content a:hover {
	background: rgba(var(--accent-color-rgb), 0.06);
}
.sidebar-nav .nav-content a.active {
	background: rgba(var(--accent-color-rgb), 0.1);
	color: var(--accent-color);
	font-weight: 600;
}

.sidebar-nav .nav-heading {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted-color);
	padding: var(--space-4) var(--space-3) var(--space-2);
}

/* Theme toggle in sidebar */
.sidebar .theme-toggle,
.sidebar-nav .theme-toggle-link {
	border-radius: var(--radius-control);
	transition: background-color var(--duration-fast) var(--ease-out-soft);
}
.sidebar-nav .theme-toggle-link:hover {
	background: rgba(var(--accent-color-rgb), 0.08);
}

/* Page title */
.pagetitle {
	margin-bottom: var(--space-6);
}

.pagetitle h1 {
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--heading-color);
	margin-bottom: var(--space-2);
}

.pagetitle .breadcrumb {
	font-size: var(--text-sm);
	margin-bottom: 0;
}
.pagetitle .breadcrumb-item,
.pagetitle .breadcrumb-item a {
	color: var(--muted-color);
}
.pagetitle .breadcrumb-item.active {
	color: var(--default-color);
	font-weight: 500;
}

/* ==========================================================================
   4. Cards
   ========================================================================== */
.card {
	border: 1px solid rgba(var(--accent-color-rgb), 0.08);
	border-radius: var(--radius-card);
	/* Slightly translucent so the constellation background can show through.
	 * Backdrop-filter keeps text legible by blurring whatever is behind. */
	background: rgba(var(--surface-color-rgb), 0.82);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-base) var(--ease-out-soft),
		box-shadow var(--duration-base) var(--ease-out-soft),
		border-color var(--duration-base) var(--ease-out-soft);
}

.card .card-body {
	padding: var(--space-6);
}

.card-title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--heading-color);
	letter-spacing: -0.005em;
	padding: 0 0 var(--space-4) 0;
	margin-bottom: var(--space-2);
}

.card-title span:not(.card-title-badge) {
	font-weight: 500;
	color: var(--muted-color);
	font-size: var(--text-sm);
}

/* Soft hover lift for actionable cards */
.card.is-interactive,
.feature-card,
.use-case-card,
.agent-card {
	cursor: pointer;
}

.card.is-interactive:hover,
.feature-card:hover,
.use-case-card:hover,
.agent-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg), 0 6px 18px rgba(var(--accent-color-rgb), 0.1);
	border-color: rgba(var(--accent-color-rgb), 0.25);
}

/* Dashboard info cards (Total Tokens / API Calls / Storage) */
.dashboard .info-card .card-icon {
	width: 56px;
	height: 56px;
	font-size: 1.4rem;
	background: var(--gradient-brand-soft) !important;
	color: var(--accent-color) !important;
	border-radius: 1rem !important;
	box-shadow: inset 0 0 0 1px rgba(var(--accent-color-rgb), 0.15);
	transition: transform var(--duration-base) var(--ease-out-spring);
}

.dashboard .info-card:hover .card-icon {
	transform: scale(1.06) rotate(-2deg);
}

.dashboard .info-card h6 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--heading-color);
	text-transform: none;
}

/* ==========================================================================
   5. Buttons (refine Bootstrap base + align with btn-dw aesthetic)
   ========================================================================== */
.btn {
	border-radius: var(--radius-control);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.55rem 1.1rem;
	transition: transform var(--duration-fast) var(--ease-out-soft),
		box-shadow var(--duration-base) var(--ease-out-soft),
		background-color var(--duration-fast) var(--ease-out-soft),
		border-color var(--duration-fast) var(--ease-out-soft),
		color var(--duration-fast) var(--ease-out-soft);
}

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

.btn:active {
	transform: translateY(1px) scale(0.99);
}

.btn-primary {
	background: var(--gradient-brand);
	background-size: 200% auto;
	border: none;
	color: var(--contrast-color);
	box-shadow: var(--shadow-sm);
	transition: background-position var(--duration-slow) var(--ease-out-soft),
		transform var(--duration-fast) var(--ease-out-soft),
		box-shadow var(--duration-base) var(--ease-out-soft);
}
.btn-primary:hover {
	background-position: right center;
	color: var(--contrast-color);
	box-shadow: var(--shadow-glow);
	transform: translateY(-1px);
}
.btn-primary:disabled,
.btn-primary.disabled {
	background: var(--muted-color);
	opacity: 0.6;
}

.btn-outline-primary {
	border: 1.5px solid rgba(var(--accent-color-rgb), 0.5);
	color: var(--accent-color);
	background: transparent;
}
.btn-outline-primary:hover {
	background: rgba(var(--accent-color-rgb), 0.08);
	border-color: var(--accent-color);
	color: var(--accent-color);
	transform: translateY(-1px);
}

.btn-secondary {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	color: var(--default-color);
	box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
	background: var(--surface-tint-1);
	color: var(--accent-color);
	border-color: rgba(var(--accent-color-rgb), 0.4);
	transform: translateY(-1px);
}

.btn-light {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	color: var(--default-color);
}

.btn-sm {
	padding: 0.35rem 0.75rem;
	font-size: var(--text-sm);
}

.btn-lg {
	padding: 0.85rem 1.6rem;
	font-size: var(--text-lg);
	border-radius: 0.85rem;
}

/* Themed pill button (re-skin of .btn-dw-primary primary path,
   keeping the same class so pages don't change) */
.btn-dw {
	border-radius: var(--radius-control-pill);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-base) var(--ease-out-spring),
		box-shadow var(--duration-base) var(--ease-out-soft),
		background-position var(--duration-slow) var(--ease-out-soft);
}
.btn-dw-primary {
	background: var(--gradient-brand);
	background-size: 200% auto;
}
.btn-dw-primary:hover {
	background-position: right center;
	box-shadow: var(--shadow-glow);
	transform: translateY(-2px) scale(1.02);
}

/* ==========================================================================
   6. Form controls
   ========================================================================== */
.form-control,
.form-select {
	border-radius: var(--radius-control);
	border: 1px solid var(--border-color);
	background: var(--surface-color);
	color: var(--default-color);
	padding: 0.55rem 0.85rem;
	transition: border-color var(--duration-fast) var(--ease-out-soft),
		box-shadow var(--duration-fast) var(--ease-out-soft);
}

.form-control::placeholder {
	color: var(--muted-color);
	opacity: 0.7;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--accent-color);
	box-shadow: var(--ring-focus);
	outline: none;
}

.form-label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--heading-color);
	margin-bottom: var(--space-2);
	letter-spacing: 0.005em;
}

.input-group-text {
	background: var(--surface-tint-1);
	border-color: var(--border-color);
	color: var(--muted-color);
	border-radius: var(--radius-control);
}

/* Themed pill input (used with .input-group-pill in theme-override) */
.input-group-pill {
	border-radius: var(--radius-control-pill);
	border-color: var(--border-color);
	background: var(--surface-color);
	box-shadow: var(--shadow-xs);
	transition: border-color var(--duration-fast) var(--ease-out-soft),
		box-shadow var(--duration-fast) var(--ease-out-soft);
}
.input-group-pill:focus-within {
	border-color: var(--accent-color);
	box-shadow: var(--ring-focus);
}

/* Themed-control pill (search/filter row on agent list etc.) */
.themed-control {
	border-radius: var(--radius-control-pill);
	border-color: var(--border-color);
	transition: border-color var(--duration-fast) var(--ease-out-soft),
		box-shadow var(--duration-fast) var(--ease-out-soft),
		background-color var(--duration-fast) var(--ease-out-soft);
}

/* ==========================================================================
   7. Tables
   ========================================================================== */
.table {
	color: var(--default-color);
	border-color: rgba(var(--accent-color-rgb), 0.08);
}

.table thead th {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-color);
	background: var(--surface-tint-1);
	border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.12);
	padding: 0.85rem 1rem;
}

.table tbody td {
	padding: 0.85rem 1rem;
	border-color: rgba(var(--accent-color-rgb), 0.06);
	vertical-align: middle;
}

.table tbody tr {
	transition: background-color var(--duration-fast) var(--ease-out-soft);
}

.table-hover tbody tr:hover {
	background: rgba(var(--accent-color-rgb), 0.05);
	--bs-table-hover-bg: transparent;
}

/* ==========================================================================
   8. Badges
   ========================================================================== */
.badge {
	border-radius: 50rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.32rem 0.65rem;
	font-size: var(--text-xs);
}

.bg-success {
	background-color: rgba(40, 167, 69, 1) !important;
}
.bg-warning {
	background-color: rgba(255, 193, 7, 1) !important;
	color: #5b4500 !important;
}
.bg-danger {
	background-color: rgba(220, 53, 69, 1) !important;
}

/* Soft variant (use as: <span class="badge badge-soft is-success">...</span>) */
.badge-soft {
	background: rgba(var(--accent-color-rgb), 0.12);
	color: var(--accent-color);
}
.badge-soft.is-success {
	background: rgba(40, 167, 69, 0.14);
	color: #1f7a3a;
}
.badge-soft.is-warning {
	background: rgba(255, 193, 7, 0.18);
	color: #8a6500;
}
.badge-soft.is-danger {
	background: rgba(220, 53, 69, 0.14);
	color: #b22234;
}

/* ==========================================================================
   9. Modals & dropdowns
   ========================================================================== */
.modal-content {
	border: 1px solid rgba(var(--accent-color-rgb), 0.12);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-xl);
	background: var(--surface-color);
}

.modal-header {
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.08);
}
.modal-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
}

.modal-body {
	padding: var(--space-6);
}
.modal-footer {
	padding: var(--space-4) var(--space-6);
	gap: var(--space-2);
	border-top: 1px solid rgba(var(--accent-color-rgb), 0.08);
}

.dropdown-menu {
	border-radius: var(--radius-control);
	border: 1px solid rgba(var(--accent-color-rgb), 0.1);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2);
	background: rgba(var(--surface-color-rgb), 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.dropdown-item {
	border-radius: var(--radius-sm, 0.375rem);
	padding: 0.5rem 0.75rem;
	color: var(--default-color);
	transition: background-color var(--duration-fast) var(--ease-out-soft),
		color var(--duration-fast) var(--ease-out-soft);
}
.dropdown-item:hover,
.dropdown-item:focus {
	background: rgba(var(--accent-color-rgb), 0.08);
	color: var(--accent-color);
}

/* ==========================================================================
   10. Hero / onboarding
   ========================================================================== */
.hero-card {
	background: var(--surface-color);
	background-image: var(--gradient-surface-soft),
		linear-gradient(
			135deg,
			rgba(var(--accent-color-rgb), 0.06),
			rgba(var(--secondary-color-rgb), 0.04)
		);
	border: 1px solid rgba(var(--accent-color-rgb), 0.12);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-lg);
	padding: var(--space-12) var(--space-8);
}

.hero-title {
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: var(--leading-tight);
}

.hero-subtitle {
	color: var(--muted-color);
	font-size: var(--text-lg);
}

.feature-card,
.use-case-card {
	background: var(--surface-color);
	border: 1px solid rgba(var(--accent-color-rgb), 0.08);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
}

.feature-icon-wrapper,
.use-case-icon {
	width: 72px;
	height: 72px;
	background-image: var(--gradient-brand-soft);
	box-shadow: inset 0 0 0 1px rgba(var(--accent-color-rgb), 0.15);
}

.feature-icon-wrapper i,
.use-case-icon i {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ==========================================================================
   11. Tabs, accordion
   ========================================================================== */
.nav-tabs-bordered {
	border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.12);
}
.nav-tabs-bordered .nav-link {
	color: var(--muted-color);
	font-weight: 600;
	padding: 0.65rem 0.25rem;
	margin-right: 1.25rem;
	border: none;
	transition: color var(--duration-fast) var(--ease-out-soft);
}
.nav-tabs-bordered .nav-link:hover {
	color: var(--accent-color);
}
.nav-tabs-bordered .nav-link.active {
	color: var(--accent-color);
	border-bottom: 2px solid var(--accent-color);
}

.accordion-item {
	border: 1px solid rgba(var(--accent-color-rgb), 0.1);
	border-radius: var(--radius-control) !important;
	margin-bottom: var(--space-2);
	overflow: hidden;
}
.accordion-button {
	font-weight: 600;
	background: var(--surface-color);
	color: var(--heading-color);
}
.accordion-button:not(.collapsed) {
	background: var(--surface-tint-1);
	color: var(--accent-color);
}
.accordion-button:focus {
	box-shadow: var(--ring-focus);
	border-color: var(--accent-color);
}

/* ==========================================================================
   12. Alerts, toasts
   ========================================================================== */
.alert {
	border-radius: var(--radius-control);
	border: 1px solid transparent;
	padding: var(--space-3) var(--space-4);
}
.alert-info {
	background: rgba(var(--accent-color-rgb), 0.08);
	border-color: rgba(var(--accent-color-rgb), 0.18);
	color: var(--accent-color);
}

.toast {
	box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   13. Status pills (re-skin of theme-override)
   ========================================================================== */
.status-pill {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	border: 1px solid transparent;
}
.status-pill-enabled {
	background: rgba(var(--accent-color-rgb), 0.1);
	border-color: rgba(var(--accent-color-rgb), 0.18);
	color: var(--accent-color);
}

/* ==========================================================================
   14. Loading skeletons (utility)
   Use as: <div class="skeleton skeleton-text"></div>
   Variants: -text, -text-sm, -text-lg, -number, -circle, -row, -block
   ========================================================================== */
.skeleton {
	display: inline-block;
	background: linear-gradient(
		90deg,
		rgba(var(--accent-color-rgb), 0.06) 25%,
		rgba(var(--accent-color-rgb), 0.14) 37%,
		rgba(var(--accent-color-rgb), 0.06) 63%
	);
	background-size: 400% 100%;
	border-radius: var(--radius-sm, 0.375rem);
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
	vertical-align: middle;
}

[data-theme='dark'] .skeleton {
	background: linear-gradient(
		90deg,
		rgba(var(--accent-color-rgb), 0.1) 25%,
		rgba(var(--accent-color-rgb), 0.22) 37%,
		rgba(var(--accent-color-rgb), 0.1) 63%
	);
	background-size: 400% 100%;
}

.skeleton-text {
	display: block;
	height: 0.875rem;
	width: 100%;
	margin-bottom: 0.5rem;
}
.skeleton-text:last-child {
	margin-bottom: 0;
}
.skeleton-text-sm {
	display: block;
	height: 0.75rem;
	width: 60%;
	margin-bottom: 0.5rem;
}
.skeleton-text-lg {
	display: block;
	height: 1.125rem;
	width: 80%;
	margin-bottom: 0.75rem;
}
.skeleton-number {
	display: inline-block;
	height: 1.6rem;
	width: 6rem;
	border-radius: var(--radius-md, 0.5rem);
}
.skeleton-circle {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.skeleton-row {
	display: block;
	height: 2.5rem;
	width: 100%;
	margin-bottom: 0.5rem;
	border-radius: var(--radius-control);
}
.skeleton-block {
	display: block;
	height: 8rem;
	width: 100%;
	border-radius: var(--radius-card);
}
.skeleton-chart {
	display: block;
	height: 220px;
	width: 100%;
	border-radius: var(--radius-card);
	background-image: linear-gradient(
			to top,
			rgba(var(--accent-color-rgb), 0.06) 0%,
			transparent 60%
		),
		linear-gradient(
			90deg,
			rgba(var(--accent-color-rgb), 0.06) 25%,
			rgba(var(--accent-color-rgb), 0.14) 37%,
			rgba(var(--accent-color-rgb), 0.06) 63%
		);
	background-size: 100% 100%, 400% 100%;
}

/* Pre-baked widget skeleton: 3 lines of varying width inside a card body */
.skeleton-widget {
	display: block;
	padding: 0.25rem 0;
}
.skeleton-widget .skeleton-text:nth-child(1) {
	width: 90%;
}
.skeleton-widget .skeleton-text:nth-child(2) {
	width: 70%;
}
.skeleton-widget .skeleton-text:nth-child(3) {
	width: 80%;
}
.skeleton-widget .skeleton-text:nth-child(4) {
	width: 60%;
}

@keyframes skeleton-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.skeleton {
		animation: none;
	}
}

/* ==========================================================================
   15. Misc — fade-in for the page after layout-loaded
   ========================================================================== */
body.layout-loaded main#main {
	opacity: 1;
	transition: opacity var(--duration-slow) var(--ease-out-soft);
}

/* ==========================================================================
   16. Focus visible everywhere
   ========================================================================== */
a:focus-visible,
button:focus-visible,
[role='button']:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus);
	border-radius: var(--radius-sm, 0.375rem);
}

/* ==========================================================================
   16b. Error pages (404, 403)
   ========================================================================== */
.error-page {
	padding: var(--space-12) var(--space-4);
	gap: var(--space-3);
	position: relative;
	z-index: 1;
}

.error-page .error-glyph {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4);
}

.error-page .error-code {
	font-family: var(--font-display);
	font-size: clamp(6rem, 16vw, 10rem);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.95;
}

.error-page .error-headline {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--heading-color);
	margin: 0 0 var(--space-2) 0;
	max-width: 36rem;
}

.error-page .error-sub {
	color: var(--muted-color);
	font-size: var(--text-base);
	max-width: 32rem;
	margin: 0 0 var(--space-5) 0;
}

.error-page .error-actions {
	margin-bottom: var(--space-6);
}

.error-page .error-illustration {
	max-width: 360px;
	opacity: 0.85;
	margin-top: var(--space-2);
}

/* ==========================================================================
   16c. Empty states — reusable component
   Use as:
     <div class="empty-state">
       <div class="empty-state-icon"><i class="bi bi-inbox"></i></div>
       <h3 class="empty-state-title">No agents yet</h3>
       <p class="empty-state-text">Create your first agent to get started.</p>
       <a class="btn-dw btn-dw-primary btn-dw-sm" href="...">Create agent</a>
     </div>
   ========================================================================== */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-12) var(--space-6);
	color: var(--default-color);
	gap: var(--space-3);
}
.empty-state-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--gradient-brand-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.25rem;
	margin-bottom: var(--space-3);
	box-shadow: inset 0 0 0 1px rgba(var(--accent-color-rgb), 0.18);
}
.empty-state-icon i {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.empty-state-title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--heading-color);
	margin: 0;
	letter-spacing: -0.01em;
}
.empty-state-text {
	color: var(--muted-color);
	font-size: var(--text-base);
	max-width: 32rem;
	margin: 0 0 var(--space-3) 0;
}
.empty-state-actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: center;
}

/* Compact variant for inside small cards */
.empty-state.is-compact {
	padding: var(--space-6) var(--space-4);
	gap: var(--space-2);
}
.empty-state.is-compact .empty-state-icon {
	width: 56px;
	height: 56px;
	font-size: 1.5rem;
	margin-bottom: var(--space-2);
}
.empty-state.is-compact .empty-state-title {
	font-size: var(--text-base);
}
.empty-state.is-compact .empty-state-text {
	font-size: var(--text-sm);
}

/* ==========================================================================
   17. Login / register page polish — premium auth experience
   ========================================================================== */
body.auth-page {
	background-color: var(--background-color);
	background-image: radial-gradient(
			900px 500px at 15% -10%,
			rgba(var(--accent-color-rgb), 0.18),
			transparent 60%
		),
		radial-gradient(
			900px 500px at 100% 110%,
			rgba(var(--secondary-color-rgb), 0.16),
			transparent 60%
		),
		radial-gradient(
			500px 300px at 80% 0%,
			rgba(var(--accent-color-rgb), 0.08),
			transparent 70%
		);
	background-attachment: fixed;
	overflow-x: hidden;
}

body.auth-page #constellation-bg {
	opacity: 0.7;
}

body.auth-page main {
	position: relative;
	z-index: 2;
}

body.auth-page .auth-logo {
	gap: 0.65rem;
}
body.auth-page .auth-logo img {
	height: 38px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 14px rgba(var(--accent-color-rgb), 0.3));
}
body.auth-page .auth-logo span {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
}

section.register .card {
	border-radius: var(--radius-card);
	border: 1px solid rgba(var(--accent-color-rgb), 0.12);
	box-shadow: var(--shadow-xl), 0 0 60px rgba(var(--accent-color-rgb), 0.08);
	background: rgba(var(--surface-color-rgb), 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

section.register .card-body {
	padding: var(--space-8) var(--space-6);
}

section.register .card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-2xl) !important;
	letter-spacing: -0.015em;
	color: var(--heading-color);
	margin-bottom: 0.4rem;
}

section.register .card-body p.text-center.small {
	color: var(--muted-color);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

/* Make auth form inputs feel more premium */
section.register .form-control,
section.register .form-select {
	padding: 0.7rem 0.95rem;
	font-size: var(--text-base);
}
section.register .input-group-text {
	background: var(--surface-tint-1);
	color: var(--muted-color);
	border-color: var(--border-color);
}

section.register .btn-dw,
section.register .btn-dw-primary {
	padding: 0.85rem 1.25rem;
	font-size: var(--text-base);
	letter-spacing: 0.02em;
}

/* "or" divider on auth pages */
section.register .small.mb-0 {
	color: var(--muted-color);
	position: relative;
	padding: 0 1rem;
	background: transparent;
}

/* ==========================================================================
   18. Refined scroll-arrow already present in theme-override; just nudge color
   ========================================================================== */
.scroll-arrow-container .scroll-to-section {
	color: rgba(var(--accent-color-rgb), 0.55);
}
.scroll-arrow-container .scroll-to-section:hover {
	color: var(--accent-color);
}

/* ==========================================================================
   19. Mobile responsive polish
   ========================================================================== */
@media (max-width: 991.98px) {
	/* Page title condenses on smaller viewports */
	.pagetitle h1 {
		font-size: var(--text-2xl);
	}

	/* Card body breathes a little less */
	.card .card-body {
		padding: var(--space-5);
	}

	/* Header gets a touch shorter */
	.header {
		height: 58px;
	}
}

@media (max-width: 767.98px) {
	body {
		font-size: 0.95rem;
	}

	/* Page title stacks tighter on phones */
	.pagetitle {
		margin-bottom: var(--space-4);
	}
	.pagetitle h1 {
		font-size: var(--text-xl);
		margin-bottom: var(--space-1);
	}

	/* Hero card scales down on phones */
	.hero-card {
		padding: var(--space-8) var(--space-4);
	}
	.hero-title {
		font-size: var(--text-3xl);
	}
	.hero-subtitle {
		font-size: var(--text-base);
	}

	/* Cards: smaller radius + tighter padding on phones (avoids huge whitespace) */
	.card {
		border-radius: 1rem;
	}
	.card .card-body {
		padding: var(--space-4);
	}
	.modal-body,
	.modal-header,
	.modal-footer {
		padding: var(--space-4);
	}
	.modal-content {
		border-radius: 1rem;
	}

	/* Page-controls row in agent-list etc. — stack instead of squeeze */
	.page-controls-container,
	.search-filter-wrapper {
		flex-wrap: wrap;
	}
	.search-wrapper {
		width: 100% !important;
	}

	/* Onboarding sections tighter */
	#no-agent-container > .row {
		min-height: auto;
		padding: var(--space-6) 0;
	}

	/* Filter pills wrap nicely */
	#applied-filters-container {
		gap: var(--space-2) !important;
	}

	/* Tables become horizontally scrollable on phones */
	.table-responsive {
		border-radius: var(--radius-control);
	}
	.table thead th,
	.table tbody td {
		padding: 0.65rem 0.75rem;
		white-space: nowrap;
	}

	/* Dashboard info card numbers shrink */
	.dashboard .info-card h6 {
		font-size: var(--text-xl);
	}
	.dashboard .info-card .card-icon {
		width: 44px;
		height: 44px;
		font-size: 1.15rem;
	}

	/* Skeleton charts shorter */
	.skeleton-chart {
		height: 160px;
	}

	/* Wizard stepper text fits */
	.wizard-stepper {
		max-width: 100%;
	}
	.step-text {
		font-size: 0.65rem;
	}
	.step-bullet {
		min-width: 44px;
		font-size: 0.7rem;
	}

	/* Buttons: bigger touch target on phones */
	.btn,
	.btn-dw {
		min-height: 40px;
	}

	/* Header logo title hides on very small screens to save room */
	.header .logo span {
		display: none;
	}

	/* Profile dropdown: drop the username text */
	.header-nav .nav-profile span {
		display: none !important;
	}

	/* Auth pages tighter */
	body.auth-page section.register .card-body {
		padding: var(--space-6) var(--space-4);
	}

	/* Error pages tighter */
	.error-page {
		padding: var(--space-8) var(--space-3);
	}
	.error-page .error-illustration {
		max-width: 240px;
	}
}

@media (max-width: 575.98px) {
	/* Toasts span the screen on very small phones */
	.toast {
		min-width: calc(100vw - 2rem);
	}

	/* Modals go almost full-screen */
	.modal-dialog {
		margin: 0.5rem;
	}
}

/* Touch-friendly: increase active-area for sidebar nav on tablets+phones */
@media (hover: none) {
	.sidebar-nav .nav-link {
		padding: 12px 14px;
	}
}

/* ==========================================================================
   20. Command palette (Cmd+K / Ctrl+K)
   ========================================================================== */
.command-palette-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 21, 0.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-out-soft);
	z-index: 2000;
}
.command-palette-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.command-palette {
	position: fixed;
	top: 14vh;
	left: 50%;
	transform: translate(-50%, -16px);
	width: min(640px, calc(100vw - 2rem));
	z-index: 2001;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-out-soft),
		transform var(--duration-base) var(--ease-out-spring);
}
.command-palette.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.command-palette-inner {
	background: rgba(var(--surface-color-rgb), 0.96);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(var(--accent-color-rgb), 0.18);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-xl), 0 0 80px rgba(var(--accent-color-rgb), 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 70vh;
}

.command-palette-search {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.1);
}
.command-palette-search-icon {
	font-size: 1.1rem;
	color: var(--muted-color);
	flex-shrink: 0;
}
.command-palette-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	color: var(--heading-color);
	font-size: var(--text-base);
	font-family: var(--font-sans);
	padding: 0.25rem 0;
}
.command-palette-input::placeholder {
	color: var(--muted-color);
	opacity: 0.7;
}
.command-palette-kbd,
.command-palette-footer kbd {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 0.35rem;
	background: rgba(var(--accent-color-rgb), 0.08);
	color: var(--muted-color);
	border: 1px solid rgba(var(--accent-color-rgb), 0.12);
	box-shadow: 0 1px 0 rgba(var(--accent-color-rgb), 0.08);
}

.command-palette-results {
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	overflow-y: auto;
	flex: 1;
}

.command-palette-group {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-color);
	padding: 0.6rem 0.75rem 0.3rem;
}
.command-palette-group:first-child {
	padding-top: 0.2rem;
}

.command-palette-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.75rem;
	border-radius: var(--radius-control);
	cursor: pointer;
	color: var(--default-color);
	transition: background-color 80ms var(--ease-out-soft),
		color 80ms var(--ease-out-soft);
}
.command-palette-item.is-active {
	background: var(--gradient-brand);
	color: var(--contrast-color);
	box-shadow: 0 4px 14px rgba(var(--accent-color-rgb), 0.25);
}
.command-palette-item.is-active .command-palette-item-icon {
	color: var(--contrast-color);
}
.command-palette-item-icon {
	font-size: 1.05rem;
	color: var(--accent-color);
	flex-shrink: 0;
	width: 1.25rem;
	text-align: center;
}
.command-palette-item-label {
	font-size: var(--text-sm);
	font-weight: 500;
}

.command-palette-empty {
	padding: 1.25rem 0.75rem;
	color: var(--muted-color);
	text-align: center;
	font-size: var(--text-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

.command-palette-footer {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 0.55rem 1rem;
	border-top: 1px solid rgba(var(--accent-color-rgb), 0.1);
	font-size: 0.72rem;
	color: var(--muted-color);
	background: rgba(var(--accent-color-rgb), 0.03);
}
.command-palette-footer kbd {
	margin-right: 0.25rem;
}

@media (max-width: 575.98px) {
	.command-palette {
		top: 5vh;
		width: calc(100vw - 1rem);
	}
	.command-palette-inner {
		max-height: 88vh;
	}
	.command-palette-footer {
		display: none;
	}
}

body.command-palette-open {
	overflow: hidden;
}

/* ==========================================================================
   21. Header action buttons (search trigger, theme toggle, notification bell)
   ========================================================================== */
.header-nav .header-action-item {
	display: flex;
	align-items: center;
	margin-right: 0.25rem;
}

.header-nav .nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: auto;
	min-width: 38px;
	height: 38px;
	padding: 0 0.55rem;
	border-radius: var(--radius-control);
	border: 1px solid transparent;
	background: transparent;
	color: var(--default-color);
	font-size: 1.05rem;
	line-height: 1;
	position: relative;
	transition: background-color var(--duration-fast) var(--ease-out-soft),
		border-color var(--duration-fast) var(--ease-out-soft),
		color var(--duration-fast) var(--ease-out-soft);
}
.header-nav .nav-icon:hover,
.header-nav .nav-icon:focus-visible {
	background: rgba(var(--accent-color-rgb), 0.08);
	color: var(--accent-color);
	border-color: rgba(var(--accent-color-rgb), 0.18);
}
.header-nav .nav-icon i {
	font-size: 1.05rem;
}

/* Search trigger keyboard hint */
.header-search-trigger .header-search-kbd {
	display: inline-flex;
	align-items: center;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--muted-color);
	padding: 2px 6px;
	border-radius: 0.35rem;
	background: rgba(var(--accent-color-rgb), 0.08);
	border: 1px solid rgba(var(--accent-color-rgb), 0.12);
}
.header-search-trigger {
	min-width: 120px;
	justify-content: flex-start;
	padding-left: 0.6rem;
	padding-right: 0.4rem;
	color: var(--muted-color);
	background: rgba(var(--accent-color-rgb), 0.04);
	border-color: rgba(var(--accent-color-rgb), 0.1);
}
.header-search-trigger:hover {
	color: var(--accent-color);
}

/* Notification badge */
.header-nav .nav-icon .badge-number {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 0.65rem;
	line-height: 16px;
	font-weight: 700;
	border-radius: 50rem;
	background: var(--gradient-brand);
	color: var(--contrast-color);
	border: 2px solid var(--surface-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.header-nav .nav-icon .badge-number.bg-secondary,
.header-nav .nav-icon .badge-number.bg-primary {
	background: var(--gradient-brand) !important;
}

/* Notifications dropdown */
.header-nav .notifications {
	min-width: 320px;
	padding: 0;
}
.header-nav .notifications .dropdown-header {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-color);
	font-weight: 700;
	padding: 0.75rem 1rem 0.5rem;
}
.header-nav .notifications .notification-item {
	display: flex;
	gap: 0.7rem;
	padding: 0.6rem 0.85rem;
	border-radius: var(--radius-control);
	transition: background-color var(--duration-fast) var(--ease-out-soft);
}
.header-nav .notifications .notification-item:hover {
	background: rgba(var(--accent-color-rgb), 0.06);
}
.header-nav .notifications .dropdown-footer {
	padding: 0.5rem 0.5rem 0.25rem;
	text-align: center;
}
.header-nav .notifications .dropdown-footer a {
	display: inline-flex;
	gap: 0.35rem;
	color: var(--accent-color);
	font-weight: 600;
	font-size: var(--text-sm);
}

@media (max-width: 575.98px) {
	.header-search-trigger.d-md-none {
		min-width: 38px;
	}
	.header-search-trigger .header-search-kbd {
		display: none;
	}
	.header-nav .notifications {
		min-width: 280px;
	}
}

/* ==========================================================================
   22. Onboarding (single-screen, replaces 3-section scroll)
   ========================================================================== */
.onboarding-screen {
	max-width: 1080px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-2);
}

.onboarding-hero {
	text-align: center;
	padding: var(--space-8) var(--space-4) var(--space-6);
	margin-bottom: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--surface-color);
	background-image: var(--gradient-surface-soft),
		linear-gradient(
			135deg,
			rgba(var(--accent-color-rgb), 0.05),
			rgba(var(--secondary-color-rgb), 0.04)
		);
	border: 1px solid rgba(var(--accent-color-rgb), 0.12);
	box-shadow: var(--shadow-lg), 0 0 80px rgba(var(--accent-color-rgb), 0.06);
	position: relative;
	overflow: hidden;
}

.onboarding-eyebrow {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--accent-color);
	background: rgba(var(--accent-color-rgb), 0.1);
	border: 1px solid rgba(var(--accent-color-rgb), 0.18);
	border-radius: 50rem;
	padding: 0.4rem 0.85rem;
	margin-bottom: var(--space-4);
}

.onboarding-title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: var(--leading-tight);
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	margin: 0 0 var(--space-3) 0;
	max-width: 24ch;
	margin-left: auto;
	margin-right: auto;
}

.onboarding-lead {
	color: var(--default-color);
	font-size: var(--text-lg);
	max-width: 44rem;
	margin: 0 auto var(--space-5) auto;
	line-height: var(--leading-snug);
}

.onboarding-cta {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}

.onboarding-tabs {
	border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.12);
	margin-bottom: var(--space-5);
}
.onboarding-tabs .nav-link {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-base);
	padding: 0.6rem 1rem;
}

.onboarding-tab-content {
	min-height: 240px;
}

@media (max-width: 575.98px) {
	.onboarding-hero {
		padding: var(--space-6) var(--space-3) var(--space-4);
	}
	.onboarding-lead {
		font-size: var(--text-base);
	}
	.onboarding-eyebrow {
		font-size: 0.7rem;
	}
}

/* ==========================================================================
   N. Universal facelift (cross-page polish, applied automatically)
   --------------------------------------------------------------------------
   This block lifts the look-and-feel of the My Tasks page across all pages
   that use the standard .pagetitle / .section / .card scaffolding. It only
   targets shared chrome — never page-specific layout — so workflow-builder
   and page-editor canvases inherit the title/breadcrumb polish without any
   structural change.
   ========================================================================== */

/* Page title hero band ----------------------------------------------------- */
.pagetitle {
	position: relative;
	border-radius: var(--radius-card);
	padding: var(--space-5) var(--space-6);
	background: linear-gradient(
			135deg,
			rgba(var(--accent-color-rgb), 0.08),
			rgba(var(--secondary-color-rgb), 0.06) 60%,
			transparent
		),
		rgba(var(--surface-color-rgb), 0.78);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border: 1px solid rgba(var(--accent-color-rgb), 0.10);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	margin-bottom: var(--space-5);
}
.pagetitle::after {
	content: '';
	position: absolute;
	inset: -40% -20% auto auto;
	width: 280px;
	height: 280px;
	background: radial-gradient(
		circle at center,
		rgba(var(--accent-color-rgb), 0.14),
		transparent 65%
	);
	filter: blur(6px);
	pointer-events: none;
	animation: dw-hero-drift 22s ease-in-out infinite alternate;
}
.pagetitle h1 {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	margin-bottom: 4px;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

/* Optional subtitle paragraph inside .pagetitle — gives every page a hero
 * description like the My Tasks header. Pages opt in by adding a <p
 * class="pagetitle-sub"> after the breadcrumb. */
.pagetitle .pagetitle-sub {
	color: var(--muted-color);
	margin: var(--space-3) 0 0;
	max-width: 60ch;
	line-height: var(--leading-snug);
	font-size: var(--text-base);
}

/* Hide the breadcrumb nav inside the hero — the page title and subtitle
 * already orient the user. Sidebar and search remain the primary nav. */
.pagetitle > nav,
.pagetitle .breadcrumb {
	display: none;
}

/* Optional action row — place primary CTAs in the hero, right-aligned on
 * desktop, stacked under the title on small screens. */
.pagetitle {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--space-6);
	row-gap: var(--space-3);
}
.pagetitle > nav,
.pagetitle > h1,
.pagetitle > .pagetitle-sub {
	flex: 1 1 100%;
	min-width: 0;
	z-index: 1;
}
.pagetitle .pagetitle-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	margin-top: -2px;
	z-index: 2;
}
@media (max-width: 575.98px) {
	.pagetitle .pagetitle-actions {
		margin-left: 0;
		flex-wrap: wrap;
	}
}

@keyframes dw-hero-drift {
	from { transform: translate(0, 0); }
	to   { transform: translate(-30px, 20px); }
}

/* Card entry animation (staggered fade-up) -------------------------------- */
.section .card,
.section > .row > [class*='col-'] > .card {
	animation: dw-fade-up 480ms var(--ease-out-spring) both;
}
.section .card:nth-child(2) { animation-delay: 60ms; }
.section .card:nth-child(3) { animation-delay: 120ms; }
.section .card:nth-child(4) { animation-delay: 180ms; }
.section .card:nth-child(5) { animation-delay: 240ms; }

@keyframes dw-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Soft hover lift on cards (everywhere) ----------------------------------- */
.section .card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: rgba(var(--accent-color-rgb), 0.18);
}

/* Tables — softer hover, rounded surface --------------------------------- */
.section .card .table {
	margin-bottom: 0;
}
.section .card .table > :not(caption) > * > * {
	border-bottom-color: rgba(var(--accent-color-rgb), 0.06);
}
.section .card .table-hover > tbody > tr {
	transition: background-color var(--duration-fast) var(--ease-out-soft);
}
.section .card .table-hover > tbody > tr:hover > * {
	background-color: rgba(var(--accent-color-rgb), 0.05);
}

/* Toast container — re-skin to match the My Tasks toast feel -------------- */
.toast-container .toast {
	background: var(--surface-color);
	border: 1px solid rgba(var(--accent-color-rgb), 0.16);
	box-shadow: var(--shadow-lg);
	border-radius: 12px;
	color: var(--default-color);
	min-width: 260px;
	max-width: 380px;
}
.toast-container .toast .toast-content {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
}
.toast-container .toast .toast-icon { font-size: 1.1rem; }
.toast-container .toast .toast-message { flex: 1; min-width: 0; }
.toast-container .toast.toast-success { border-left: 4px solid #2ea552; }
.toast-container .toast.toast-success .toast-icon { color: #2ea552; }
.toast-container .toast.toast-danger  { border-left: 4px solid #d4374b; }
.toast-container .toast.toast-danger  .toast-icon { color: #d4374b; }
.toast-container .toast.toast-warning { border-left: 4px solid #d8800d; }
.toast-container .toast.toast-warning .toast-icon { color: #d8800d; }
.toast-container .toast.toast-info    { border-left: 4px solid var(--accent-color); }
.toast-container .toast.toast-info    .toast-icon { color: var(--accent-color); }

/* Confirmation modal (used by window.dwConfirm) -------------------------- */
.dw-confirm-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 21, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 10500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	animation: dw-fade-in 180ms var(--ease-out-soft) both;
}
.dw-confirm-card {
	position: relative;
	background: var(--surface-color);
	border-radius: 18px;
	box-shadow: var(--shadow-xl), 0 0 0 1px rgba(var(--accent-color-rgb), 0.06);
	border: 1px solid rgba(var(--accent-color-rgb), 0.12);
	max-width: 460px;
	width: 100%;
	padding: var(--space-6) var(--space-6) var(--space-5);
	animation: dw-pop-in 260ms var(--ease-out-spring) both;
	overflow: hidden;
}
.dw-confirm-card::after {
	content: '';
	position: absolute;
	inset: -50% -20% auto auto;
	width: 240px;
	height: 240px;
	background: radial-gradient(
		circle at center,
		rgba(var(--accent-color-rgb), 0.10),
		transparent 65%
	);
	pointer-events: none;
}
.dw-confirm-card > * { position: relative; z-index: 1; }
.dw-confirm-card h5 {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--heading-color);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}
.dw-confirm-card p {
	color: var(--muted-color);
	margin: 0 0 var(--space-5);
	line-height: var(--leading-snug);
	font-size: var(--text-sm);
}
.dw-confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.dw-confirm-actions .btn {
	min-width: 92px;
}
.dw-confirm-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	margin-bottom: var(--space-3);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.dw-confirm-icon.is-danger {
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.18), rgba(220, 53, 69, 0.08));
	color: #d4374b;
}
.dw-confirm-icon.is-warning {
	background: linear-gradient(135deg, rgba(241, 144, 31, 0.20), rgba(241, 144, 31, 0.08));
	color: #d8800d;
}
.dw-confirm-icon.is-info {
	background: var(--gradient-brand-soft);
	color: var(--accent-color);
}

@keyframes dw-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dw-pop-in {
	from { opacity: 0; transform: translateY(10px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reduced-motion safety net ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pagetitle::after { animation: none; }
	.section .card { animation: none; }
	.section .card:hover { transform: none; }
}

/* ==========================================================================
   N+1. Constellation background (decorative)
   --------------------------------------------------------------------------
   Auto-injected by main.js on every authenticated page. Sits behind every
   other element via fixed positioning + z-index 0, with pointer-events
   disabled so it never intercepts clicks. The script (constellation.js)
   skips itself entirely under `prefers-reduced-motion`, but we add a
   belt-and-braces media query here too so any in-flight groups stop
   animating immediately when the OS preference flips.
   ========================================================================== */
#constellation-bg,
#flow-lines-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
#flow-lines-bg canvas {
	width: 100%;
	height: 100%;
	display: block;
}
@media (prefers-reduced-motion: reduce) {
	#flow-lines-bg { opacity: 0.5; }
}
#constellation-bg svg,
#constellation-bg * {
	pointer-events: none;
}
.constellation-group {
	animation: dw-constellation-fade 5s ease-in-out forwards;
	opacity: 0.4;
}
[data-theme='dark'] .constellation-group {
	opacity: 0.55;
}
.constellation-path {
	stroke-width: 1.5px;
	fill: none;
	stroke-linecap: round;
	animation: dw-constellation-draw 2.5s ease-in-out forwards;
}
@keyframes dw-constellation-fade {
	0%, 100% { opacity: 0; }
	10%, 80% { opacity: var(--dw-constellation-opacity, 0.4); }
}
@keyframes dw-constellation-draw {
	0%   { stroke-dashoffset: var(--line-length); }
	100% { stroke-dashoffset: 0; }
}
[data-theme='dark'] {
	--dw-constellation-opacity: 0.55;
}
:root {
	--dw-constellation-opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
	#constellation-bg { display: none; }
}