/* @conduction/nextcloud-vue — Dashboard component styles */

/* Dashboard page layout */
.cn-dashboard-page {
	padding: 20px;
	max-width: 1400px;
}

/* Widget-wrapped grid items draw no chrome on the grid cell itself — the inner
   .cn-widget-wrapper already provides the rounded border, background and shadow.
   Leaving the cell a white square with a 1px border makes square corners peek out
   behind the wrapper's 16px rounding. Mirrors the .cn-detail-page__grid reset in
   detail-page.css. This is a global stylesheet, not a scoped SFC block, so the
   descendant selector is written plainly — a Vue deep-selector wrapper here is
   invalid CSS and the whole rule gets dropped. */
.cn-dashboard-grid .grid-stack-item-content:has(.cn-widget-wrapper) {
	border: none;
	background: transparent;
	box-shadow: none;
}

/* Dashboard widget content area */
.cn-dashboard-widget-content {
	padding: 16px;
}

/* Dashboard KPI row inside grid */
.cn-dashboard-kpi-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	height: 100%;
}

/* Dashboard chart container */
.cn-dashboard-chart {
	padding: 16px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.cn-dashboard-chart__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
}

.cn-dashboard-chart__content {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

/* Dashboard list widget */
.cn-dashboard-list {
	padding: 0;
	margin: 0;
	list-style: none;
}

.cn-dashboard-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	cursor: pointer;
	border-bottom: 1px solid var(--color-border-dark);
}

.cn-dashboard-list__item:last-child {
	border-bottom: none;
}

.cn-dashboard-list__item:hover {
	background: var(--color-background-hover);
}