/* ========================================
   @conduction/nextcloud-vue — Layout & Filter Utility Styles
   ======================================== */

/* List View Layout */
.cn-list-layout {
	padding: calc(5 * var(--default-grid-baseline));
}

.cn-list-layout__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: calc(4 * var(--default-grid-baseline));
}

.cn-list-layout__title {
	display: flex;
	align-items: baseline;
	gap: calc(2 * var(--default-grid-baseline));
}

.cn-list-layout__title h2 {
	margin: 0;
	font-size: 1.4em;
	color: var(--color-main-text);
}

.cn-list-layout__title .cn-list-layout__count {
	font-size: 0.85em;
	color: var(--color-text-maxcontrast);
}

.cn-list-layout__actions {
	display: flex;
	gap: calc(2 * var(--default-grid-baseline));
}

/* Filter Bar */
.cn-filter-bar {
	display: flex;
	align-items: center;
	gap: calc(3 * var(--default-grid-baseline));
	margin-bottom: calc(4 * var(--default-grid-baseline));
	flex-wrap: wrap;
}

.cn-filter-bar__search {
	flex: 1;
	min-width: 200px;
	max-width: 400px;
}

.cn-filter-bar__filters {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--default-grid-baseline));
	flex-wrap: wrap;
}

.cn-filter-bar__filter {
	min-width: 150px;
	max-width: 200px;
}

.cn-filter-bar__clear {
	margin-left: auto;
}

/* Dashboard Content */
.cn-dashboard-content {
	margin-inline: auto;
	max-width: 1200px;
	padding-block: calc(5 * var(--default-grid-baseline));
	padding-inline: calc(5 * var(--default-grid-baseline));
}

/* Loading Container */
.cn-loading-container {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--default-grid-baseline));
	color: var(--color-text-maxcontrast);
	justify-content: center;
	padding-block: calc(10 * var(--default-grid-baseline));
}

/* Backwards compatibility aliases */
.dashboardContent { margin-inline: auto; max-width: 1200px; padding-block: calc(5 * var(--default-grid-baseline)); padding-inline: calc(5 * var(--default-grid-baseline)); }
.loadingContainer { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); color: var(--color-text-maxcontrast); justify-content: center; padding-block: calc(10 * var(--default-grid-baseline)); }