/**
 * iCount Buttons — semantic-token reimplementation (Figma)
 *
 * Loaded by _icount_css_assets() on DEV instead of icount-buttons-old.css.
 * Legacy rules preserved in assets/css/icount-buttons-old.css.
 *
 * Figma: https://www.figma.com/design/8m2Lev2b9waHdY0NiplWMr/?node-id=2969-937
 * Styles in Figma: fill | subtle | outline | ghost
 * Types in Figma: primary | danger | success  (cta / warning not yet — legacy kept)
 * States: default | hover | pressed | focus | disabled
 *
 * Size tokens (--btn-*) still come from theme (icount-il.css). Color/interaction
 * uses icount-semantic-tokens.css.
 */

/* ==========================================
 * BASE + SIZES
 * ========================================== */

.btn
{
	height: var(--btn-height);
	font-size: var(--btn-font-size);
	line-height: calc(var(--btn-height) - 2 * var(--btn-border-width));
	margin-block: 0;
	padding: 0 calc(var(--btn-padding-x) - var(--btn-border-width));
	border-width: var(--btn-border-width) !important;
	border-style: solid;
	border-radius: var(--btn-rounded-radius);
	box-shadow: var(--btn-box-shadow);
}

.btn:not(.btn-link):not(.btn-link-hover):not(.btn-reset):not(.btn-collapse):not(.btn-icon):not(.btn-fa)
{
	border-width: var(--btn-border-width-outline);
}

.btn:focus
{
	outline: 0 !important;
}

