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

/* Detail Grid (metadata display) */
.cn-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: calc(4 * var(--default-grid-baseline));
	margin-bottom: calc(5 * var(--default-grid-baseline));
}

.cn-detail-item {
	display: flex;
	flex-direction: column;
	gap: var(--default-grid-baseline);
	padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
	border-left: 3px solid var(--color-primary-element);
	background: var(--color-background-hover);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.cn-detail-item__label {
	font-size: 0.85em;
	color: var(--color-text-maxcontrast);
	font-weight: 500;
}

.cn-detail-item__value {
	font-size: 1em;
	color: var(--color-main-text);
	word-break: break-word;
}

/* Detail Layout */
.cn-detail-layout {
	max-width: 1000px;
	padding: calc(5 * var(--default-grid-baseline));
}

.cn-detail-layout__header {
	display: flex;
	align-items: center;
	gap: calc(3 * var(--default-grid-baseline));
	margin-bottom: calc(6 * var(--default-grid-baseline));
}

.cn-detail-layout__title {
	flex: 1;
	margin: 0;
	font-size: 1.5em;
	color: var(--color-main-text);
}

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

.cn-detail-layout__content {
	margin-top: calc(4 * var(--default-grid-baseline));
}

/* Backwards compatibility aliases */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(4 * var(--default-grid-baseline)); margin-bottom: calc(5 * var(--default-grid-baseline)); }
.detail-item { display: flex; flex-direction: column; gap: var(--default-grid-baseline); padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline)); border-left: 3px solid var(--color-primary-element); background: var(--color-background-hover); border-radius: 0 var(--border-radius) var(--border-radius) 0; }
.detailContainer { margin-block-start: calc(5 * var(--default-grid-baseline)); margin-inline-start: calc(5 * var(--default-grid-baseline)); margin-inline-end: calc(5 * var(--default-grid-baseline)); }