@import "design-system/styles.css";
@import "taskpane/aia-brand.css";
@import "taskpane/credithq-brand.css";
@import "taskpane/pages/browser-landing/browser-landing.css";
@import "taskpane/pages/login/login.css";
@import "taskpane/pages/data/data.css";
@import "taskpane/pages/components/components.css";

/* -------------------------------------------------------------------------
 * Taskpane base layout only
 * ------------------------------------------------------------------------- */

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: auto;
	background-color: var(--ds-color-bg-page);
	color: var(--ds-color-text-primary);
	font-family: var(--ds-font-family);
	font-size: var(--ds-font-size-md);
	line-height: var(--ds-line-height-normal);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

#app-body.app-main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
}

#app-root {
	flex: 1 1 auto;
	min-height: min-content;
	display: flex;
	flex-direction: column;
}

/* Login-only: don’t stretch the pane vertically around a tiny form */
#app-root:has(> .login-page) {
	flex: 0 0 auto;
	align-items: center;
	padding-bottom: var(--ds-space-6, 1.5rem);
}

/* Page container: one active page visible at a time; padding on direct children; grows with content */
.page-container {
	flex: 1 1 auto;
	min-height: min-content;
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.page-container > * {
	padding: 0.5rem 1.5rem;
	box-sizing: border-box;
}

.page-container .page {
	display: none;
	flex: 1 1 auto;
	min-height: min-content;
	flex-direction: column;
}

.page-container .page.is-active {
	display: flex;
}