/*
 * Project styles for the start.spring.io Vaadin UI, layered on top of the Aura
 * theme. Served as a classpath static resource (META-INF/resources) and loaded
 * via @StyleSheet on AppShell, the same way the Aura stylesheet is delivered.
 */

/*
 * Brand token layer: a Vaadin-brand "professional developer tool" visual
 * language on top of Aura. These override Aura's modifiable root tokens, so the
 * whole component set re-skins cohesively; every value resolves via CSS
 * light-dark() keyed off color-scheme, so both themes stay correct.
 */
:root {
	/* Dark-first: first paint is dark before the theme JS runs (see MainView). */
	color-scheme: dark;

	/* Accent — own Vaadin Blue, used sparingly (primary actions, selection,
	   focus). Same value in both schemes; its lightness keeps Aura's
	   auto-derived button text white and AA-legible. */
	--aura-accent-color-light: #056ff0;
	--aura-accent-color-dark: #056ff0;
	--lumo-primary-color: #056ff0;

	/* Canvas — near-black dark, off-blue light (brand). Panels lift from here. */
	--aura-background-color-dark: #0f0f0f;
	--aura-background-color-light: #f0f4f7;

	/* Typography — Inter-first system stack (no bundled font asset). */
	--aura-font-family: Inter, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
	--lumo-font-family: var(--aura-font-family);
	--mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", "Noto Sans Mono", Consolas, monospace;

	/* Technical, tighter geometry. */
	--aura-base-radius: 2;
	--aura-base-size: 15;
}

/* Tight, modern headings (Aura already renders them semibold). */
:where(h1, h2, h3) {
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/*
 * Brand wordmark in the navbar: "Vaadin" in the primary text color, "Initializr"
 * in the Vaadin-blue accent, and a small "PRO" badge pill. Orbitron (loaded via
 * @StyleSheet on AppShell) gives the geometric display look; colors use Aura tokens
 * so both light/dark stay correct and the accent matches the rest of the UI.
 */
.app-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	font-family: Orbitron, var(--aura-font-family);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	white-space: nowrap;
}

.app-logo-brand {
	color: var(--vaadin-text-color);
}

.app-logo-product {
	color: var(--aura-accent-color);
}

.app-logo-badge {
	padding: 0.15em 0.45em;
	border-radius: 0.4em;
	background: var(--aura-accent-color);
	color: #fff;
	font-family: var(--aura-font-family);
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0;
}

/*
 * Navbar headline that echoes the social/SEO description (see Branding.TAGLINE). Kept
 * subtle next to the brand title and dropped below the main breakpoint so it never
 * crowds the toolbar on small screens.
 */
.app-tagline {
	align-self: center;
	margin-left: var(--lumo-space-m);
	font-size: 0.8125rem;
	color: var(--vaadin-text-color-secondary);
}

@media (max-width: 44rem) {
	.app-tagline {
		display: none;
	}
}

/* "New to Vaadin?" tutorial link, next to the theme toggle. Dropped below the
   main breakpoint for the same reason as .app-tagline above. */
.new-to-vaadin-link {
	align-self: center;
	font-size: 0.8125rem;
	color: var(--vaadin-text-color-secondary);
	white-space: nowrap;
}

@media (max-width: 44rem) {
	.new-to-vaadin-link {
		display: none;
	}
}

/*
 * Monospace utility for technical/code-like data (versions, coordinates).
 * Custom properties inherit into a component's internal parts, so retargeting
 * --aura-font-family on the host switches the field/label font without ::part.
 */
.mono {
	--aura-font-family: var(--mono);
	font-family: var(--mono);
	font-feature-settings: "liga" 0;
}

/*
 * Main screen: two functional areas with exactly two responsive states.
 *
 * Wide (>= 44rem): the form and dependencies panes sit side by side and each
 * fills the window height, scrolling INTERNALLY when its content overflows, so
 * the page itself never scrolls. Stacked (< 44rem): the dependencies pane drops
 * below the form, both take their natural height, and the page scrolls.
 */
.main-content {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	gap: var(--lumo-space-s);
}

/* Panes fill the row height; min-height/min-width:0 let them shrink so their
   own overflow:auto scrollbars engage instead of pushing the page taller. */
.main-content > .main-column {
	overflow: auto;
	min-height: 0;
	min-width: 0;
}

.main-content > .main-column-form {
	flex: 3 1 0;
}

.main-content > .main-column-deps {
	flex: 2 1 0;
}

