/*
 * EventRaptor design system: shared components that Bootstrap's variables can't express.
 * Loaded after the theme CSS and before custom.css. Tokens (--er-*) come from scss/_eventraptor-base.scss.
 * Rules, markup and when to use each component: .agents/skills/eventraptor-ui/SKILL.md
 */

/* Copy button: the one look for every copy action (answers, documents, code blocks, links) */
.btn-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	flex-shrink: 0;
	min-height: 2.25rem;
	padding: .3rem .85rem;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--er-primary);
	background: var(--er-surface);
	border: 1px solid var(--er-primary-200);
	border-radius: var(--er-radius-pill);
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.btn-copy:hover,
.btn-copy:focus {
	color: var(--er-primary);
	background: var(--er-light-blue);
	border-color: var(--er-primary-400);
}

.btn-copy:focus-visible {
	box-shadow: var(--er-focus-ring);
}

.btn-copy .btn-copy-done {
	display: none;
}

.btn-copy.is-copied,
.btn-copy.is-copied:hover {
	color: var(--er-success);
	background: var(--er-success-tint);
	border-color: var(--er-success);
}

.btn-copy.is-copied .btn-copy-idle {
	display: none;
}

.btn-copy.is-copied .btn-copy-done {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.btn-copy.btn-block {
	display: flex;
	width: 100%;
	min-height: 2.75rem;
	font-size: 1rem;
}

/* Copy buttons that sit on top of a code block */
.btn-copy-code {
	margin-bottom: .5rem;
}

/* AI model banner (chat and document create): one brand look whatever the provider */
.ai-model-banner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: var(--er-radius-lg);
	border: 1px solid var(--er-light-blue-2);
	background: linear-gradient(135deg, var(--er-surface) 0%, var(--er-light-blue) 100%);
	box-shadow: var(--er-shadow-sm);
}

.ai-model-banner-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: var(--er-white);
	font-size: 1.1rem;
	background: var(--er-primary);
}

.ai-model-banner-body {
	min-width: 0;
}

.ai-model-banner-eyebrow {
	font-size: .875rem;
	font-weight: 600;
	color: var(--er-text-muted);
}

.ai-model-banner-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .1rem;
}

.ai-model-banner-name {
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--er-ink);
}

.ai-model-banner-provider {
	font-size: .875rem;
	font-weight: 600;
	padding: .1rem .6rem;
	border-radius: var(--er-radius-pill);
	color: var(--er-primary);
	background: var(--er-light-blue-2);
}

.ai-model-banner-id {
	margin-left: auto;
	flex-shrink: 0;
	font-size: .875rem;
	padding: .25rem .6rem;
	border-radius: var(--er-radius-sm);
	color: var(--er-text-muted);
	background: var(--er-surface);
	border: 1px dashed var(--er-primary-200);
}

/*
 * Dropdowns (Tom Select, set up by js/design-system.js): one brand look for every <select>, with a solid white list.
 * The box matches .form-control. Add data-native to a <select> to keep the browser's own menu.
 */
.ts-wrapper.form-control {
	padding: 0 !important;
	height: auto;
	min-height: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.ts-wrapper .ts-control {
	display: flex;
	align-items: center;
	min-height: calc(1.6em + 1rem + 2px);
	padding: .5rem 2.5rem .5rem 1rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--er-ink);
	background: var(--er-surface);
	border: 1px solid var(--er-border-strong);
	border-radius: var(--er-radius);
	box-shadow: none;
	cursor: pointer;
}

.ts-wrapper .ts-control > input {
	font-size: 1.0625rem;
	color: var(--er-ink);
}

.ts-wrapper .ts-control > input::placeholder {
	color: var(--er-placeholder);
}

.ts-wrapper.focus .ts-control {
	border-color: var(--er-primary-400);
	box-shadow: var(--er-focus-ring);
}

.ts-wrapper.disabled .ts-control {
	color: var(--er-text-muted);
	background: var(--er-surface-muted);
	opacity: 1;
	cursor: not-allowed;
}

/* Chevron */
.ts-wrapper.single .ts-control::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1.1rem;
	left: auto;
	width: .5rem;
	height: .5rem;
	margin-top: -.35rem;
	box-sizing: border-box;
	border: solid var(--er-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
	margin-top: -.1rem;
	border-color: var(--er-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(-135deg);
}

/* Multiple choices: soft pills */
.ts-wrapper.multi .ts-control > .item,
.ts-wrapper.multi .ts-control > .item.active {
	margin: .125rem .25rem .125rem 0;
	padding: .15rem .65rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--er-primary);
	background: var(--er-light-blue-2);
	border: 0;
	border-radius: var(--er-radius-pill);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
	border-left: 0;
	margin-left: .25rem;
	border-radius: var(--er-radius-pill);
}

/* The open list: solid white, soft shadow, above modals */
.ts-dropdown {
	z-index: 1060;
	margin-top: .375rem;
	padding: .375rem;
	font-size: 1.0625rem;
	color: var(--er-ink);
	background: var(--er-surface);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius-lg);
	box-shadow: var(--er-shadow-lg);
}

.ts-dropdown .ts-dropdown-content {
	max-height: 18rem;
}

.ts-dropdown .option,
.ts-dropdown .no-results {
	padding: .55rem .75rem;
	border-radius: var(--er-radius-sm);
}

