/* =============================================================
   WorldBuilder UI system
   Loaded after Bootstrap, site.css and theme.css (see the layouts in Pages/Shared).
   Every color comes from theme.css tokens, so light and dark both work.
   Guide: docs/UI-Guide.md
============================================================= */

:root {
	/* Type scale */
	--wb-text-xs: 0.8rem;
	--wb-text-sm: 0.875rem;
	--wb-text-base: 1rem;
	--wb-text-md: 1.125rem;
	--wb-text-lg: 1.25rem;
	--wb-text-xl: 1.5rem;
	--wb-text-2xl: 2rem;

	/* Spacing scale */
	--wb-space-1: 0.25rem;
	--wb-space-2: 0.5rem;
	--wb-space-3: 0.75rem;
	--wb-space-4: 1rem;
	--wb-space-5: 1.25rem;
	--wb-space-6: 1.5rem;
	--wb-space-7: 2rem;
	--wb-space-8: 3rem;

	/* Radius */
	--wb-radius-sm: 6px;
	--wb-radius-md: 8px;
	--wb-radius-lg: 12px;
	--wb-radius-pill: 999px;

	/* Widths for forms and narrow cards */
	--wb-measure-sm: 420px;
	--wb-measure-md: 560px;
	--wb-measure-lg: 720px;
}

.wb-measure-sm { max-width: var(--wb-measure-sm); }
.wb-measure-md { max-width: var(--wb-measure-md); }
.wb-measure-lg { max-width: var(--wb-measure-lg); }

/* -------------------------------------------------------------
   Page header: title, optional subtitle, actions on the right
   <header class="wb-page-header">
     <div><h1 class="wb-page-title">…</h1><p class="wb-page-subtitle">…</p></div>
     <div class="wb-page-actions">…buttons…</div>
   </header>
------------------------------------------------------------- */
.wb-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wb-space-4);
	margin: var(--wb-space-6) 0;
}

.wb-page-title {
	margin: 0;
	font-size: var(--wb-text-2xl);
	font-weight: 600;
	line-height: 1.2;
}

.wb-page-subtitle {
	margin: var(--wb-space-1) 0 0;
	font-size: var(--wb-text-sm);
	color: var(--wb-muted);
}

.wb-page-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wb-space-2);
}

/* Section heading inside a page */
.wb-section-title {
	margin: var(--wb-space-7) 0 var(--wb-space-3);
	font-size: var(--wb-text-lg);
	font-weight: 600;
}

/* -------------------------------------------------------------
   Card (raised, for a self-contained block such as a form)
   Panel (flat, for grouping on the page: stats, filters, charts)
------------------------------------------------------------- */
.wb-card {
	padding: var(--wb-space-6);
	background: var(--wb-surface);
	border: 1px solid var(--wb-border);
	border-radius: var(--wb-radius-md);
	box-shadow: var(--wb-shadow-sm);
	color: var(--bs-body-color);
}

.wb-panel {
	padding: var(--wb-space-4) var(--wb-space-5);
	background: var(--wb-surface);
	border: 1px solid var(--wb-border);
	border-radius: var(--wb-radius-md);
	color: var(--bs-body-color);
}

.wb-card-title,
.wb-panel-title {
	margin: 0 0 var(--wb-space-3);
	font-size: var(--wb-text-base);
	font-weight: 600;
}

.wb-card-title {
	font-size: var(--wb-text-lg);
}

/* -------------------------------------------------------------
   Empty state: optional icon, a title, one line, a call to action
------------------------------------------------------------- */
.wb-empty {
	padding: var(--wb-space-8) var(--wb-space-4);
	text-align: center;
	background: var(--wb-surface-2);
	border: 1px dashed var(--wb-border);
	border-radius: var(--wb-radius-md);
	color: var(--bs-body-color);
}

.wb-empty-icon {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto var(--wb-space-3);
	color: var(--wb-muted);
}