.btn:not(:disabled):not(.disabled):not(.bs-placeholder):not(#search_btn_i):not(#search_btn_x):hover
{
	box-shadow: var(--btn-box-shadow-hover);
}

.btn:not(:disabled):not(.disabled):not(.bs-placeholder):not(#search_btn_i):not(#search_btn_x):active,
.btn:not(:disabled):not(.disabled):not(.bs-placeholder):not(#search_btn_i):not(#search_btn_x):hover:active
{
	box-shadow: var(--btn-box-shadow-active);
}

.btn, .navbar .navbar-nav > a.btn, .modal .btn
{
	border-radius: var(--btn-rounded-radius);
}

.btn.rounded
{
	border-radius: var(--btn-rounded-radius) !important;
}

/* sizes */
.btn-xs, .btn-xs[class*="btn-outline-"],
.btn-group.btn-group-xs > .btn,
.btn-group.btn-group-xs > .dropdown > .btn
{
	height: var(--btn-xs-height);
	font-size: var(--btn-xs-font-size);
	line-height: calc(var(--btn-xs-height) - 2 * var(--btn-border-width));
	padding: 0 calc(var(--btn-xs-padding-x) - var(--btn-border-width));
}

.btn-sm, .btn-sm[class*="btn-outline-"],
.btn-group.btn-group-sm > .btn,
.btn-group.btn-group-sm > .dropdown > .btn
{
	height: var(--btn-sm-height);
	font-size: var(--btn-sm-font-size);
	line-height: calc(var(--btn-sm-height) - 2 * var(--btn-border-width));
	padding: 0 calc(var(--btn-sm-padding-x) - var(--btn-border-width));
}

.btn-md, .btn-md[class*="btn-outline-"],
.btn-group.btn-group-md > .btn,
.btn-group.btn-group-md > .dropdown > .btn
{
	height: var(--btn-md-height);
	font-size: var(--btn-md-font-size);
	line-height: calc(var(--btn-md-height) - 2 * var(--btn-border-width));
	padding: 0 calc(var(--btn-md-padding-x) - var(--btn-border-width));
}

.btn-lg, .btn-lg[class*="btn-outline-"],
.btn-group.btn-group-lg > .btn,
.btn-group.btn-group-lg > .dropdown > .btn
{
	height: var(--btn-lg-height);
	font-size: var(--btn-lg-font-size);
	line-height: calc(var(--btn-lg-height) - 2 * var(--btn-border-width));
	padding: 0 calc(var(--btn-lg-padding-x) - var(--btn-border-width));
}

.btn-xl, .btn-xl[class*="btn-outline-"],
.btn-group.btn-group-xl > .btn,
.btn-group.btn-group-xl > .dropdown > .btn
{
	height: var(--btn-xl-height);
	font-size: var(--btn-xl-font-size);
	line-height: calc(var(--btn-xl-height) - 2 * var(--btn-border-width));
	padding: 0 calc(var(--btn-xl-padding-x) - var(--btn-border-width));
}

.btn > [class*=fa-]
{
	font-size: 1rem;
	line-height: inherit;
	vertical-align: middle;
}

/* Figma focus ring: 2px surface + 4px border/focus */
.btn:not(:disabled):not(.disabled):focus-visible
{
	box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--border-focus) !important;
}

/* Shared Figma disabled (fill / subtle / outline / ghost) */
.btn:disabled,
.btn.disabled
{
	background-color: var(--surface-disabled) !important;
	border-color: var(--border-subtle) !important;
	color: var(--content-disabled) !important;
	box-shadow: none !important;
	cursor: not-allowed;
	opacity: 1; /* color tokens already encode disabled; avoid stacking opacity */
}


/* ==========================================
 * FILL — primary (Figma type=primary, style=fill)
 * ========================================== */

.btn-primary:not(:disabled):not(.disabled),
.show > .btn-primary.dropdown-toggle
{
	background-color: var(--interaction-primary-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-primary:not(:disabled):not(.disabled):hover,
.show > .btn-primary.dropdown-toggle:hover
{
	background-color: var(--interaction-primary-hover) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-primary:not(:disabled):not(.disabled):focus,
.show > .btn-primary.dropdown-toggle:focus
{
	background-color: var(--interaction-primary-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle:active
{
	background-color: var(--interaction-primary-pressed) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}


/* ==========================================
 * FILL — success / create
 * Currently aliased to primary fill (separate blocks for easy remap to
 * --interaction-success-* later). Figma already has type=success fill.
 * ========================================== */

.btn-success:not(:disabled):not(.disabled),
.show > .btn-success.dropdown-toggle
{
	background-color: var(--interaction-primary-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-success:not(:disabled):not(.disabled):hover,
.show > .btn-success.dropdown-toggle:hover
{
	background-color: var(--interaction-primary-hover) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-success:not(:disabled):not(.disabled):focus,
.show > .btn-success.dropdown-toggle:focus
{
	background-color: var(--interaction-primary-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle:active
{
	background-color: var(--interaction-primary-pressed) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-create:not(:disabled):not(.disabled),
.show > .btn-create.dropdown-toggle
{
	background-color: var(--interaction-primary-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-create:not(:disabled):not(.disabled):hover,
.show > .btn-create.dropdown-toggle:hover
{
	background-color: var(--interaction-primary-hover) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-create:not(:disabled):not(.disabled):focus,
.show > .btn-create.dropdown-toggle:focus
{
	background-color: var(--interaction-primary-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-create:not(:disabled):not(.disabled):active,
.show > .btn-create.dropdown-toggle:active
{
	background-color: var(--interaction-primary-pressed) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}


/* ==========================================
 * FILL — danger
 * ========================================== */

.btn-danger:not(:disabled):not(.disabled),
.show > .btn-danger.dropdown-toggle
{
	background-color: var(--interaction-danger-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-danger:not(:disabled):not(.disabled):hover,
.show > .btn-danger.dropdown-toggle:hover
{
	background-color: var(--interaction-danger-hover) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-danger:not(:disabled):not(.disabled):focus,
.show > .btn-danger.dropdown-toggle:focus
{
	background-color: var(--interaction-danger-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle:active
{
	background-color: var(--interaction-danger-pressed) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}


/* ==========================================
 * FILL — info (no Figma type yet; uses interaction-info tokens)
 * ========================================== */

.btn-info:not(:disabled):not(.disabled),
.show > .btn-info.dropdown-toggle
{
	background-color: var(--interaction-info-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-info:not(:disabled):not(.disabled):hover,
.show > .btn-info.dropdown-toggle:hover
{
	background-color: var(--interaction-info-hover) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-info:not(:disabled):not(.disabled):focus,
.show > .btn-info.dropdown-toggle:focus
{
	background-color: var(--interaction-info-default) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle:active
{
	background-color: var(--interaction-info-pressed) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}


/* ==========================================
 * FILL — warning (legacy — not in Figma button set yet)
 * ========================================== */

.btn-warning:not(:disabled):not(.disabled),
.show > .btn-warning.dropdown-toggle
{
	background-color: var(--warning) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-warning:not(:disabled):not(.disabled):hover,
.show > .btn-warning.dropdown-toggle:hover
{
	background-color: var(--warning-hover) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-warning:not(:disabled):not(.disabled):focus,
.show > .btn-warning.dropdown-toggle:focus
{
	background-color: var(--warning-hover) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}

.btn-warning:not(:disabled):not(.disabled):active,
.show > .btn-warning.dropdown-toggle:active
{
	background-color: var(--warning-hover) !important;
	border-color: transparent !important;
	color: var(--content-inverted) !important;
}


/* ==========================================
 * FILL — cta (legacy — not in Figma button set yet)
 * ========================================== */

.btn-cta:not(:disabled):not(.disabled),
.show > .btn-cta.dropdown-toggle
{
	background-color: var(--cta) !important;
	border-color: transparent !important;
	color: var(--content-primary) !important;
}

.btn-cta:not(:disabled):not(.disabled):hover,
.show > .btn-cta.dropdown-toggle:hover
{
	background-color: var(--cta-hover) !important;
	border-color: transparent !important;
	color: var(--content-primary) !important;
}

.btn-cta:not(:disabled):not(.disabled):focus,
.show > .btn-cta.dropdown-toggle:focus
{
	background-color: var(--cta) !important;
	border-color: transparent !important;
	color: var(--content-primary) !important;
}

.btn-cta:not(:disabled):not(.disabled):active,
.show > .btn-cta.dropdown-toggle:active
{
	background-color: var(--cta-hover) !important;
	border-color: transparent !important;
	color: var(--content-primary) !important;
}


/* ==========================================
 * SUBTLE — primary (Figma style=subtle)
 * btn-secondary is an alias of this (separate blocks).
 * ========================================== */

.btn-subtle-primary:not(:disabled):not(.disabled),
.show > .btn-subtle-primary.dropdown-toggle
{
	background-color: var(--interaction-primary-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-primary-default) !important;
}

.btn-subtle-primary:not(:disabled):not(.disabled):hover,
.show > .btn-subtle-primary.dropdown-toggle:hover
{
	background-color: var(--interaction-primary-subtle-hover) !important;
	border-color: transparent !important;
	color: var(--interaction-primary-hover) !important;
}

.btn-subtle-primary:not(:disabled):not(.disabled):focus,
.show > .btn-subtle-primary.dropdown-toggle:focus
{
	background-color: var(--interaction-primary-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-primary-default) !important;
}

.btn-subtle-primary:not(:disabled):not(.disabled):active,
.show > .btn-subtle-primary.dropdown-toggle:active
{
	background-color: var(--interaction-primary-subtle-pressed) !important;
	border-color: transparent !important;
	color: var(--interaction-primary-pressed) !important;
}

/* secondary → subtle-primary alias */
.btn-secondary:not(:disabled):not(.disabled),
.show > .btn-secondary.dropdown-toggle
{
	background-color: var(--interaction-primary-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-primary-default) !important;
}

.btn-secondary:not(:disabled):not(.disabled):hover,
.show > .btn-secondary.dropdown-toggle:hover
{
	background-color: var(--interaction-primary-subtle-hover) !important;
	border-color: transparent !important;
	color: var(--interaction-primary-hover) !important;
}

.btn-secondary:not(:disabled):not(.disabled):focus,
.show > .btn-secondary.dropdown-toggle:focus
{
	background-color: var(--interaction-primary-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-primary-default) !important;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle:active
{
	background-color: var(--interaction-primary-subtle-pressed) !important;
	border-color: transparent !important;
	color: var(--interaction-primary-pressed) !important;
}


/* ==========================================
 * SUBTLE — success / danger
 * ========================================== */

.btn-subtle-success:not(:disabled):not(.disabled),
.show > .btn-subtle-success.dropdown-toggle
{
	background-color: var(--interaction-success-subtle-default) !important;
	border-color: transparent !important;
	color: var(--content-success) !important;
}

.btn-subtle-success:not(:disabled):not(.disabled):hover,
.show > .btn-subtle-success.dropdown-toggle:hover
{
	background-color: var(--interaction-success-subtle-hover) !important;
	border-color: transparent !important;
	color: var(--content-success) !important;
}

.btn-subtle-success:not(:disabled):not(.disabled):focus,
.show > .btn-subtle-success.dropdown-toggle:focus
{
	background-color: var(--interaction-success-subtle-default) !important;
	border-color: transparent !important;
	color: var(--content-success) !important;
}

.btn-subtle-success:not(:disabled):not(.disabled):active,
.show > .btn-subtle-success.dropdown-toggle:active
{
	background-color: var(--interaction-success-subtle-pressed) !important;
	border-color: transparent !important;
	color: var(--content-success) !important;
}

.btn-subtle-danger:not(:disabled):not(.disabled),
.show > .btn-subtle-danger.dropdown-toggle
{
	background-color: var(--interaction-danger-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-default) !important;
}

.btn-subtle-danger:not(:disabled):not(.disabled):hover,
.show > .btn-subtle-danger.dropdown-toggle:hover
{
	background-color: var(--interaction-danger-subtle-hover) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-hover) !important;
}

.btn-subtle-danger:not(:disabled):not(.disabled):focus,
.show > .btn-subtle-danger.dropdown-toggle:focus
{
	background-color: var(--interaction-danger-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-default) !important;
}

.btn-subtle-danger:not(:disabled):not(.disabled):active,
.show > .btn-subtle-danger.dropdown-toggle:active
{
	background-color: var(--interaction-danger-subtle-pressed) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-pressed) !important;
}

/* delete — IL fill-soft behavior maps to danger subtle */
.btn-delete:not(:disabled):not(.disabled),
.show > .btn-delete.dropdown-toggle
{
	background-color: var(--interaction-danger-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-default) !important;
}

.btn-delete:not(:disabled):not(.disabled):hover,
.show > .btn-delete.dropdown-toggle:hover
{
	background-color: var(--interaction-danger-subtle-hover) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-hover) !important;
}

.btn-delete:not(:disabled):not(.disabled):focus,
.show > .btn-delete.dropdown-toggle:focus
{
	background-color: var(--interaction-danger-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-default) !important;
}

.btn-delete:not(:disabled):not(.disabled):active,
.show > .btn-delete.dropdown-toggle:active
{
	background-color: var(--interaction-danger-subtle-pressed) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-pressed) !important;
}


/* ==========================================
 * OUTLINE (Figma style=outline)
 * ========================================== */

.btn[class*="btn-outline-"]
{
	border-width: var(--btn-border-width-outline) !important;
	border-style: solid !important;
	background-color: var(--interaction-neutral-minimal-default) !important;
	color: var(--interaction-primary-ghost-default);
}

.btn.btn-xs[class*="btn-outline-"]
{
	line-height: calc(var(--btn-xs-height) - 2 * var(--btn-border-width-outline));
	padding: 0 calc(var(--btn-xs-padding-x) - var(--btn-border-width-outline));
}

.btn.btn-sm[class*="btn-outline-"]
{
	line-height: calc(var(--btn-sm-height) - 2 * var(--btn-border-width-outline));
	padding: 0 calc(var(--btn-sm-padding-x) - var(--btn-border-width-outline));
}

.btn.btn-md[class*="btn-outline-"]
{
	line-height: calc(var(--btn-md-height) - 2 * var(--btn-border-width-outline));
	padding: 0 calc(var(--btn-md-padding-x) - var(--btn-border-width-outline));
}

.btn.btn-lg[class*="btn-outline-"]
{
	line-height: calc(var(--btn-lg-height) - 2 * var(--btn-border-width-outline));
	padding: 0 calc(var(--btn-lg-padding-x) - var(--btn-border-width-outline));
}

.btn.btn-xl[class*="btn-outline-"]
{
	line-height: calc(var(--btn-xl-height) - 2 * var(--btn-border-width-outline));
	padding: 0 calc(var(--btn-xl-padding-x) - var(--btn-border-width-outline));
}

/* outline default / primary — neutral border + ghost text */
.btn-outline-default:not(:disabled):not(.disabled),
.btn-outline-primary:not(:disabled):not(.disabled)
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--border-default);
	color: var(--interaction-primary-ghost-default) !important;
}

.btn-outline-default:not(:disabled):not(.disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):hover,
.show > .btn-outline-primary.dropdown-toggle:hover
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--border-default) !important;
	color: var(--interaction-primary-ghost-hover) !important;
}

.btn-outline-default:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle:active,
.btn-outline-primary:not(:disabled):not(.disabled).selected
{
	background-color: var(--interaction-neutral-minimal-pressed) !important;
	border-color: var(--border-default) !important;
	color: var(--interaction-primary-ghost-pressed) !important;
}

.btn-outline-primary-hover:not(:disabled):not(.disabled):hover,
.btn-outline-primary-hover:not(:disabled):not(.disabled):active
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--border-default) !important;
	color: var(--interaction-primary-ghost-hover) !important;
}

/* reveal borders defined by outline-* only on hover */
.btn[class*="btn-outline-"].btn-outline-hover:not(:hover)
{
	border-color: transparent !important;
}

/* outline secondary — same as primary outline (secondary is subtle elsewhere) */
.btn-outline-secondary:not(:disabled):not(.disabled)
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--border-default) !important;
	color: var(--interaction-primary-ghost-default) !important;
}

.btn-outline-secondary:not(:disabled):not(.disabled):hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show > .btn-outline-secondary.dropdown-toggle
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--border-default) !important;
	color: var(--interaction-primary-ghost-hover) !important;
}

/* outline danger */
.btn-outline-danger:not(:disabled):not(.disabled)
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--interaction-danger-medium-default) !important;
	color: var(--interaction-danger-bold-default) !important;
}

.btn-outline-danger:not(:disabled):not(.disabled):hover,
.show > .btn-outline-danger.dropdown-toggle:hover
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--interaction-danger-medium-hover) !important;
	color: var(--interaction-danger-bold-hover) !important;
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.show > .btn-outline-danger.dropdown-toggle:active
{
	background-color: var(--interaction-neutral-minimal-pressed) !important;
	border-color: var(--interaction-danger-medium-pressed) !important;
	color: var(--interaction-danger-bold-pressed) !important;
}

/* outline success — Figma type=success outline (not aliased to primary) */
.btn-outline-success:not(:disabled):not(.disabled)
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--border-success) !important;
	color: var(--content-success) !important;
}

.btn-outline-success:not(:disabled):not(.disabled):hover,
.btn-outline-success:not(:disabled):not(.disabled):active,
.show > .btn-outline-success.dropdown-toggle
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--border-success) !important;
	color: var(--interaction-success-hover) !important;
}

/* outline info */
.btn-outline-info:not(:disabled):not(.disabled)
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--interaction-info-default) !important;
	color: var(--content-info) !important;
}

.btn-outline-info:not(:disabled):not(.disabled):hover,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show > .btn-outline-info.dropdown-toggle
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--interaction-info-hover) !important;
	color: var(--interaction-info-hover) !important;
}

/* outline warning — legacy */
.btn-outline-warning:not(:disabled):not(.disabled)
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--warning) !important;
	color: var(--warning) !important;
}

.btn-outline-warning:not(:disabled):not(.disabled):hover,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.show > .btn-outline-warning.dropdown-toggle
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--warning-hover) !important;
	color: var(--warning-hover) !important;
}

.btn-outline-light:not(:disabled):not(.disabled)
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--border-default) !important;
	color: var(--content-tertiary) !important;
}

