/* ───────────────────────── Pages ─────────────────────────
 * Layout fixes for Nextcloud's own pages. Same scope as components.css: Raya themes only.
 */

/* ───────── Personal settings → Personal info ─────────
 * The page is a grid; the first column (avatar, profile, details) spans only a few rows, so its height is spread
 * over the rows of the other columns and every field ends up in a ~170px tall row. Spreading that column over more
 * rows lets the field rows take their own height, and items no longer stretch.
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #personal-settings {
	align-items: start;
	column-gap: 24px;
	padding: 16px 24px 32px;
}
@media (min-width: 680px) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #personal-settings > #vue-avatar-section {
		grid-row: 1 / span 3;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #personal-settings > .personal-settings-setting-box-profile {
		grid-row: 4 / span 3;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #personal-settings > .personal-settings-setting-box-detail {
		grid-row: 7 / span 2;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #personal-settings > .personal-settings-setting-box-detail--without-profile {
		grid-row: 4 / span 2;
	}
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #personal-settings .personal-settings-setting-box .section {
	padding: 8px 0 16px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #personal-settings .headerbar-label {
	margin-top: 0;
	font-weight: 600;
}

/* Profile preview card: a card with a muted band instead of a primary-coloured block */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .preview-card {
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-xl);
	box-shadow: var(--ds-shadow-sm);
	overflow: hidden;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .preview-card__header {
	background-color: var(--ds-muted);
	color: var(--ds-foreground);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .preview-card__header span {
	color: var(--ds-foreground);
}

/* ───────── Settings sections (server-rendered and NcSettingsSection) ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #app-content :is(.section, .settings-section) h2,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .settings-section__name {
	font-size: 20px;
	line-height: 1.4;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.settings-hint, .settings-section__desc) {
	color: var(--ds-muted-foreground);
	max-width: 900px;
}