/* ========================================================================
   App-wide button system (Bootstrap .btn overrides)
   ======================================================================== */

:root {
	--app-btn-font: "Inter", system-ui, sans-serif;
	--app-btn-radius-pill: 9999px;
	--app-btn-fs: 0.875rem;
	--app-btn-fw: 500;
	--app-btn-min-h: 2.25rem;
	--app-btn-pad-y: 0.5rem;
	--app-btn-pad-x: 1rem;

	--app-btn-tool-min-h: 2.5rem;
	--app-btn-tool-pad-y: 0.5rem;
	--app-btn-tool-pad-x: 0.875rem;
	--app-btn-tool-fs: 0.875rem;
	--app-btn-tool-radius: 0.75rem;

	--app-btn-action-min-h: 2.25rem;
	--app-btn-action-min-h-narrow: 2.75rem;
	--app-btn-action-min-w: 7.5rem;
	--app-btn-action-pad-y: 0.5rem;
	--app-btn-action-pad-x: 1rem;
	--app-btn-action-fs: 0.875rem;
	--app-btn-action-fw: 500;
}

/* ---- Core .btn (all variants) ---- */
.btn {
	font-family: var(--app-btn-font);
	font-size: var(--app-btn-fs);
	font-weight: var(--app-btn-fw);
	letter-spacing: -0.01em;
	line-height: 1.2;
	border-radius: var(--app-btn-radius-pill);
	min-height: var(--app-btn-min-h);
	padding: var(--app-btn-pad-y) var(--app-btn-pad-x);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	border-width: 1px;
	border-style: solid;
	box-shadow: none !important;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease,
		opacity 0.15s ease,
		scale 0.15s ease-out;
	-webkit-font-smoothing: antialiased;
}

.btn:hover,
.btn:focus,
.btn.active,
.btn.show {
	transform: none !important;
	box-shadow: none !important;
}

.btn:active:not(:disabled):not(.disabled) {
	scale: 0.96;
}

.btn:focus-visible {
	outline: 2px solid var(--clr-focus);
	outline-offset: 2px;
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
	opacity: 0.45;
	pointer-events: none;
}

.btn-sm {
	min-height: 2rem;
	padding: 0.375rem 0.75rem;
	font-size: var(--fs-450);
	border-radius: var(--app-btn-radius-pill);
	gap: 0.375rem;
}

.btn-lg {
	min-height: 2.5rem;
	padding: 0.625rem 1.25rem;
	font-size: 0.9375rem;
	border-radius: var(--app-btn-radius-pill);
}

.btn i[data-lucide],
.btn .btn-icon[data-lucide] {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.btn-sm i[data-lucide],
.btn-sm .btn-icon[data-lucide] {
	width: 0.9375rem;
	height: 0.9375rem;
}

/* ---- Primary: filled CTA (--clr-cta is white on dark, near-black on light) ---- */
.btn-primary {
	background-color: var(--clr-cta);
	border-color: var(--clr-cta);
	color: var(--clr-on-cta);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--clr-cta-hover);
	border-color: var(--clr-cta-hover);
	color: var(--clr-on-cta);
}

.btn-primary:active {
	background-color: var(--clr-cta-active);
	border-color: var(--clr-cta-active);
	color: var(--clr-on-cta);
}

.btn-primary:disabled,
.btn-primary.disabled,
fieldset:disabled .btn-primary {
	background-color: var(--clr-surface-3);
	border-color: var(--clr-border);
	color: var(--clr-text-disabled);
}

/* ---- Secondary (filled muted) ---- */
.btn-secondary {
	background-color: var(--clr-surface-3);
	border-color: var(--clr-border);
	color: var(--clr-text-high);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--clr-surface-4);
	border-color: var(--clr-btn-hover-border);
	color: var(--clr-text-high);
}

/* ---- Outline secondary (ghost chrome) ---- */
.btn-outline-secondary {
	background-color: transparent;
	border-color: var(--app-btn-outline-border);
	color: var(--clr-text-medium);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
	background-color: var(--clr-btn-hover-bg);
	border-color: var(--clr-btn-hover-border);
	color: var(--clr-text-high);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-outline-secondary.dropdown-toggle.show {
	background-color: var(--clr-btn-active-bg);
	border-color: var(--clr-btn-hover-border);
	color: var(--clr-text-high);
}

/* ---- Outline primary ---- */
.btn-outline-primary {
	background-color: transparent;
	border-color: color-mix(in srgb, var(--clr-outline-primary-fg) 35%, transparent);
	color: var(--clr-outline-primary-fg);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
	background-color: var(--clr-btn-hover-bg);
	border-color: var(--clr-btn-hover-border);
	color: var(--clr-outline-primary-fg);
}

/* ---- Outline danger ---- */
.btn-outline-danger {
	background-color: transparent;
	border-color: var(--clr-danger-border);
	color: var(--clr-danger-text);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
	background-color: var(--clr-danger-bg-hover);
	border-color: var(--clr-danger-text);
	color: var(--clr-danger-text-hover);
}

/* ---- Success / danger / warning (compact pills) ---- */
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
	border-radius: var(--app-btn-radius-pill);
}