.btn-outline-light:not(:disabled):not(.disabled):hover,
.btn-outline-light:not(:disabled):not(.disabled):active,
.show > .btn-outline-light.dropdown-toggle
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--border-hover) !important;
	color: var(--content-secondary) !important;
}

.btn-outline-white:not(:disabled):not(.disabled)
{
	color: var(--content-inverted) !important;
	border-color: var(--content-inverted) !important;
	background-color: transparent !important;
}

/* cancel — outline-neutral */
.btn-cancel:not(:disabled):not(.disabled),
.show > .btn-cancel.dropdown-toggle
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--border-default) !important;
	color: var(--interaction-primary-ghost-default) !important;
}

.btn-cancel:not(:disabled):not(.disabled):hover,
.show > .btn-cancel.dropdown-toggle:hover
{
	background-color: var(--interaction-neutral-minimal-hover) !important;
	border-color: var(--border-hover) !important;
	color: var(--interaction-primary-ghost-hover) !important;
}

.btn-cancel:not(:disabled):not(.disabled):active,
.show > .btn-cancel.dropdown-toggle:active
{
	background-color: var(--interaction-neutral-minimal-pressed) !important;
	border-color: var(--border-hover) !important;
	color: var(--interaction-primary-ghost-pressed) !important;
}

/* delete-hover: quiet outline → danger subtle on interact */
.btn-delete-hover:not(:disabled,.disabled),
.btn-outline-delete-hover:not(:disabled,.disabled)
{
	background-color: var(--interaction-neutral-minimal-default) !important;
	border-color: var(--border-default) !important;
	color: var(--content-tertiary) !important;
}

