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

.cn-detail-page {
	margin-inline: auto;
	padding: calc(5 * var(--default-grid-baseline));
	position: relative;
}

/* Header */
.cn-detail-page__header {
	display: flex;
	justify-content: space-between;
	/* Pin the action surface to the TOP-right (not vertically centred against a
	   tall header) so actions always sit on the title row. */
	align-items: flex-start;
	margin-bottom: calc(4 * var(--default-grid-baseline));
	/* Keep actions on the same row — the header content shrinks (min-width:0
	   on the first child below) rather than wrapping actions onto a new line. */
	flex-wrap: nowrap;
	gap: calc(4 * var(--default-grid-baseline));
	/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
	   positioned at the left edge of .app-content) plus 12px breathing
	   room. Only the HEADER shifts right — body content keeps full width. */
	padding-inline-start: 56px;
}

/* Header content block (#header slot / default left block) takes the remaining
   width and may shrink so the actions stay top-right. */
.cn-detail-page__header > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.cn-detail-page__header-left {
	display: flex;
	align-items: center;
	gap: calc(3 * var(--default-grid-baseline));
	min-width: 0;
}

.cn-detail-page__header-text {
	min-width: 0;
}

.cn-detail-page__icon {
	flex-shrink: 0;
}

.cn-detail-page__title-group {
	display: flex;
	align-items: baseline;
	gap: calc(3 * var(--default-grid-baseline));
	min-width: 0;
}

.cn-detail-page__type-eyebrow {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-text-maxcontrast);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cn-detail-page__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-main-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cn-detail-page__subtitle {
	font-size: 14px;
	color: var(--color-text-maxcontrast);
	white-space: nowrap;
}

.cn-detail-page__description {
	margin: 4px 0 0;
	font-size: var(--default-font-size);
	color: var(--color-text-maxcontrast);
}

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

/* Loading state */
.cn-detail-page__loading {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--default-grid-baseline));
	color: var(--color-text-maxcontrast);
	justify-content: center;
	padding-block: calc(8 * var(--default-grid-baseline));
}

/* Error state */
.cn-detail-page__error {
	padding: calc(8 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
}

/* Empty state */
.cn-detail-page__empty {
	padding: calc(8 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
}

/* Statistics table */
.cn-detail-page__stats {
	margin-bottom: calc(5 * var(--default-grid-baseline));
}

.cn-detail-page__section-title {
	margin: 0 0 calc(2 * var(--default-grid-baseline));
	font-size: 1.1em;
	font-weight: 600;
	color: var(--color-main-text);
}

.cn-detail-page__stats-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-main-background);
	border-radius: var(--border-radius-large);
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.cn-detail-page__stats-table thead th {
	padding: calc(1.5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
	text-align: left;
	font-weight: 600;
	font-size: 0.9em;
	color: var(--color-text-maxcontrast);
	background: var(--color-background-hover);
	border-bottom: 1px solid var(--color-border);
}

.cn-detail-page__stats-row--sub td {
	color: var(--color-text-maxcontrast);
	font-size: 0.9em;
}

.cn-detail-page__stats-table tbody td {
	padding: calc(1.5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
	border-bottom: 1px solid var(--color-border-dark);
	color: var(--color-main-text);
	font-size: 0.95em;
}

.cn-detail-page__stats-table tbody tr:last-child td {
	border-bottom: none;
}

.cn-detail-page__stats-cell--indented {
	padding-left: calc(5 * var(--default-grid-baseline)) !important;
}

.cn-detail-page__stats-cell--center {
	text-align: center;
}

.cn-detail-page__stats-cell--right {
	text-align: right;
}

/* Body & content */
.cn-detail-page__body {
	display: flex;
	flex-direction: column;
	gap: calc(5 * var(--default-grid-baseline));
}

.cn-detail-page__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--default-grid-baseline));
}

/* Grid layout mode + schema-driven auto-body both render on the GridStack
   engine (CnDashboardGrid). The default Data + Related body is seeded as a
   real drag/resize grid so Buildiq edit mode can rearrange it. */
.cn-detail-page__grid {
	width: 100%;
}

/* Each widget fills its grid cell; GridStack's `.grid-stack-item-content` is
   `overflow: hidden`, so let a tall widget (e.g. a long data form) scroll
   within its cell rather than clip. */
.cn-detail-page__grid .grid-stack-item-content {
	overflow: auto;
}

/* dashboard.css draws a square cell border + background around any grid cell
   holding a CnWidgetWrapper — a DASHBOARD look. On detail pages the widget's
   own rounded card (ADR-062) is the only chrome; the square cell outline
   showed as a stray gray line behind the rounded corners. The doubled class
   outranks the dashboard rule at equal source order. */
.cn-dashboard-grid.cn-detail-page__grid .grid-stack-item-content:has(.cn-widget-wrapper) {
	border: none;
	background: transparent;
	box-shadow: none;
}

.cn-detail-page__grid-item {
	min-width: 0;
	height: 100%;
	position: relative;
}

/* Content-only catalog widgets (object-list / table) rendered on the
   CnWidgetWrapper card chrome (ADR-062). The wrapper fills its grid cell so
   the widget can fit its row count to the cell height, and the table region
   flexes between the card header and the view-all footer. */
.cn-detail-page__catalog-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.cn-detail-page__catalog-card .cn-widget-wrapper__content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* Registry "card" widgets (stat / gauge / delta) get the same titled card
   chrome as content-only widgets, plus a centred, non-scrolling body so a
   short KPI tile fits its cell without an inner scrollbar (ADR-062). */
.cn-detail-page__card-fit {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.cn-detail-page__card-fit .cn-widget-wrapper__content {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 14px;
}

.cn-detail-page__card-fit .cn-stat-widget,
.cn-detail-page__card-fit .cn-gauge-widget,
.cn-detail-page__card-fit .cn-delta-widget {
	min-width: 0;
	max-width: 100%;
}

/* Buildiq in-app edit cog (ADR-041), shown over a configurable widget
   while the page is in edit mode. Mirrors the dashboard's widget-edit cog. */
.cn-detail-page__widget-edit {
	position: absolute;
	top: 4px;
	inset-inline-end: 4px;
	z-index: 5;
	background: var(--color-main-background);
	border-radius: var(--border-radius);
	box-shadow: 0 1px 4px var(--color-box-shadow, rgba(0, 0, 0, 0.2));
}

.cn-detail-page__widget-title {
	margin: 0 0 calc(2 * var(--default-grid-baseline)) 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

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

/* Sidebar */
.cn-detail-page__sidebar {
	width: 340px;
	flex-shrink: 0;
	position: sticky;
	top: calc(5 * var(--default-grid-baseline));
}

.cn-detail-page__sidebar-toggle {
	position: fixed;
	right: calc(5 * var(--default-grid-baseline));
	top: 80px;
	z-index: 10;
}

/* Footer */
.cn-detail-page__footer {
	margin-top: calc(4 * var(--default-grid-baseline));
	padding-top: calc(3 * var(--default-grid-baseline));
	border-top: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 768px) {
	.cn-detail-page {
		padding: calc(3 * var(--default-grid-baseline));
	}

	.cn-detail-page__header {
		flex-direction: column;
	}

	.cn-detail-page__header-actions {
		width: 100%;
	}
}