/* ========================================
   @conduction/nextcloud-vue — Card Styles
   ======================================== */

/* Card Grid */
.cn-card-grid {
	display: grid;
	gap: calc(4 * var(--default-grid-baseline));
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	padding: 0.25rem;
}

/* Base Card */
.cn-card {
	background: var(--color-main-background);
	border-radius: var(--border-radius-large);
	padding: calc(5 * var(--default-grid-baseline));
	box-shadow: 0 2px 8px var(--color-box-shadow);
	min-height: 200px;
	transition: transform var(--animation-quick) ease-in-out;
	border: 1px solid var(--color-border);
}

.cn-card:hover {
	transform: scale(1.01);
	box-shadow: 0 4px 12px var(--color-box-shadow);
}

/* Card Header */
.cn-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(2 * var(--default-grid-baseline));
	margin-bottom: calc(3 * var(--default-grid-baseline));
	padding-bottom: calc(2 * var(--default-grid-baseline));
	border-bottom: 1px solid var(--color-border);
}

.cn-card-header h2,
.cn-card-header h3 {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--default-grid-baseline));
	margin: 0;
	color: var(--color-main-text);
}

.cn-card-header h2 { font-size: 1.2em; }
.cn-card-header h3 { font-size: 1.1em; }

/* Settings Card */
.cn-settings-card {
	background: var(--color-background-hover);
	border-radius: var(--border-radius-large);
	padding: calc(5 * var(--default-grid-baseline));
	margin-bottom: calc(5 * var(--default-grid-baseline));
}

.cn-settings-card h4 {
	margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
	color: var(--color-main-text);
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: calc(2 * var(--default-grid-baseline));
}

.cn-settings-card--collapsible h4 {
	cursor: pointer;
	user-select: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: color var(--animation-quick) ease;
	margin-bottom: 0;
}

.cn-settings-card--collapsible h4:hover {
	color: var(--color-primary-element);
}

.cn-settings-card__chevron {
	transition: transform var(--animation-slow) ease;
	color: var(--color-text-maxcontrast);
}

.cn-settings-card--collapsible h4:hover .cn-settings-card__chevron {
	color: var(--color-primary-element);
}

.cn-settings-card__content {
	padding-top: calc(4 * var(--default-grid-baseline));
}

/* Stat Grid */
.cn-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(3 * var(--default-grid-baseline));
	margin-bottom: calc(4 * var(--default-grid-baseline));
}

.cn-stat-item {
	display: flex;
	flex-direction: column;
	gap: var(--default-grid-baseline);
}

.cn-stat-label {
	color: var(--color-text-maxcontrast);
	font-size: 0.9em;
}

.cn-stat-value {
	font-size: 1.1em;
	font-weight: 600;
}

/* Backwards compatibility aliases */
.cardGrid { display: grid; gap: calc(4 * var(--default-grid-baseline)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: var(--color-main-background); border-radius: var(--border-radius-large); padding: calc(5 * var(--default-grid-baseline)); box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform var(--animation-quick) ease-in-out; border: 1px solid var(--color-border); }
.card:hover { transform: scale(1.01); box-shadow: 0 4px 12px var(--color-box-shadow); }
.cardHeader { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--default-grid-baseline)); margin-bottom: calc(3 * var(--default-grid-baseline)); padding-bottom: calc(2 * var(--default-grid-baseline)); border-bottom: 1px solid var(--color-border); }
.statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(3 * var(--default-grid-baseline)); margin-bottom: calc(4 * var(--default-grid-baseline)); }
.statItem { display: flex; flex-direction: column; gap: var(--default-grid-baseline); }
.statLabel { color: var(--color-text-maxcontrast); font-size: 0.9em; }
.statValue { font-size: 1.1em; font-weight: 600; }