.btn-delete-hover:not(:disabled,.disabled):hover,
.btn-outline-delete-hover:not(:disabled,.disabled):hover
{
	background-color: var(--interaction-danger-subtle-default) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-default) !important;
}

.btn-delete-hover:not(:disabled,.disabled):focus,
.btn-outline-delete-hover:not(:disabled,.disabled):focus,
.btn-delete-hover:not(:disabled,.disabled):active,
.btn-outline-delete-hover:not(:disabled,.disabled):active
{
	background-color: var(--interaction-danger-subtle-pressed) !important;
	border-color: transparent !important;
	color: var(--interaction-danger-bold-pressed) !important;
}


/* ==========================================
 * GHOST / LINK (Figma style=ghost)
 * ========================================== */

.btn-link:not(:disabled):not(.disabled),
.show > .btn-link.dropdown-toggle
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--interaction-primary-ghost-default) !important;
	box-shadow: none !important;
	text-decoration: none;
}

.btn-link:not(:disabled):not(.disabled):hover,
.show > .btn-link.dropdown-toggle:hover,
.show:hover > .btn-link.dropdown-toggle
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--interaction-primary-ghost-hover) !important;
	box-shadow: none !important;
	text-decoration: none;
}

.btn-link:not(:disabled):not(.disabled):focus,
.show > .btn-link.dropdown-toggle:focus
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--interaction-primary-ghost-default) !important;
}

