/**
 * Dashboard shell — nav, sidebar, layout, welcome tour.
 */


/* Dashboard shell (my-dashboard.php) — sidebar, layout, subscription card */

body.dashboard-body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.dashboard-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	z-index: 1050;
	display: flex;
	align-items: left;
	justify-content: left;
}

.nav-container {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 2px;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.nav-container::-webkit-scrollbar {
	display: none;
}

/* Active state for nav buttons (btn-outline-primary) */
.nav-container button.active {
	background: var(--app-primary);
	color: var(--surface);
	border-color: var(--app-primary);
}

.nav-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	height: 100%;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	min-width: fit-content;
	position: relative;
}

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

.nav-tab.active {
	color: var(--app-primary);
	background: var(--bg);
}

.nav-tab.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--app-primary);
}

.nav-tab i {
	font-size: 14px;
}

.nav-tab span {
	font-size: 13px;
}

.dashboard-content {
	margin-top: 48px;
	height: calc(100vh - 48px);
	height: calc(100svh - 48px);
	width: 100%;
}

/* --- Dashboard with left sidebar (my-dashboard.php) --- */
.dashboard-with-sidebar .dashboard-content {
	margin-top: 0;
	height: 100%;
	flex: 1;
	min-width: 0;
	background: var(--sidebar-bg);
}