.wb-empty-title {
	margin: 0 0 var(--wb-space-2);
	font-size: var(--wb-text-xl);
	font-weight: 600;
}

.wb-empty-text {
	max-width: 36rem;
	margin: 0 auto var(--wb-space-4);
	color: var(--wb-muted);
}

	.wb-empty-text:last-child {
		margin-bottom: 0;
	}

.wb-empty-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wb-space-3);
}

/* Smaller version for a section inside a page or panel */
.wb-empty--compact {
	padding: var(--wb-space-6) var(--wb-space-4);
}

	.wb-empty--compact .wb-empty-title {
		font-size: var(--wb-text-md);
	}

/* -------------------------------------------------------------
   Pills (labels, tags, small links) and badges (counts)
------------------------------------------------------------- */
.wb-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--wb-space-1);
	padding: 0.05rem var(--wb-space-2);
	border: 1px solid var(--wb-border);
	border-radius: var(--wb-radius-pill);
	background: var(--wb-surface);
	color: var(--bs-body-color);
	font-size: var(--wb-text-xs);
	line-height: 1.6;
	white-space: nowrap;
	text-decoration: none;
}

a.wb-pill:hover,
button.wb-pill:hover {
	border-color: var(--wb-muted);
	color: var(--bs-body-color);
	text-decoration: none;
}

a.wb-pill:focus-visible,
button.wb-pill:focus-visible {
	outline: 2px solid var(--wb-focus-ring);
	outline-offset: 2px;
}

.wb-pill--muted { color: var(--wb-muted); }
.wb-pill--accent { background: var(--wb-accent-subtle); border-color: transparent; }
.wb-pill--attention { background: var(--wb-attention); border-color: transparent; }
.wb-pill--danger { color: var(--wb-danger-text); border-color: currentColor; }
.wb-pill--success { color: var(--wb-success-text); border-color: currentColor; }

.wb-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	padding: 0 0.45em;
	border-radius: var(--wb-radius-pill);
	background: var(--wb-surface-2);
	color: var(--bs-body-color);
	font-size: var(--wb-text-xs);
	font-weight: 600;
	line-height: 1.6;
}

.wb-badge--accent { background: var(--wb-accent); color: #fff; }
.wb-badge--attention { background: var(--wb-attention); }
.wb-badge--danger { background: var(--wb-danger-text); color: var(--wb-surface); }

/* -------------------------------------------------------------
   Form field: label, control, hint, error
   Controls are Bootstrap's .form-control / .form-select.
------------------------------------------------------------- */
.wb-field {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--wb-space-5);
}

	.wb-field > label,
	.wb-field-label {
		margin-bottom: var(--wb-space-1);
		font-weight: 600;
	}

	.wb-field .form-control,
	.wb-field .form-select {
		background-color: var(--wb-surface);
		border-color: var(--wb-border);
		color: var(--bs-body-color);
	}

		.wb-field .form-control:focus,
		.wb-field .form-select:focus {
			border-color: var(--wb-accent);
		}

.wb-field-hint {
	margin-top: var(--wb-space-1);
	font-size: var(--wb-text-sm);
	color: var(--wb-muted);
}

.wb-field-error {
	margin-top: var(--wb-space-1);
	font-size: var(--wb-text-sm);
	color: var(--wb-danger-text);
}

	.wb-field-error:empty {
		display: none;
	}

/* A group of radios or checkboxes */
fieldset.wb-field {
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: 0;
}

.wb-field-legend {
	margin-bottom: var(--wb-space-2);
	font-size: var(--wb-text-base);
	font-weight: 600;
}

/* Buttons at the end of a form */
.wb-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wb-space-3);
	margin-top: var(--wb-space-6);
}