.btn-link:not(:disabled):not(.disabled):active,
.show > .btn-link.dropdown-toggle:active
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--interaction-primary-ghost-pressed) !important;
}

.btn-link-hover:not(:disabled):not(.disabled),
.show > .btn-link-hover.dropdown-toggle
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--content-primary) !important;
	box-shadow: none !important;
}

.btn-link-hover:not(:disabled):not(.disabled):hover,
.show > .btn-link-hover.dropdown-toggle:hover
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--interaction-primary-ghost-hover) !important;
	box-shadow: none !important;
}

.btn-link-hover:not(:disabled):not(.disabled):focus,
.show > .btn-link-hover.dropdown-toggle:focus
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--interaction-primary-ghost-hover) !important;
}

.btn-link-hover:not(:disabled):not(.disabled):active,
.show > .btn-link-hover.dropdown-toggle:active
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--interaction-primary-ghost-pressed) !important;
}

.btn-outline-link:not(:disabled):not(.disabled),
.show > .btn-outline-link.dropdown-toggle
{
	background-color: transparent !important;
	border-color: transparent !important;
	color: inherit !important;
}

.btn-outline-link:not(:disabled):not(.disabled):hover,
.show > .btn-outline-link.dropdown-toggle:hover,
.show:hover > .btn-outline-link.dropdown-toggle
{
	background-color: var(--surface-primary) !important;
	border-bottom-color: var(--interaction-primary-ghost-hover) !important;
	color: var(--interaction-primary-ghost-hover) !important;
}