.dashboard-content.dashboard-content--with-fy {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.dashboard-fy-bar {
	flex-shrink: 0;
	z-index: 2;
	background-color: var(--surface);
}

.dashboard-iframe-wrap {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.dashboard-iframe-wrap iframe {
	flex: 1;
	min-height: 0;
	width: 100%;
	border: 0;
}

.dashboard-layout {
	display: flex;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.dashboard-sidebar {
	width: 260px;
	min-width: 260px;
	min-height: 0;
	background: var(--sidebar-bg);
	border-right: 1px solid rgba(36, 59, 58, 0.14);
	display: flex;
	flex-direction: column;
	transition: width 0.2s ease, min-width 0.2s ease;
	flex-shrink: 0;
	z-index: 1050;
	font-family: var(--font-family);
}

.dashboard-sidebar.collapsed {
	width: 3.5rem;
	min-width: 3.5rem;
}

.dashboard-sidebar.collapsed .sidebar-brand,
.dashboard-sidebar.collapsed .nav-label {
	opacity: 0;
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}

.dashboard-sidebar.collapsed .sidebar-brand-wrap .sidebar-brand {
	display: none;
}

/* Collapsed header: stack logo and toggle vertically so they don’t merge */
.dashboard-sidebar.collapsed .sidebar-header {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 12px 8px;
	min-height: 0;
}

.dashboard-sidebar.collapsed .sidebar-brand-wrap {
	justify-content: center;
	width: 100%;
}

.dashboard-sidebar.collapsed .sidebar-logo-mark {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	font-size: 11px;
}

.dashboard-sidebar.collapsed .sidebar-toggle {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 12px;
}

.dashboard-sidebar.collapsed .sidebar-header__actions {
	flex-direction: column;
	gap: 8px;
	width: 100%;
	align-items: center;
}

.dashboard-sidebar.collapsed .sidebar-support-btn {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 12px;
}

.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(36, 59, 58, 0.14);
	min-height: 60px;
}

.sidebar-logo-mark {
	width: 32px;
	height: 32px;
	border-radius: var(--radius, 8px);
	background: var(--accent);
	color: var(--sidebar-bg);
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	letter-spacing: -0.02em;
}

.sidebar-header-logo {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: var(--radius-sm, 8px);
	flex-shrink: 0;
	background: var(--surface, #fff);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e8ecef) 85%, transparent);
}

.dashboard-sidebar.collapsed .sidebar-header-logo {
	width: 28px;
	height: 28px;
}

.sidebar-brand-wrap {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sidebar-brand {
	font-size: 15px;
	font-weight: 600;
	color: var(--sidebar-text);
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.sidebar-toggle {
	color: var(--sidebar-text);
	background: rgba(36, 59, 58, 0.08);
	border: 1px solid rgba(36, 59, 58, 0.18);
	padding: 6px 10px;
	border-radius: var(--radius, 8px);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.sidebar-toggle:hover {
	color: var(--text-dark);
	background: rgba(36, 59, 58, 0.14);
}

.sidebar-user {
	flex-shrink: 0;
	padding: 12px;
}

.sidebar-user-card {
	background: rgba(36, 59, 58, 0.04);
	border: 1px solid rgba(36, 59, 58, 0.14);
	border-radius: var(--radius, 12px);
	padding: 12px;
}

.sidebar-welcome {
	font-size: 14px;
	font-weight: 600;
	color: var(--sidebar-text);
}

.sidebar-subscription {
	font-size: 13px;
	color: var(--sidebar-text);
}

.subscription-progress-bar {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
	width: 100%;
	height: 4px;
	min-width: 0;
	box-sizing: border-box;
	background: rgba(36, 59, 58, 0.15);
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
}

.subscription-progress-fill {
	flex: 0 0 auto;
	max-width: 100%;
	height: 100%;
	min-width: 0;
	border-radius: 999px;
	transition: width 0.25s ease;
	transform-origin: right center;
}

.subscription-progress-fill-success { color: var(--progress-success); }
.subscription-progress-fill-warning { color: var(--progress-warning); }
.subscription-progress-fill-danger { color: var(--progress-danger); }

.subscription-progress-fill-success { background: var(--progress-success); }
.subscription-progress-fill-warning { background: var(--progress-warning); }
.subscription-progress-fill-danger { background: var(--progress-danger); }

.subscription-progress-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	direction: ltr;
	width: 100%;
	min-width: 0;
}

.subscription-progress-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 11px;
}

.subscription-progress-label {
	color: var(--sidebar-text);
	opacity: 0.85;
	font-weight: 600;
}

.subscription-progress-value {
	color: var(--text-dark);
	font-weight: 700;
}

.subscription-days {
	color: var(--sidebar-text);
	font-weight: 600;
}

.subscription-warning-icon {
	color: var(--warning);
	font-size: 12px;
	line-height: 1;
	display: inline-block;
}

.sidebar-user-card .btn-outline-danger {
	background: rgba(220, 53, 69, 0.2);
	border-color: rgba(220, 53, 69, 0.4);
	color: var(--danger-soft-text);
}

.sidebar-user-card .btn-outline-danger:hover {
	background: rgba(220, 53, 69, 0.35);
	border-color: rgba(220, 53, 69, 0.5);
	color: var(--surface);
}

.sidebar-logout-link {
	color: var(--progress-danger);
}

.sidebar-logout-link:hover,
.sidebar-logout-link:focus-visible {
	color: color-mix(in srgb, var(--progress-danger) 85%, var(--text-dark));
	background: rgba(220, 53, 69, 0.12);
}

/* Collapsed: hide subscription duration text */
.dashboard-sidebar.collapsed .subscription-days {
	display: none !important;
}

/* Collapsed: hide text in user card — entire block hidden on app dashboard */
.dashboard-sidebar.collapsed .sidebar-user .sidebar-welcome,
.dashboard-sidebar.collapsed .sidebar-user .sidebar-subscription,
.dashboard-sidebar.collapsed .sidebar-user .nav-label,
.dashboard-sidebar.collapsed .sidebar-user-card .sidebar-welcome,
.dashboard-sidebar.collapsed .sidebar-user-card .subscription-progress-wrap,
.dashboard-sidebar.collapsed .sidebar-user-card .dashboard-fy-bar,
.dashboard-sidebar.collapsed .sidebar-user-card .btn .nav-label {
	opacity: 0;
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	display: none !important;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-user {
	display: none;
	padding: 0;
	margin: 0;
	border: 0;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-user-card {
	display: none;
}

/* Collapsed: user block (legacy non-app pages only) */
.dashboard-sidebar.collapsed .sidebar-user {
	padding: 10px 8px;
	margin-top: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid rgba(36, 59, 58, 0.2);
	flex-shrink: 0;
}

.dashboard-sidebar.collapsed .sidebar-user-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px;
	width: 100%;
	min-height: 0;
}

.dashboard-sidebar.collapsed .sidebar-user .btn,
.dashboard-sidebar.collapsed .sidebar-user-card .btn {
	padding: 8px;
	min-width: 36px;
	width: 36px;
	justify-content: center;
	align-items: center;
}

.dashboard-sidebar.collapsed .sidebar-user .btn .nav-label,
.dashboard-sidebar.collapsed .sidebar-user-card .btn .nav-label {
	display: none !important;
}

.dashboard-sidebar.collapsed .sidebar-user-card .btn i {
	margin: 0 !important;
}

.sidebar-nav {
	display: flex;
	flex-direction: column;
	padding: 0;
	gap: 0;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.sidebar-nav-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 0 6px;
}

.sidebar-nav-scroll::-webkit-scrollbar {
	display: none;
}

.sidebar-nav-group-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--sidebar-text);
	opacity: 0.7;
	padding: 10px 16px 4px;
	margin: 0 8px;
	text-transform: uppercase;
}

.sidebar-nav-divider {
	height: 1px;
	background: rgba(36, 59, 58, 0.14);
	margin: 6px 12px;
	flex-shrink: 0;
}

/* Nav row visuals: assets/css/sidebar-unified.css (.osinv-nav-link + .sidebar-nav-item hook for JS) */

.dashboard-sidebar.collapsed .sidebar-nav-group-label {
	opacity: 0;
	width: 0;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.dashboard-sidebar.collapsed .sidebar-nav-divider {
	margin: 6px 8px;
}

.nav-label {
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
	.dashboard-sidebar {
		width: 52px;
		min-width: 52px;
	}

	.dashboard-sidebar .sidebar-brand,
	.dashboard-sidebar .nav-label {
		opacity: 0;
		width: 0;
		overflow: hidden;
		white-space: nowrap;
		padding: 0;
		margin: 0;
	}

	.dashboard-sidebar .sidebar-header {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
	}

	.dashboard-sidebar .osinv-nav-group-summary {
		justify-content: center;
		padding-left: 0.15rem;
		padding-right: 0.15rem;
	}

	.dashboard-sidebar .osinv-nav-group-chevron {
		display: none !important;
	}

	.dashboard-sidebar .osinv-nav-group-links {
		padding-left: 0;
	}

	.dashboard-sidebar .osinv-nav-link {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
		margin: 0 6px;
	}
}

/* Mobile optimizations */
@media (max-width: 768px) {
	.dashboard-navbar {
		height: 44px;
	}

	body:not(.dashboard-with-sidebar) .dashboard-content {
		margin-top: 44px;
		height: calc(100vh - 44px);
		height: calc(100svh - 44px);
	}

	.nav-tab {
		padding: 6px 12px;
		font-size: 12px;
		gap: 4px;
	}

	.nav-tab i {
		font-size: 13px;
	}

	.nav-tab span {
		font-size: 12px;
	}
}

@media (max-width: 575.98px) {
	.nav-tab span {
		display: none;
	}

	.nav-tab {
		padding: 8px 16px;
		min-width: 48px;
	}

	.nav-tab i {
		font-size: 16px;
	}
}

/* App dashboard sidebar — scoped to my-dashboard.php only */

.dashboard-with-sidebar .dashboard-sidebar {
	display: flex;
	flex-direction: column;
	width: 17.5rem;
	min-width: 17.5rem;
	background: var(--sidebar-bg);
	border-right: 1px solid color-mix(in srgb, var(--sidebar-text) 12%, transparent);
	box-shadow: 1px 0 0 color-mix(in srgb, var(--surface) 80%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	padding: 0.85rem 0.9rem;
	min-height: 3.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
	background: color-mix(in srgb, var(--surface) 55%, var(--sidebar-bg));
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-brand-wrap {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
	flex: 1;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-logo-mark {
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--surface);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 25%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-header-logo {
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-sm);
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-brand {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--sidebar-text);
	letter-spacing: -0.01em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0;
	border-radius: var(--radius-sm);
	border: 1px solid color-mix(in srgb, var(--sidebar-text) 14%, transparent);
	background: var(--surface);
	color: color-mix(in srgb, var(--sidebar-text) 75%, transparent);
	flex-shrink: 0;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-toggle:hover {
	background: color-mix(in srgb, var(--sidebar-hover) 80%, var(--surface));
	color: var(--sidebar-text);
	border-color: color-mix(in srgb, var(--sidebar-text) 22%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-support-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0;
	border-radius: var(--radius-sm);
	border: 1px solid color-mix(in srgb, var(--sidebar-text) 14%, transparent);
	background: var(--surface);
	color: color-mix(in srgb, var(--sidebar-text) 75%, transparent);
	flex-shrink: 0;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-support-btn:hover,
.dashboard-with-sidebar .dashboard-sidebar .sidebar-support-btn.is-active {
	background: color-mix(in srgb, var(--sidebar-hover) 80%, var(--surface));
	color: var(--primary-mid);
	border-color: color-mix(in srgb, var(--primary-mid) 35%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-user {
	padding: 0.625rem 0.625rem 0.625rem;
	flex-shrink: 0;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-user-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem;
	border: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
	border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: none;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-welcome {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--sidebar-text);
	line-height: 1.3;
	margin: 0 !important;
}

.dashboard-with-sidebar .dashboard-sidebar .subscription-progress-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	margin: 0;
	width: 100%;
	min-width: 0;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-user-card .dashboard-fy-bar {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 0;
	height: auto;
	background: transparent;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-user-card .dashboard-fy-bar[hidden] {
	display: none !important;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-user-card .fiscal-year-toolbar--compact {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.3125rem;
	width: 100%;
	margin: 0;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-user-card .fiscal-year-toolbar--compact .fiscal-year-toolbar__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--sidebar-text) 68%, transparent);
	line-height: 1.25;
	letter-spacing: 0.01em;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-user-card .fiscal-year-toolbar--compact .fiscal-year-toolbar__select.form-select,
.dashboard-with-sidebar .dashboard-sidebar .sidebar-user-card .fiscal-year-toolbar--compact select.fiscal-year-toolbar__select.form-select-sm {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	height: auto;
	min-height: var(--field-min-height-sm);
	padding: var(--field-padding-y-sm) var(--field-select-padding-right-sm) var(--field-padding-y-sm) var(--field-padding-x-sm);
	margin: 0;
	font-size: var(--field-font-size-sm);
	font-weight: 600;
	line-height: var(--field-line-height);
	color: var(--sidebar-text);
	background-color: color-mix(in srgb, var(--sidebar-text) 4%, var(--surface));
	border: 1px solid color-mix(in srgb, var(--sidebar-text) 12%, transparent);
	border-radius: var(--radius-xs);
	background-position: right var(--field-padding-x-sm) center;
	background-size: 12px 8px;
}

.dashboard-with-sidebar .dashboard-sidebar .subscription-progress-meta {
	font-size: 0.6875rem;
}

.dashboard-with-sidebar .dashboard-sidebar .subscription-progress-label {
	font-weight: 600;
	opacity: 0.72;
}

.dashboard-with-sidebar .dashboard-sidebar .subscription-progress-value {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--sidebar-text);
}

.dashboard-with-sidebar .dashboard-sidebar .subscription-progress-bar {
	height: 5px;
	background: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav {
	flex: 1;
	min-height: 0;
	padding: 0;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-scroll {
	padding: 0.4rem 0.55rem 0.85rem;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--sidebar-text) 18%, transparent) transparent;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-scroll::-webkit-scrollbar {
	width: 5px;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-scroll::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--sidebar-text) 16%, transparent);
	border-radius: 999px;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--sidebar-text) 28%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-group {
	margin: 0 0 0.35rem;
	border-bottom: none;
	border-radius: var(--radius-sm);
	background: transparent;
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-group-summary {
	padding: 0.5rem 0.55rem 0.4rem;
	margin: 0.15rem 0 0;
	border-radius: var(--radius-sm);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--sidebar-text) 58%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-group-summary:hover {
	background: color-mix(in srgb, var(--sidebar-hover) 65%, transparent);
	color: color-mix(in srgb, var(--sidebar-text) 82%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-group-icon {
	font-size: var(--icon-size);
	opacity: 1;
	color: var(--sidebar-active-text);
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-group-chevron {
	font-size: 0.5rem;
	opacity: 0.38;
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-group-links {
	padding: 0.1rem 0.2rem 0.35rem 0.35rem;
	gap: var(--osinv-sidebar-link-gap, 0.25rem);
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-subgroup {
	display: flex;
	flex-direction: column;
	gap: var(--osinv-sidebar-link-gap, 0.25rem);
	padding: 0.15rem 0 0.25rem;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-group-label {
	margin: 0;
	padding: 0.55rem 0.55rem 0.25rem 0.65rem;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--sidebar-text) 48%, transparent);
	opacity: 1;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-divider {
	height: 1px;
	margin: 0.35rem 0.65rem 0.25rem;
	background: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-link {
	padding: 0.45rem 0.55rem 0.45rem 0.65rem;
	margin: 0;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-subgroup .osinv-nav-link {
	padding-left: 0.85rem;
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-link-icon {
	font-size: var(--icon-size);
	opacity: 0.68;
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-link.active {
	background: var(--sidebar-active);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-link.active .osinv-nav-link-icon {
	opacity: 1;
	color: var(--sidebar-active-text);
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-group-title {
	text-transform: uppercase;
}

.dashboard-with-sidebar .dashboard-sidebar .osinv-nav-group-links .nav-label {
	text-transform: uppercase;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-nav-group-label {
	text-transform: uppercase;
}

.dashboard-with-sidebar .dashboard-sidebar .sidebar-logout-link {
	margin-top: 0.15rem;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed {
	width: 3.5rem;
	min-width: 3.5rem;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-header {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0.5rem 0.35rem 0.6rem;
	gap: 0.45rem;
	min-height: 0;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-brand-wrap {
	flex: 0 0 auto;
	width: auto;
	justify-content: center;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-logo-mark {
	width: 2rem;
	height: 2rem;
	font-size: 0.6875rem;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-header-logo {
	width: 2rem;
	height: 2rem;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-header__actions {
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-toggle,
.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-support-btn {
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-user {
	display: none;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-user-card {
	display: none;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-nav-scroll {
	padding: 0.25rem 0 0.65rem;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .osinv-nav-group-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 0;
	padding-right: 0;
	gap: 0.2rem;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .osinv-nav-link {
	box-sizing: border-box;
	width: 2.25rem;
	min-width: 2.25rem;
	max-width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	margin: 0 auto;
	justify-content: center;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .osinv-nav-link-icon {
	margin: 0;
}

.dashboard-with-sidebar .dashboard-sidebar.collapsed .sidebar-nav-subgroup .osinv-nav-link {
	padding-left: 0;
}

@media (max-width: 768px) {
	.dashboard-with-sidebar .dashboard-sidebar {
		width: 3.5rem;
		min-width: 3.5rem;
	}
}

/* Dashboard shell (my-dashboard.php) — one page scrollbar only (viewport) */

.dashboard-shell {
	--dashboard-shell-header-height: 3.625rem;
}

body.dashboard-body.dashboard-shell {
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--sidebar-bg) !important;
}

.dashboard-shell .dashboard-layout {
	display: flex;
	min-height: 100vh;
	min-height: 100svh;
	height: auto;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	align-items: flex-start;
}

.dashboard-shell .dashboard-layout.osinv-support-chat-open {
	min-height: 0;
	height: 100%;
}

.dashboard-shell .dashboard-layout.osinv-support-chat-open .dashboard-content {
	flex: 1 1 0%;
	min-width: 0;
	max-width: 100%;
}

.dashboard-shell .dashboard-sidebar {
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	height: 100svh;
	max-height: 100vh;
	max-height: 100svh;
	min-height: 0;
	overflow: hidden;
}

.dashboard-shell.dashboard-with-sidebar .dashboard-content {
	height: auto;
	min-height: 0;
	min-width: 0;
	max-width: 100%;
	overflow: visible;
	flex: 1 1 0%;
	container-type: inline-size;
	container-name: dashboard-main;
}

.dashboard-shell #dashboard-home-panel {
	min-width: 0;
	width: 100%;
	max-width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.dashboard-shell.dashboard-with-sidebar .dashboard-sidebar:not(.collapsed) .sidebar-header {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--dashboard-shell-header-height);
	height: var(--dashboard-shell-header-height);
}

.dashboard-shell.dashboard-with-sidebar .dashboard-sidebar:not(.collapsed) .sidebar-header {
	padding-block: 0;
	padding-inline: 0.9rem;
}

.dashboard-shell .dashboard-content {
	display: flex;
	flex-direction: column;
	overflow: visible;
	min-height: 0;
	height: auto;
	flex: 1 1 0%;
}

.dashboard-shell .dashboard-iframe-wrap {
	flex: 0 0 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--sidebar-bg);
	overflow: visible;
}

.dashboard-shell.dashboard-shell--razorpay-active .sidebar-user-card .dashboard-fy-bar {
	visibility: hidden;
	pointer-events: none;
}

.dashboard-shell .dashboard-iframe-wrap iframe {
	flex: 0 0 auto;
	min-height: 200px;
	width: 100%;
	border: 0;
	border-radius: 0;
	background: var(--surface);
	box-shadow: none;
	display: block;
	overflow: visible;
}

.dashboard-shell .dashboard-iframe-wrap:has(iframe[src*="payment/checkout"]),
.dashboard-shell .dashboard-iframe-wrap:has(iframe[src*="subscription-expired"]) {
	background: var(--surface);
}

.dashboard-shell.dashboard-shell--embed-light,
.dashboard-shell.dashboard-shell--embed-light.dashboard-body {
	background: var(--surface) !important;
}

.dashboard-shell.dashboard-shell--embed-light .dashboard-content,
.dashboard-shell.dashboard-shell--embed-light .dashboard-iframe-wrap {
	background: var(--surface) !important;
}

.dashboard-shell.dashboard-shell--embed-light .dashboard-iframe-wrap iframe {
	background: var(--surface);
}

.dashboard-shell.dashboard-shell--razorpay-active .dashboard-sidebar {
	z-index: 1;
}

.dashboard-shell.dashboard-shell--razorpay-active .dashboard-iframe-wrap {
	position: fixed;
	inset: 0;
	z-index: 10050;
	background: var(--surface);
	padding: 0;
	margin: 0;
}

.dashboard-shell.dashboard-shell--razorpay-active .dashboard-iframe-wrap iframe {
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: none !important;
}

@media (max-width: 991.98px) {
	.dashboard-shell .dashboard-iframe-wrap {
		padding: 0;
	}

	.dashboard-shell .dashboard-iframe-wrap iframe {
		border-radius: 0;
		box-shadow: none;
	}
}

/* One-time dashboard walkthrough: floating card over blurred dashboard */
.welcome-walkthrough-root {
	font-family: var(--font-family);
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 3vw, 1.5rem);
	pointer-events: none;
}

.welcome-wt-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(248, 250, 252, 0.28);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	pointer-events: auto;
}

/* Quick tour: sidebar stays sharp; card + blur scoped to main panel */
body.welcome-body-tour .dashboard-sidebar {
	position: relative;
	z-index: 1080;
}

body.welcome-body-tour .welcome-walkthrough-root {
	z-index: 1070;
	display: grid;
	grid-template-columns: 17.5rem minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	align-items: stretch;
	justify-items: stretch;
	padding: 0;
}

body.welcome-body-tour:has(.dashboard-sidebar.collapsed) .welcome-walkthrough-root {
	grid-template-columns: 3.5rem minmax(0, 1fr);
}

body.welcome-body-tour .welcome-wt-backdrop {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	inset: auto;
	width: 100%;
	height: 100%;
	align-self: stretch;
	justify-self: stretch;
}

body.welcome-body-tour .welcome-wt-dialog {
	grid-column: 2;
	grid-row: 1;
	place-self: center;
	z-index: 2;
	width: min(30rem, calc(100% - 3rem));
	max-width: 30rem;
	margin: clamp(0.75rem, 3vw, 1.5rem);
}

@keyframes osinv-wt-pulse-card {
	0%,
	100% {
		background-color: var(--surface);
		border-color: var(--accent, #00c896);
		box-shadow:
			0 0 0 2px var(--accent, #00c896),
			0 0 0 5px rgba(0, 200, 150, 0.18);
	}

	50% {
		background-color: rgba(230, 250, 245, 0.72);
		border-color: var(--accent, #00c896);
		box-shadow:
			0 0 0 2px var(--accent, #00c896),
			0 0 0 9px rgba(0, 200, 150, 0.34);
	}
}

body.welcome-body-tour .sidebar-user-card.osinv-wt-pulse {
	animation: osinv-wt-pulse-card 1.15s ease-in-out infinite;
}

body.welcome-body-tour .sidebar-nav-item.osinv-wt-pulse,
body.welcome-body-tour .sidebar-logout-link.osinv-wt-pulse {
	background-color: rgba(0, 200, 150, 0.16) !important;
	color: var(--sidebar-active-text, var(--primary));
	box-shadow:
		0 0 0 2px var(--accent, #00c896),
		0 0 0 6px rgba(0, 200, 150, 0.2);
}

@keyframes osinv-wt-pulse-ring {
	0%,
	100% {
		box-shadow:
			0 0 0 2px var(--accent, #00c896),
			0 0 0 5px rgba(0, 200, 150, 0.18);
	}

	50% {
		box-shadow:
			0 0 0 2px var(--accent, #00c896),
			0 0 0 9px rgba(0, 200, 150, 0.34);
	}
}

body.welcome-body-tour .sidebar-nav-item.osinv-wt-pulse,
body.welcome-body-tour .sidebar-logout-link.osinv-wt-pulse {
	animation: osinv-wt-pulse-ring 1.1s ease-in-out infinite;
}

.welcome-wt-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 30rem;
	height: 26rem;
	max-height: calc(100% - 1.5rem);
	pointer-events: auto;
	text-align: left;
}

.welcome-wt-panel {
	width: 100%;
	height: 100%;
	background: var(--surface);
	border: 1px solid rgba(var(--app-primary-rgb), 0.12);
	border-radius: var(--radius, 12px);
	box-shadow:
		0 4px 24px rgba(26, 74, 74, 0.08),
		0 16px 48px rgba(26, 74, 74, 0.1);
	padding: 1.15rem 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

body.welcome-body-tour {
	overflow: hidden;
}

/* Quick tour: desktop only (matches dashboard sidebar breakpoint) */
@media (max-width: 991.98px) {
	.welcome-walkthrough-root {
		display: none !important;
	}

	body.welcome-body-tour {
		overflow: auto;
	}
}

body.welcome-body-tour .welcome-page.welcome-page--tour {
	position: relative;
}

.welcome-wt-card-head {
	flex-shrink: 0;
}

.welcome-wt-skip {
	color: var(--text-muted, var(--text-muted));
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.welcome-wt-skip:hover,
.welcome-wt-skip:focus {
	color: var(--primary, var(--primary));
	text-decoration: underline;
}

.welcome-wt-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.welcome-wt-footer {
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(var(--app-primary-rgb), 0.08);
	margin-top: 0.5rem;
}

.welcome-wt-stepmeta {
	color: var(--text-muted, var(--text-muted));
	margin-bottom: 0;
}

.welcome-wt-eyebrow {
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--app-primary);
	font-size: 0.7rem;
}

.welcome-wt-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--primary, var(--primary));
	line-height: 1.3;
}

.welcome-wt-title.welcome-wt-title--lead {
	font-size: clamp(1.4rem, 2.8vw, 1.65rem);
}

.welcome-wt-points .welcome-wt-point {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	margin-bottom: 0.75rem;
	text-align: left;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-mid, var(--text-mid));
}

.welcome-wt-points .welcome-wt-point:last-child {
	margin-bottom: 0;
}

.welcome-wt-point-mark {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin-top: 0.5em;
	border-radius: 50%;
	background: var(--primary, var(--primary));
	box-shadow: 0 0 0 2px rgba(var(--app-primary-rgb), 0.2);
}

.welcome-wt-strong {
	color: var(--primary, var(--primary));
	font-weight: 600;
}

.welcome-wt-actions {
	justify-content: flex-start;
}

.welcome-walkthrough-root .welcome-wt-back {
	min-width: 2.25rem;
}

.welcome-walkthrough-root .welcome-wt-next {
	min-width: 2.25rem;
	background: var(--app-primary);
	border-color: var(--app-primary);
	color: var(--surface);
}

.welcome-walkthrough-root .welcome-wt-next:hover {
	background: var(--app-primary-hover, var(--primary));
	border-color: var(--app-primary-hover, var(--primary));
	color: var(--surface);
}

.welcome-walkthrough-root .welcome-wt-back:disabled {
	opacity: 0.35;
	pointer-events: none;
}

.welcome-page {
	margin: 0 auto;
	max-width: min(72rem, 100%);
	padding-inline: clamp(1rem, 2.5vw, 1.75rem);
	padding-block: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2rem);
	min-width: 0;
}

.dashboard-shell .dashboard-home-panel.welcome-page,
.dashboard-shell #dashboard-home-panel .welcome-page {
	max-width: none;
	margin: 0;
	width: 100%;
}

.welcome-page--embed {
	max-width: none;
}

@media (max-width: 991.98px) {
	.welcome-page.welcome-page--embed {
		padding-top: 0.75rem;
		padding-bottom: 1rem;
	}

	.welcome-page--embed .welcome-hero {
		padding-top: 1rem;
	}
}

#welcome-main-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

#welcome-main-content > .alert {
	margin: 0;
}

/* Greeting hero */
.welcome-overview {
	display: block;
	min-width: 0;
}

.welcome-hero {
	display: block;
	margin-bottom: 0;
	min-width: 0;
	width: 100%;
	padding: clamp(1.15rem, 0.9rem + 0.9vw, 1.65rem) clamp(1.15rem, 0.85rem + 1.2vw, 1.75rem);
	border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
	border-radius: var(--radius);
	background: linear-gradient(
		135deg,
		var(--primary) 0%,
		var(--primary-mid) 38%,
		color-mix(in srgb, var(--primary-light) 32%, var(--surface)) 62%,
		var(--surface) 100%
	);
	box-shadow: var(--shadow);
}

.welcome-hero__greeting {
	margin: 0 0 0.3rem;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent);
	line-height: 1.3;
}

.welcome-hero h1.welcome-hero__title {
	margin: 0;
	font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--surface);
	line-height: 1.22;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.welcome-hero__meta {
	margin: 0.4rem 0 0;
	font-size: 12px;
	color: color-mix(in srgb, var(--surface) 72%, var(--text-muted));
	line-height: 1.4;
}

.welcome-summary-widgets {
	margin-bottom: 0;
}

.welcome-summary-widgets .osinv-widget-row--stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}

body.dashboard-shell.osinv-support-chat-open .welcome-summary-widgets .osinv-widget-row--stats,
.dashboard-shell .dashboard-layout.osinv-support-chat-open .welcome-summary-widgets .osinv-widget-row--stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.welcome-summary-widgets .osinv-stat-widget {
	height: 100%;
	box-sizing: border-box;
}

.welcome-summary-widgets .osinv-stat-widget > div {
	flex: 1;
	min-width: 0;
}

.welcome-summary-widgets .osinv-stat-widget__value {
	font-size: clamp(1rem, 0.82rem + 0.45vw, 1.35rem);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.welcome-summary-widgets .osinv-stat-widget__hint {
	overflow-wrap: anywhere;
}

@container dashboard-main (max-width: 52rem) {
	.welcome-summary-widgets .osinv-widget-row--stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container dashboard-main (max-width: 30rem) {
	.welcome-summary-widgets .osinv-widget-row--stats {
		grid-template-columns: minmax(0, 1fr);
	}
}

.welcome-widget-section-head {
	margin-bottom: 0.75rem;
}

.welcome-widget-section-title {
	margin: 0 0 0.2rem;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-dark);
}

.welcome-widget-section-lede {
	margin: 0;
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.45;
}

.welcome-dashboard-widgets {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.welcome-dashboard-widgets__side {
	min-width: 0;
}

.dash-home-card {
	min-width: 0;
	padding: clamp(1rem, 0.85rem + 0.5vw, 1.2rem);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.dash-home-card__head {
	margin-bottom: 0.85rem;
}

.dash-home-card__head--split {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.dash-home-card__title {
	margin: 0 0 0.15rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.3;
}

.dash-home-card__lede {
	margin: 0;
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.45;
}

.dash-home-card__eyebrow {
	margin: 0 0 0.85rem;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	line-height: 1.3;
}

.dash-home-card__section + .dash-home-card__section {
	margin-top: 1.15rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--border);
}

.dash-home-card__section + .dash-home-card__section .dash-home-card__eyebrow {
	margin-top: 0;
}

.dash-home-link-btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.dash-home-recent-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dash-home-recent-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.dash-home-recent-table thead th {
	padding: 0 0 0.65rem;
	border-bottom: 1px solid var(--border);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	text-align: left;
	white-space: nowrap;
}

.dash-home-recent-table tbody td {
	padding: 0.72rem 0.85rem 0.72rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	vertical-align: middle;
}

.dash-home-recent-table tbody tr:last-child td {
	border-bottom: none;
	padding-bottom: 0;
}

.dash-home-recent-table tbody td:last-child,
.dash-home-recent-table thead th:last-child {
	padding-right: 0;
	text-align: right;
}

.dash-home-recent-row-btn {
	display: inline-block;
	padding: 0;
	border: none;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: var(--text-dark);
	text-align: left;
	cursor: pointer;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dash-home-recent-row-btn:hover,
.dash-home-recent-row-btn:focus-visible {
	color: var(--primary-mid);
	text-decoration: underline;
	outline: none;
}

.dash-home-recent-table__amount {
	font-weight: 700;
	color: var(--primary-mid);
	white-space: nowrap;
}

.dash-home-recent-table__date {
	color: var(--text-mid);
	white-space: nowrap;
}

.dash-home-recent-table .doc-list-status {
	font-size: 11px;
}

.dash-home-empty {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.5;
}

.dash-home-empty-link {
	font-size: inherit;
	font-weight: 600;
}

.dash-home-quick-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.dash-home-quick-action {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-width: 0;
	padding: 0.625rem 0.5rem;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

.dash-home-quick-action i {
	width: auto;
	font-size: 0.875rem;
	line-height: 1;
	flex-shrink: 0;
}

.dash-home-quick-action span {
	display: inline;
	min-width: 0;
}

.dash-home-quick-action--primary {
	border-color: var(--primary-mid);
	background: var(--primary-mid);
}

.dash-home-quick-action--primary:hover,
.dash-home-quick-action--primary:focus-visible {
	border-color: var(--primary);
	background: var(--primary);
}

.dash-home-collection {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.dash-home-collection__row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.dash-home-collection__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.dash-home-collection__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dark);
}

.dash-home-collection__percent {
	font-size: 13px;
	font-weight: 700;
}

.dash-home-collection__percent--success {
	color: var(--success);
}

.dash-home-collection__percent--warning {
	color: var(--warning);
}

.dash-home-collection__track {
	height: 0.45rem;
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--border) 65%, var(--surface));
	overflow: hidden;
}

.dash-home-collection__fill {
	height: 100%;
	border-radius: inherit;
	transition: width 0.35s ease;
}

.dash-home-collection__fill--success {
	background: var(--success);
}

.dash-home-collection__fill--warning {
	background: var(--warning);
}

.dash-home-collection__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--border);
}

.dash-home-collection__footer-label {
	font-size: 12px;
	color: var(--text-muted);
}

.dash-home-collection__footer-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-dark);
	white-space: nowrap;
}

@media (min-width: 992px) {
	.welcome-dashboard-widgets {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.12fr);
		gap: 1.15rem;
		align-items: start;
	}

	.welcome-dashboard-widgets--side-only {
		grid-template-columns: minmax(0, 24rem);
		justify-content: start;
	}
}

/* Reflow dashboard home when main column narrows (e.g. support chat open) */
@container dashboard-main (max-width: 68rem) {
	.welcome-dashboard-widgets {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 575.98px) {
	.dash-home-card__head--split {
		flex-direction: column;
		align-items: stretch;
	}

	.dash-home-link-btn {
		align-self: flex-start;
	}
}

.welcome-summary-widgets .osinv-stat-widget--action {
	width: 100%;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.welcome-summary-widgets .osinv-stat-widget--action:hover,
.welcome-summary-widgets .osinv-stat-widget--action:focus-visible {
	border-color: color-mix(in srgb, var(--primary-mid) 45%, var(--border));
	box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-mid) 12%, transparent);
	transform: translateY(-1px);
}

.welcome-summary-widgets .osinv-stat-widget--action:focus-visible {
	outline: 2px solid var(--primary-mid);
	outline-offset: 2px;
}

.welcome-summary-widgets .osinv-stat-widget__other-currency {
	margin-top: 0.55rem;
	padding-top: 0.55rem;
	border-top: 1px solid var(--border);
}

.welcome-summary-widgets .osinv-stat-widget__other-currency-amount {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.2;
}

.welcome-summary-widgets .osinv-stat-widget__other-currency-label {
	display: block;
	margin-top: 0.15rem;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-mid);
	line-height: 1.35;
}

.welcome-panel.welcome-card {
	border-radius: var(--radius);
	padding: clamp(1.15rem, 0.85rem + 1vw, 1.65rem) clamp(1.15rem, 0.85rem + 1.4vw, 2rem);
	animation: fadeInUp 0.5s ease forwards;
}

.welcome-card--elevated {
	box-shadow: var(--shadow);
}

.welcome-panel-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
}

.welcome-panel__primary,
.welcome-panel__secondary {
	min-width: 0;
}

.welcome-section-head {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.welcome-section-head--compact {
	margin-bottom: 0.85rem;
}

.welcome-section-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--accent);
}

.welcome-section-title__icon {
	font-size: 0.95rem;
	opacity: 0.92;
}

.welcome-section-lede {
	max-width: 28rem;
	line-height: 1.45;
}

.welcome-action-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.65rem;
}

.welcome-action-card {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	min-height: 5.25rem;
	padding: 0.85rem 0.95rem;
	border: 1px solid rgba(var(--app-primary-rgb), 0.08);
	border-radius: var(--radius-sm);
	background: var(--bg);
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.welcome-action-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 1 1 auto;
	min-width: 0;
}

.welcome-action-title {
	display: block;
	line-height: 1.25;
}

.welcome-action-desc {
	display: block;
	line-height: 1.4;
}

.welcome-action-chevron {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	color: var(--text-muted);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.welcome-action-card:hover,
.welcome-action-card:focus-visible {
	background: var(--surface);
	border-color: rgba(var(--app-primary-rgb), 0.14);
	box-shadow: var(--shadow);
	transform: translateY(-2px);
	outline: none;
}

.welcome-action-card:hover .welcome-action-chevron,
.welcome-action-card:focus-visible .welcome-action-chevron {
	opacity: 1;
	transform: translateX(0);
	background: rgba(var(--app-primary-rgb), 0.06);
}

.welcome-guide-list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 0.15rem;
}

.welcome-guide-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
	padding: 0.85rem 0 0.85rem 0.15rem;
	position: relative;
}

.welcome-guide-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0.95rem;
	top: 2.35rem;
	bottom: -0.15rem;
	width: 1px;
	background: linear-gradient(to bottom, rgba(var(--app-primary-rgb), 0.18), rgba(var(--app-primary-rgb), 0.06));
}

.welcome-guide-step__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 999px;
	border: 1px solid rgba(var(--app-primary-rgb), 0.12);
	background: var(--surface);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	position: relative;
	z-index: 1;
}

.welcome-guide-step__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-top: 0.1rem;
}

.welcome-action-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	font-size: 1.1rem;
	color: var(--surface);
}

.welcome-action-icon-teal {
	background: var(--app-primary);
}

.welcome-action-icon-blue {
	background: var(--primary-mid);
}

.welcome-action-icon-primary {
	background: var(--app-primary);
}

.welcome-action-icon-green {
	background: var(--success);
}

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

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (min-width: 768px) {
	.welcome-action-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.welcome-panel-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1.5rem, 2vw, 2.25rem);
		align-items: start;
	}

	.welcome-panel__secondary {
		padding-left: clamp(1rem, 1.5vw, 1.5rem);
		border-left: 1px solid var(--border);
	}
}

/* Login security banner: vertical center for message + close control */
.security-notice {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0.75rem 2.75rem 0.75rem 1rem !important;
	min-height: 3rem;
}

.security-notice-inner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 auto;
	min-width: 0;
}

.security-notice-icon {
	flex-shrink: 0;
	font-size: var(--icon-size);
	line-height: 1;
}

.security-notice-message {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
}

.security-notice .security-notice-close.btn-close {
	position: absolute;
	top: 50%;
	right: 0.65rem;
	transform: translateY(-50%);
	margin: 0;
	padding: 0.35rem;
	flex-shrink: 0;
}

/* sidebar-unified (merged) */
/**
 * Shared dark sidebar: collapsible groups + nav links (app dashboard + API reference).
 * Requires variables.css tokens (--sidebar-bg, --accent, --transition, etc.).
 * ui-modernise: Google Sans, FA solid icons in markup.
 */

:root {
	--osinv-sidebar-icon-col: var(--icon-size);
	--osinv-sidebar-row-pad-x: 0.5rem;
	--osinv-sidebar-row-pad-y: 0.4rem;
	--osinv-sidebar-group-pad-x: 0.5rem;
	--osinv-sidebar-link-gap: 0.25rem;
}

/* --- Collapsible groups (<details>) --- */
.osinv-nav-group {
	margin: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 12%, transparent);
}

.osinv-nav-group:last-child {
	border-bottom: none;
}

.osinv-nav-group-summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	padding: 0.5rem var(--osinv-sidebar-group-pad-x) 0.35rem;
	margin: 0;
	font-family: var(--font-family);
	font-size: 0.65625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--sidebar-text) 65%, transparent);
	transition: var(--transition);
	user-select: none;
}

.osinv-nav-group-summary::-webkit-details-marker {
	display: none;
}

.osinv-nav-group-icon {
	font-size: var(--icon-size);
	flex: 0 0 var(--osinv-sidebar-icon-col);
	width: var(--osinv-sidebar-icon-col);
	text-align: center;
	color: var(--sidebar-active-text);
	opacity: 0.88;
}

.osinv-nav-group-title {
	flex: 1;
	min-width: 0;
}

.osinv-nav-group-chevron {
	margin-left: auto;
	font-size: 0.55rem;
	opacity: 0.45;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.osinv-nav-group[open] > .osinv-nav-group-summary .osinv-nav-group-chevron {
	transform: rotate(180deg);
}

.osinv-nav-group-summary:hover {
	color: var(--text-dark);
}

.osinv-nav-group-links {
	display: flex;
	flex-direction: column;
	gap: var(--osinv-sidebar-link-gap);
	padding: 0 0 0.3rem;
}

.sidebar-nav-subgroup {
	display: flex;
	flex-direction: column;
	gap: var(--osinv-sidebar-link-gap);
}

/* --- Row links (button in app, <a> in API docs) --- */
.osinv-nav-link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 100%;
	padding: var(--osinv-sidebar-row-pad-y) var(--osinv-sidebar-row-pad-x)
		var(--osinv-sidebar-row-pad-y) var(--osinv-sidebar-group-pad-x);
	margin: 0;
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-family);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sidebar-text);
	background: transparent;
	opacity: 0.9;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition);
}

button.osinv-nav-link {
	font: inherit;
}

/* Anchor rows must be flex containers like <button> rows (otherwise width/padding look wrong) */
a.osinv-nav-link {
	display: flex;
	text-decoration: none;
}

/* API reference: beat Bootstrap .nav-link color/padding (sidebar loads after bootstrap) */
a.osinv-nav-link.nav-link {
	color: var(--sidebar-text);
}

.osinv-nav-link:hover {
	color: var(--text-dark);
	background: var(--sidebar-hover);
	opacity: 1;
}

.osinv-nav-link:focus-visible {
	outline: none;
	box-shadow: none;
}

.osinv-nav-link.active {
	color: var(--text-dark);
	background: var(--sidebar-active);
	opacity: 1;
}

.osinv-nav-link-icon {
	flex: 0 0 var(--osinv-sidebar-icon-col);
	width: var(--osinv-sidebar-icon-col);
	text-align: center;
	font-size: var(--icon-size);
	line-height: 1;
	opacity: 0.72;
	transition: var(--transition);
}

.osinv-nav-link > span {
	flex: 1;
	min-width: 0;
}

.osinv-nav-link.active .osinv-nav-link-icon {
	opacity: 1;
	color: var(--text-dark);
}

/* App: collapsed rail - hide group headers, show icon-only rows */
.dashboard-sidebar.collapsed .osinv-nav-group > .osinv-nav-group-summary {
	display: none;
}

.dashboard-sidebar.collapsed .osinv-nav-group {
	border-bottom: none;
}

.dashboard-sidebar.collapsed .osinv-nav-group-links {
	padding-left: 0;
	padding-bottom: 0.25rem;
	gap: var(--osinv-sidebar-link-gap);
}

.dashboard-sidebar.collapsed .osinv-nav-link {
	box-sizing: border-box;
	justify-content: center;
	width: 2.25rem;
	min-width: 2.25rem;
	max-width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}

.dashboard-sidebar.collapsed .osinv-nav-link .nav-label {
	display: none !important;
}

/* Mobile dashboard — FY bar above content (sidebar FY hidden below lg) */
@media (max-width: 991.98px) {
	.dashboard-mobile-fy-bar[hidden] {
		display: none !important;
	}
}