/* The dependencies pane reads as a subtly tinted, softly-bordered, rounded
   panel. The aura-surface class supplies the tint; both tokens resolve via CSS
   light-dark(), so they follow the day/night toggle automatically. */
.main-content > .main-column-deps {
	border: 1px solid var(--vaadin-border-color);
	border-radius: var(--vaadin-radius-l);
}

/* Stacked state: below the width where two 22rem columns fit side by side
   (44rem = 704px at the 16px media base). */
@media (max-width: 44rem) {
	.main-content {
		flex-direction: column;
		height: auto;
		min-height: 100%;
	}

	.main-content > .main-column {
		overflow: visible;
		flex: 0 0 auto;
		width: 100%;
	}
}

/*
 * Statistics page (/statistics). A single scrolling column of headline "stat tiles"
 * plus a few horizontal-bar breakdowns built from plain divs (no chart library). Every
 * color is a design token so the page follows the day/night toggle automatically.
 */
.stats-content {
	max-width: 52rem;
	margin: 0 auto;
	width: 100%;
}

/* Headline numbers wrap into as many columns as fit; each tile is a tinted surface. */
.stat-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vaadin-gap-m, 0.75rem);
	margin-bottom: var(--vaadin-gap-l, 1.25rem);
	width: 100%;
}

.stat-tile {
	flex: 1 1 8rem;
	padding: var(--vaadin-padding-l, 1rem);
	border: 1px solid var(--vaadin-border-color);
	border-radius: var(--vaadin-radius-l);
}

.stat-number {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--aura-accent-color, var(--lumo-primary-color));
}

/* Textual tile value (dates, relative times): calmer than a headline count. */
.stat-text {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--lumo-body-text-color);
}

.stat-label {
	margin-top: var(--vaadin-gap-xs, 0.25rem);
	font-size: 0.8125rem;
	color: var(--lumo-secondary-text-color);
}

/* A breakdown section: heading + its bars, full width so it aligns with the tiles. */
.stat-section {
	width: 100%;
}

.stat-section h2 {
	font-size: 1rem;
	margin: var(--vaadin-gap-l, 1.25rem) 0 var(--vaadin-gap-xs, 0.25rem);
}

/* One row per tallied value: label | proportional bar | exact value. */
.bars {
	display: flex;
	flex-direction: column;
	gap: var(--vaadin-gap-s, 0.5rem);
	width: 100%;
}

.bar-row {
	display: flex;
	align-items: center;
	gap: var(--vaadin-gap-m, 0.75rem);
}

.bar-label {
	flex: 0 0 10rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
}

.bar-track {
	flex: 1 1 auto;
	max-width: 28rem;
	height: 0.5rem;
	border-radius: var(--vaadin-radius-l);
	background: var(--lumo-contrast-10pct);
	overflow: hidden;
}

.bar-fill {
	height: 100%;
	border-radius: inherit;
	background: color-mix(in srgb, var(--aura-accent-color, var(--lumo-primary-color)) 85%, transparent);
}

.bar-value {
	flex: 0 0 auto;
	min-width: 5rem;
	text-align: right;
	font-size: 0.8125rem;
	color: var(--lumo-secondary-text-color);
}

/* Stacked layout: give the label its own line so the bar keeps a usable width. */
@media (max-width: 44rem) {
	.bar-label {
		flex-basis: 6rem;
	}
}

/*
 * Example gallery ("Starting point"): a wrapping grid of selectable Vaadin Card
 * components below the project form. The Card supplies its own surface, border and
 * typography; these rules only size the grid items, mark the selected card (keyed off
 * aria-pressed so state and styling stay in sync), and crop the screenshot thumbnail.
 */
.example-cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vaadin-gap-m, 1rem);
	width: 100%;
}

.example-card {
	flex: 0 0 12rem;
	cursor: pointer;
}

.example-card[aria-pressed="true"] {
	outline: 2px solid var(--lumo-primary-color);
	outline-offset: -2px;
}

.example-card-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

@media (max-width: 44rem) {
	.example-card {
		flex: 0 0 100%;
	}
}

/*
 * Vendor icon next to a dependency's name (chip list + picker dialog). SvgIcon inlines
 * the SVG and tracks the host's `color`, so this needs no fill rule to stay correct
 * across light/dark (see VendorIcons).
 */
.dependency-icon {
	--vaadin-icon-size: 36px;
	flex-shrink: 0;
	color: var(--lumo-secondary-text-color);
}