.btn-outline-link:not(:disabled):not(.disabled):focus,
.btn-outline-link:not(:disabled):not(.disabled):active,
.btn-outline-link:not(:disabled):not(.disabled).selected,
.show > .btn-outline-link.dropdown-toggle:focus,
.show > .btn-outline-link.dropdown-toggle:active,
.show > .btn-outline-link.dropdown-toggle.selected
{
	background-color: var(--surface-primary) !important;
	border-color: var(--interaction-primary-ghost-hover) !important;
	color: var(--interaction-primary-ghost-hover) !important;
}

.btn-reset:not(:disabled):not(.disabled),
input.form-control[type=reset]:not(:disabled):not(.disabled)
{
	background-color: transparent !important;
	border: none !important;
	color: var(--interaction-primary-ghost-default) !important;
}

.btn-reset:not(:disabled):not(.disabled):hover,
input.form-control[type=reset]:not(:disabled):not(.disabled):hover
{
	color: var(--interaction-primary-ghost-hover) !important;
	box-shadow: none !important;
	text-decoration: underline;
}

.btn-reset:not(:disabled):not(.disabled):active,
input.form-control[type=reset]:not(:disabled):not(.disabled):active
{
	color: var(--interaction-primary-ghost-pressed) !important;
}


/* ==========================================
 * LIGHT (legacy gray fill → neutral subtle)
 * ========================================== */