/* -------------------------------------------------------------
   List rows
   <ul class="wb-list"><li class="wb-list-row">
     <span class="wb-list-row-main">…</span> …meta, pills, buttons…
   </li></ul>
   The row itself may be an <a> to make the whole row a link.
------------------------------------------------------------- */
.wb-list {
	display: flex;
	flex-direction: column;
	gap: var(--wb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wb-list-row {
	display: flex;
	align-items: center;
	gap: var(--wb-space-2);
	min-height: 2.75rem;
	padding: var(--wb-space-2) var(--wb-space-3);
	background: var(--wb-surface-2);
	border-radius: var(--wb-radius-sm);
	color: var(--bs-body-color);
}

.wb-list-row-main {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.wb-list-row-meta {
	flex: none;
	font-size: var(--wb-text-sm);
	color: var(--wb-muted);
}

a.wb-list-row {
	text-decoration: none;
}

	a.wb-list-row:hover {
		background: color-mix(in srgb, var(--wb-surface-2), var(--bs-body-color) 6%);
		color: var(--bs-body-color);
	}

	a.wb-list-row:focus-visible {
		outline: 2px solid var(--wb-focus-ring);
		outline-offset: 2px;
	}

/* -------------------------------------------------------------
   Menu: add to a Bootstrap .dropdown-menu
------------------------------------------------------------- */
.wb-menu {
	--bs-dropdown-bg: var(--wb-surface);
	--bs-dropdown-color: var(--bs-body-color);
	--bs-dropdown-border-color: var(--wb-border);
	--bs-dropdown-border-radius: var(--wb-radius-md);
	--bs-dropdown-padding-x: var(--wb-space-1);
	--bs-dropdown-padding-y: var(--wb-space-1);
	--bs-dropdown-link-color: var(--bs-body-color);
	--bs-dropdown-link-hover-color: var(--bs-body-color);
	--bs-dropdown-link-hover-bg: var(--wb-surface-2);
	--bs-dropdown-link-active-color: var(--bs-body-color);
	--bs-dropdown-link-active-bg: var(--wb-accent-subtle);
	--bs-dropdown-divider-bg: var(--wb-border);
	--bs-dropdown-item-padding-x: var(--wb-space-3);
	--bs-dropdown-item-padding-y: 0.4rem;
	box-shadow: var(--wb-shadow-md);
}

	.wb-menu .dropdown-item {
		border-radius: var(--wb-radius-sm);
	}

	.wb-menu .dropdown-divider {
		margin: var(--wb-space-1) 0;
	}

	.wb-menu .wb-menu-item-danger,
	.wb-menu .wb-menu-item-danger:hover {
		color: var(--wb-danger-text);
	}

/* -------------------------------------------------------------
   Toolbar: a row of controls above content
------------------------------------------------------------- */
.wb-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wb-space-2);
	margin-bottom: var(--wb-space-4);
}

	.wb-toolbar .form-control,
	.wb-toolbar .form-select {
		width: auto;
	}

.wb-toolbar-spacer {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------
   Buttons: opt-in modifiers layered on Bootstrap .btn.
   The app blue for .btn-primary lives in site.css, the dark-mode
   .btn-outline-secondary fix in theme.css. Nothing here changes a
   plain .btn, so the editor toolbar is unaffected.
------------------------------------------------------------- */

/* Quiet: no border or fill until hovered, for secondary actions in rows */
.btn.btn-quiet {
	--bs-btn-color: var(--wb-muted);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-hover-bg: var(--wb-hover);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-bg: var(--wb-hover);
	--bs-btn-active-border-color: transparent;
}

/* Danger without the red fill: destructive actions that aren't the main one */
.btn.btn-danger-text {
	--bs-btn-color: var(--wb-danger-text);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--wb-danger-text);
	--bs-btn-hover-bg: color-mix(in srgb, var(--wb-danger-text) 12%, transparent);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--wb-danger-text);
	--bs-btn-active-bg: color-mix(in srgb, var(--wb-danger-text) 18%, transparent);
	--bs-btn-active-border-color: transparent;
}

/* Square, icon-only. Always give it an aria-label. */
.btn.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	line-height: 1;
}