.btn-success {
	background-color: #15803d;
	border-color: #15803d;
	color: #ffffff;
}

.btn-success:hover,
.btn-success:focus {
	filter: brightness(1.08);
	color: #ffffff;
}

.btn-danger {
	background-color: var(--clr-error);
	border-color: var(--clr-error);
	color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus {
	filter: brightness(1.08);
	color: #ffffff;
}

.btn-warning {
	background-color: #ca8a04;
	border-color: #ca8a04;
	color: #0a0a0a;
}

.btn-warning:hover,
.btn-warning:focus {
	filter: brightness(1.06);
	color: #0a0a0a;
}

.btn-info {
	background-color: var(--clr-secondary);
	border-color: var(--clr-secondary);
	color: #ffffff;
}

.btn-info:hover,
.btn-info:focus {
	filter: brightness(1.08);
	color: #ffffff;
}

/* ---- Link ---- */
.btn-link {
	border-radius: 0.25rem;
	min-height: unset;
	padding: 0.25rem 0.5rem;
	border-color: transparent;
	background: transparent;
	color: var(--clr-secondary);
	text-decoration: none;
	font-weight: var(--fw-500, 500);
}

.btn-link:hover,
.btn-link:focus {
	color: var(--clr-secondary);
	text-decoration: underline;
	background: transparent;
	border-color: transparent;
}

/* ---- Roles: tool (inline with fields) vs action (page CTAs) ---- */
.btn-tool {
	min-height: var(--app-btn-tool-min-h);
	padding: var(--app-btn-tool-pad-y) var(--app-btn-tool-pad-x);
	border-radius: var(--app-btn-tool-radius);
	font-size: var(--app-btn-tool-fs);
}

.btn-tool:has(> i:first-child) {
	padding-inline-start: calc(var(--app-btn-tool-pad-x) - 2px);
}

.btn-action {
	min-height: var(--app-btn-action-min-h);
	min-width: var(--app-btn-action-min-w);
	padding: var(--app-btn-action-pad-y) var(--app-btn-action-pad-x);
	border-radius: var(--app-btn-radius-pill);
	font-size: var(--app-btn-action-fs);
	font-weight: var(--app-btn-action-fw);
	text-transform: none;
	transition-property: background-color, border-color, color, scale;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
}

.btn-action:active:not(:disabled):not(.disabled) {
	scale: 0.96;
}

@media (max-width: 991.98px) {
	.btn-action {
		min-height: var(--app-btn-action-min-h-narrow);
	}
}

/* Secondary for both roles = original outline-secondary ghost. */
.btn-tool.btn-secondary,
.btn-tool.btn-outline-secondary,
.btn-action.btn-secondary,
.btn-action.btn-outline-secondary {
	background-color: transparent;
	border-color: var(--app-btn-outline-border);
	color: var(--clr-text-medium);
}

.btn-tool.btn-secondary:hover,
.btn-tool.btn-secondary:focus,
.btn-tool.btn-outline-secondary:hover,
.btn-tool.btn-outline-secondary:focus,
.btn-action.btn-secondary:hover,
.btn-action.btn-secondary:focus,
.btn-action.btn-outline-secondary:hover,
.btn-action.btn-outline-secondary:focus {
	background-color: var(--clr-btn-hover-bg);
	border-color: var(--clr-btn-hover-border);
	color: var(--clr-text-high);
}

.btn-tool.btn-secondary:active,
.btn-tool.btn-outline-secondary:active,
.btn-action.btn-secondary:active,
.btn-action.btn-outline-secondary:active {
	background-color: var(--clr-btn-active-bg);
	border-color: var(--clr-btn-hover-border);
	color: var(--clr-text-high);
}

@media (prefers-reduced-motion: reduce) {

	.btn-tool,
	.btn-action {
		transition-duration: 0.01ms;
	}

	.btn-action:active:not(:disabled):not(.disabled) {
		scale: 1;
	}
}

/* ---- Button groups: horizontal segmented pill strip ---- */
.btn-group>.btn {
	border-radius: 0;
}

.btn-group>.btn:first-child {
	border-top-left-radius: var(--app-btn-radius-pill);
	border-bottom-left-radius: var(--app-btn-radius-pill);
}

.btn-group>.btn:last-child {
	border-top-right-radius: var(--app-btn-radius-pill);
	border-bottom-right-radius: var(--app-btn-radius-pill);
}

.btn-group>.btn:only-child {
	border-radius: var(--app-btn-radius-pill) !important;
}

.btn-group-sm>.btn {
	min-height: 2rem;
	padding: 0.375rem 0.75rem;
	font-size: var(--fs-450);
}