.btn-light:not(:disabled):not(.disabled)
{
	background-color: var(--interaction-neutral-subtle-default) !important;
	border-color: transparent !important;
	color: var(--content-primary) !important;
}

.btn-light:not(:disabled):not(.disabled):hover
{
	background-color: var(--interaction-neutral-subtle-hover) !important;
}

.btn-light:not(:disabled):not(.disabled):active
{
	background-color: var(--interaction-neutral-subtle-pressed) !important;
}


/* ==========================================
 * COLLAPSE / ICON HELPERS
 * ========================================== */

.btn.btn-collapse
{
	background-color: transparent !important;
	color: var(--content-secondary) !important;
	border: none !important;
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	height: 1.5em;
}

.btn.btn-collapse::before
{
	content: '\f077';
	font-family: var(--fa-family-classic, "Font Awesome 5 Pro");
	font-size: 1rem;
	margin-inline-end: .5em;
}

.btn.btn-collapse.collapsed::before
{
	content: '\f078';
}

.btn.btn-collapse:not(:disabled):not(.disabled)
{
	cursor: pointer;
}

.btn-icon
{
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
}

.btn-tab-icon
{
	display: inline-flex !important;
	border: 1px solid var(--border-subtle) !important;
	background: transparent !important;
	width: 24px !important;
	height: 16px !important;
	padding: 0 !important;
	margin: 0 0 0 4px !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	border-radius: 4px !important;
	line-height: 16px;
	box-shadow: none !important;
	vertical-align: middle !important;
}

.btn-tab-icon .fa,
.btn-tab-icon .fas,
.btn-tab-icon .far,
.btn-tab-icon .fal
{
	font-size: 10px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 16px !important;
	width: auto !important;
	height: auto !important;
}