.ts-dropdown .active {
	color: var(--er-primary);
	background: var(--er-light-blue);
}

.ts-dropdown .selected,
.ts-dropdown .selected.active {
	color: var(--er-primary);
	background: var(--er-light-blue-2);
	font-weight: 700;
}

.ts-dropdown .optgroup-header {
	padding: .6rem .75rem .25rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--er-text-muted);
	background: transparent;
}

.ts-dropdown .no-results {
	color: var(--er-text-muted);
}

/*
 * Icons (Font Awesome draws each <i> as an SVG with JavaScript). Until it does, give the <i> placeholder the same box as
 * the finished icon, so nothing shifts when icons appear. Sizes match Font Awesome's own SVG rules.
 */
i.fa, i.fas, i.far, i.fab, i.fal {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
}

i.fa-fw {
	width: 1.25em;
}

i.fa-xs { font-size: .75em; }
i.fa-sm { font-size: .875em; }
i.fa-lg { font-size: 1.33333em; vertical-align: -.0667em; }
i.fa-2x { font-size: 2em; }

/*
 * Error page (404, 500 and friends): one calm, centred card. A soft light-blue circle holds a navy icon, then a small
 * status line, a warm headline, one short sentence and the way forward. assets/errors/500.html repeats these rules
 * inline (with the brand hex values) so it still works when the app itself is down.
 */
.er-error {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: 2rem 0;
}

.er-error-card {
	width: 100%;
	max-width: 36rem;
	padding: 3rem 2.5rem;
	text-align: center;
	background: var(--er-surface);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius-lg);
	box-shadow: var(--er-shadow-md);
}

.er-error-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 7rem;
	height: 7rem;
	margin-bottom: 1.75rem;
	border-radius: 50%;
	color: var(--er-primary);
	background: var(--er-light-blue-2);
	box-shadow: 0 0 0 .75rem var(--er-light-blue);
}

.er-error-badge svg {
	width: 3rem;
	height: 3rem;
}

.er-error-code {
	margin-bottom: .5rem;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--er-text-muted);
}

.er-error-title {
	margin-bottom: .75rem;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--er-ink);
}

.er-error-text {
	max-width: 28rem;
	margin: 0 auto 2rem;
	font-size: 1.125rem;
	color: var(--er-text-muted);
}

.er-error-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}

.er-error-ref {
	margin: 1.75rem 0 0;
	font-size: .875rem;
	color: var(--er-text-muted);
}

@media (max-width: 575.98px) {
	.er-error-card {
		padding: 2.25rem 1.25rem;
	}

	.er-error-title {
		font-size: 1.6rem;
	}

	.er-error-actions .btn {
		width: 100%;
	}
}

/* Tables: text columns (names, types) wrap, so long names don't push the other columns out of view */
.table-custom td.table-cell-text{white-space:normal;min-width:10rem;overflow-wrap:break-word}
.table-custom td.table-cell-text:has(.er-tag){min-width:13rem}
.er-tag{display:inline-flex;align-items:baseline;gap:.35rem;padding:.25rem .6rem;border-radius:var(--er-radius);font-size:.875rem;font-weight:700;line-height:1.4;text-decoration:none}
.er-tag:hover{text-decoration:none}

/*
 * Card grids: as many columns as fit the space actually available (not the window width), at most 3.
 * Each column is at least --er-card-min wide (16rem; 13rem for the compact grid used inside a card).
 */
.er-card-grid{--er-card-min:16rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(max(var(--er-card-min),calc((100% - 3rem) / 3)),1fr));gap:1.5rem;margin-bottom:1.5rem}
.er-card-grid-compact{--er-card-min:13rem}

/* Buttons and tooltips that wrap share their lines evenly, instead of leaving one word on its own */
.btn,.tooltip-inner{text-wrap:balance}
/* Wider than Bootstrap's 200px, so longer tooltips stay within the 6 lines Chrome balances */
.tooltip-inner{max-width:18rem}

/*
 * App layout: one gutter everywhere. The space between the window edge and the sidebar (1.5rem) is the same between
 * the sidebar and the content, and between the content and the right edge, at every width (1rem on phones).
 * Content fills the space up to 75rem, so lines and card rows stay readable. It always starts one gutter from the
 * sidebar; on windows wider than that (about 1,520px), the spare space is on the right.
 * The 15px is Bootstrap's own .container padding, which rows inside rely on.
 */
.app-content{--er-gutter:1.5rem;--er-content-max:75rem}
.app-content > .p-lg-5{padding-left:calc(var(--er-gutter) - 15px)!important;padding-right:calc(var(--er-gutter) - 15px)!important}
.app-content .container{max-width:calc(var(--er-content-max) + 30px);margin-left:0;margin-right:auto}
@media (max-width:575.98px){.app-content{--er-gutter:1rem}}

/*
 * Reading column: pages built around reading long text (chat, document create) are one column of about
 * 75 characters per line. The whole column is limited, never the text inside a wider panel, which would look like
 * the text has line breaks in it.
 */
.app-content .container.er-reading-column{max-width:calc(44rem + 30px)}
/* On a reading-column page, the menu bar (phones) and footer line up with the column */
.app-content:has(.er-reading-column) > .p-lg-5 > .container{max-width:calc(44rem + 30px)}