/* Structured Overview Workspace Layout */
.overview-workspace {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.25rem 1.6rem 2.4rem;
	max-width: 1920px;
	margin: 0 auto;
}

.overview-workspace[data-density='compact'] {
	--ow-gap: .7rem;
	--ow-pad: .55rem 0.75rem;
}

.overview-workspace[data-density='comfortable'] {
	--ow-gap: 1rem;
	--ow-pad: .85rem 1rem;
}

.ow-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	padding-bottom: .6rem;
}

.ow-title {
	margin: 0;
	font-size: 1.55rem;
	font-weight: 600;
	letter-spacing: .5px;
	background: linear-gradient(90deg, var(--primary, #4aa8ff), #7f6bff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ow-sub {
	margin: .15rem 0 0;
	font-size: .8rem;
	color: var(--foreground-secondary, #9ba9b6);
	font-weight: 400;
}

.ow-controls {
	display: flex;
	align-items: center;
	gap: .65rem;
	flex-wrap: wrap;
}

.ow-period-switch {
	display: inline-flex;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: .7rem;
	overflow: hidden;
}

.period-btn {
	background: transparent;
	color: var(--foreground, #d9e4ec);
	border: 0;
	padding: .55rem .95rem;
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .05em;
	cursor: pointer;
	position: relative;
}

.period-btn.active {
	background: linear-gradient(90deg, var(--primary, #3d82ff), #6368ff);
	color: #fff;
}

.ow-btn {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .15);
	color: #fff;
	padding: .55rem .9rem;
	border-radius: .65rem;
	font-size: .65rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.ow-btn:hover {
	background: rgba(255, 255, 255, .12);
}

.ow-view-switch {
	display: flex;
	gap: .35rem;
	background: rgba(255, 255, 255, .05);
	padding: .3rem .45rem;
	border-radius: .6rem;
}

.view-switch {
	background: transparent;
	border: 0;
	color: var(--foreground-secondary, #a3b3c5);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .08em;
	padding: .45rem .65rem;
	border-radius: .5rem;
	cursor: pointer;
}

.view-switch[aria-pressed='true'] {
	background: linear-gradient(90deg, var(--primary, #3d82ff), #6368ff);
	color: #fff;
}

.ow-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4rem;
	align-items: start;
}

@media (max-width:1500px) {
	.ow-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width:1000px) {
	.ow-columns {
		grid-template-columns: 1fr;
	}
}

.ow-col {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	min-width: 0;
}

.ow-group {
	background: linear-gradient(155deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: 0 6px 22px -8px rgba(0, 0, 0, .55), 0 2px 8px -2px rgba(0, 0, 0, .4);
}

.ow-group.collapsed .ow-group-body {
	display: none;
}

.ow-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ow-pad);
	padding-bottom: .65rem;
	gap: .8rem;
}

.ow-group-head h2 {
	margin: 0;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--foreground, #e3edf5);
}

.ow-group-actions {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.grp-collapse {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	font-size: .7rem;
	padding: .35rem .6rem;
	border-radius: .55rem;
	cursor: pointer;
	font-weight: 600;
	line-height: 1;
}

.grp-collapse:hover {
	background: rgba(255, 255, 255, .12);
}

.ow-group-body {
	padding: calc(var(--ow-pad) + .2rem) calc(var(--ow-pad) + .35rem);
	padding-top: 0;
}

/* KPI grid adaptation inside new layout */
#kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: .85rem;
}

#kpi-grid .kpi-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: .85rem;
	padding: .7rem .75rem;
	min-height: 110px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}

#kpi-grid .kpi-card:hover {
	border-color: rgba(255, 255, 255, .25);
}

#kpi-grid .kpi-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .25rem;
}

#kpi-grid .kpi-title,
#kpi-grid .kpi-header h3 {
	font-size: .68rem;
	margin: 0;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--foreground-secondary, #b6c6d4);
}

#kpi-grid .kpi-value {
	font-size: 1.05rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: .5px;
}

#kpi-grid .kpi-delta {
	font-size: .58rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin-top: .15rem;
	color: var(--foreground-secondary, #99abbc);
}

/* Widgets mapped to new containers retain original IDs */
.dashboard-widget,
.ow-group-body>div {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: .9rem;
	padding: 1rem .95rem;
	margin: 0 0 .65rem;
}

.dashboard-widget .widget-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: .65rem;
}

.dashboard-widget .widget-title {
	margin: 0;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--foreground-secondary, #afc0ce);
}

.dashboard-widget.loading {
	opacity: .4;
	position: relative;
}

.dashboard-widget.loading:after {
	content: "";
	position: absolute;
	inset: 0;
	background: none !important;
	animation: none !important;
	mix-blend-mode: normal;
	border-radius: .9rem;
}

/* Prevent widgets from sliding under desktop sidebar; maintain a small logical gap */
@media (min-width:1025px) {
	.sidebar+.main-content .overview-workspace {
		padding-inline-start: max(var(--sidebar-gap, .75rem), 0px);
	}

	html[dir="rtl"] .sidebar+.main-content .overview-workspace {
		padding-inline-end: max(var(--sidebar-gap, .75rem), 0px);
	}
}

/* Mobile: full-bleed with safe padding; sidebar overlays, so no offset margin */
@media (max-width:1024px) {
	.sidebar+.main-content .overview-workspace {
		padding-inline: clamp(.6rem, 3.5vw, 1rem);
	}

	.dashboard-widget .widget-header {
		flex-wrap: wrap;
		gap: .5rem .65rem;
	}
}

/* Globally disable shimmer animation (owShimmer) */
@keyframes owShimmer {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 0 0;
	}
}

/* Preserve prior cash runway overrides & ensure no residual animations */
#cash-runway-widget.dashboard-widget.loading:after {
	display: none !important;
}

#cash-runway-widget * {
	animation: none !important;
}

/* Disable ALL animations & transitions on cash runway / forecast widgets (fallback safeguard) */
.forecast-widget,
.smart-forecast,
.forecast-chart,
#cashRunwayChart,
#cash-runway-widget,
#cash-runway-widget * {
	animation: none !important;
	transition: none !important;
}

.widget-card.smart-forecast {
	transition: none !important;
	transform: none !important;
}

/* Collapsed visual cue */
.ow-group.collapsed {
	background: rgba(255, 255, 255, .03);
}

.ow-group.collapsed .ow-group-head {
	padding-bottom: .4rem;
}

.ow-group.collapsed h2 {
	opacity: .65;
}

/* Density adjustments */
.overview-workspace[data-density='compact'] #kpi-grid .kpi-card {
	padding: .55rem .55rem;
	min-height: 96px;
}

.overview-workspace[data-density='compact'] .ow-group-head h2 {
	font-size: .72rem;
}

.overview-workspace[data-density='compact'] #kpi-grid .kpi-value {
	font-size: .95rem;
}