.btn.btn-fa
{
	border: none !important;
	background: transparent !important;
	width: var(--btn-height);
	height: var(--btn-height);
	padding: 0 !important;
	text-align: center;
	line-height: var(--btn-height);
	font-size: 1rem;
	color: var(--content-secondary);
}

.btn.btn-fa.btn-fa-circle
{
	border: 1px solid var(--border-default) !important;
	border-radius: 50%;
	line-height: calc(var(--btn-height) - 2px);
}

.btn.btn-fa:hover,
.btn.btn-fa:active
{
	color: var(--interaction-primary-ghost-hover);
}

.btn.btn-fa.btn-fa-circle:hover,
.btn.btn-fa.btn-fa-circle:active
{
	border-color: var(--border-hover) !important;
}

.btn.btn-sm.btn-fa
{
	width: var(--btn-sm-height);
	height: var(--btn-sm-height);
	line-height: var(--btn-sm-height);
	font-size: 1em;
}

.btn.btn-sm.btn-fa.btn-fa-circle
{
	line-height: calc(var(--btn-sm-height) - 2px);
}


/* ==========================================
 * BUTTON GROUPS
 * ========================================== */

.btn-group,
.btn-group > .btn,
.btn-group > .dropdown > .btn
{
	border-radius: var(--btn-rounded-radius) !important;
}

.btn-group > .dropdown
{
	display: flex;
}

.btn-group.rounded,
.btn-group.rounded > .btn,
.btn-group > .btn.rounded,
.btn-group.rounded > .dropdown > .btn,
.btn-group > .dropdown > .btn.rounded
{
	border-radius: calc(var(--btn-height) / 2) !important;
}

.btn-group-xs.rounded,
.btn-group-xs.rounded > .btn,
.btn-group-xs > .btn.rounded,
.btn-group-xs.rounded > .dropdown > .btn,
.btn-group-xs > .dropdown > .btn.rounded
{
	border-radius: calc(var(--btn-xs-height) / 2) !important;
}

.btn-group-sm.rounded,
.btn-group-sm.rounded > .btn,
.btn-group-sm > .btn.rounded,
.btn-group-sm.rounded > .dropdown > .btn,
.btn-group-sm > .dropdown > .btn.rounded
{
	border-radius: calc(var(--btn-sm-height) / 2) !important;
}

.btn-group-md.rounded,
.btn-group-md.rounded > .btn,
.btn-group-md > .btn.rounded,
.btn-group-md.rounded > .dropdown > .btn,
.btn-group-md > .dropdown > .btn.rounded
{
	border-radius: calc(var(--btn-md-height) / 2) !important;
}

.btn-group-lg.rounded,
.btn-group-lg.rounded > .btn,
.btn-group-lg > .btn.rounded,
.btn-group-lg.rounded > .dropdown > .btn,
.btn-group-lg > .dropdown > .btn.rounded
{
	border-radius: calc(var(--btn-lg-height) / 2) !important;
}

.btn-group-xl.rounded,
.btn-group-xl.rounded > .btn,
.btn-group-xl > .btn.rounded,
.btn-group-xl.rounded > .dropdown > .btn,
.btn-group-xl > .dropdown > .btn.rounded
{
	border-radius: calc(var(--btn-xl-height) / 2) !important;
}

.btn-group > .btn:not(:first-child),
.btn-group > .dropdown:not(:first-child) > .btn
{
	margin-inline-start: -1px;
}

.btn-group > .btn:not(:last-child),
.btn-group > .dropdown:not(:last-child) > .btn
{
	border-start-end-radius: 0 !important;
	border-end-end-radius: 0 !important;
}

.btn-group > .btn:not(:first-child),
.btn-group > .dropdown:not(:first-child) > .btn
{
	border-start-start-radius: 0 !important;
	border-end-start-radius: 0 !important;
}

.btn.dropdown-toggle-split
{
	padding: 0 .25rem;
}