/* =============================================================================
	 Button component
	 Solid indigo primary. Secondary is neutral. Danger is red.
	 Depends on: tokens.css
	 ============================================================================= */

/* ── Base ────────────────────────────────────────────────────────────────────── */
.shiftora-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--shiftora-space-2);
	block-size:      2.375rem;
	padding-inline:  var(--shiftora-space-5);
	border:          1px solid transparent;
	border-radius:   var(--shiftora-radius-lg);
	font-family:     var(--shiftora-font-family-sans);
	font-size:       var(--shiftora-font-size-sm);
	font-weight:     var(--shiftora-font-weight-semibold);
	line-height:     1;
	cursor:          pointer;
	text-decoration: none;
	white-space:     nowrap;
	transition:
		background       var(--shiftora-transition-fast),
		border-color     var(--shiftora-transition-fast),
		color            var(--shiftora-transition-fast),
		box-shadow       var(--shiftora-transition-normal),
		transform        var(--shiftora-transition-fast);
	-webkit-user-select: none;
	user-select:         none;
}

/*
 * The ring is the solid accent. The translucent tint it used was under 3:1
 * against the page, so on a light screen keyboard focus was close to invisible.
 */
.shiftora-btn:focus-visible {
	outline:        2px solid var(--shiftora-color-border-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--shiftora-color-focus-ring);
}

/* A pressed button moves a pixel. Transform only, so nothing around it reflows. */
.shiftora-btn:active:not(:disabled) {
	transform: translateY(1px);
}

/*
 * The waiting state. The label stays and a ring goes beside it, since swapping the
 * text for a spinner changes the button's width and makes the row jump. The label
 * still reads, so it is clear what is being waited for.
 */
.shiftora-btn.is-loading {
	position:     relative;
	display:      inline-flex;
	align-items:  center;
	gap:          var(--shiftora-space-2);
	min-inline-size: 0;
	cursor:       progress;
}

.shiftora-btn.is-loading::before {
	content:        "";
	inline-size:    0.875rem;
	block-size:     0.875rem;
	flex:           none;
	border:         2px solid currentColor;
	border-top-color: transparent;
	border-radius:  50%;
	opacity:        0.9;
	animation:      shiftora-btn-spin 0.7s linear infinite;
}

/*
 * Keep the disabled look while loading since the control really is unavailable,
 * and block pointer events so a second click cannot queue a duplicate request.
 */
.shiftora-btn.is-loading:disabled,
.shiftora-btn.is-loading[aria-disabled="true"] {
	pointer-events: none;
}

@keyframes shiftora-btn-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.shiftora-btn.is-loading::before {
		animation: none;
	}
}

.shiftora-btn:active:not(:disabled) {
	transform: scale(0.98);
}

.shiftora-btn:disabled,
.shiftora-btn[aria-disabled="true"] {
	background-color: var(--shiftora-n-150);
	border-color:     var(--shiftora-color-border-light);
	color:            var(--shiftora-color-text-disabled);
	cursor:           not-allowed;
	pointer-events:   none;
}

/*
 * Primary.
 *
 * A subtle gradient within the brand indigo. The `background-color` lines stay
 * separate from the `background` shorthand so a consumer can still override the layer.
 */
.shiftora-btn--primary {
	background: var(--shiftora-gradient-primary);
	box-shadow: var(--shiftora-glow-primary);
	border-color:     transparent;
	color:            var(--shiftora-color-on-primary);
	font-weight:      var(--shiftora-font-weight-semibold);
}

.shiftora-btn--primary:hover:not(:disabled) {
	background: var(--shiftora-gradient-primary-hover);
	box-shadow: var(--shiftora-glow-primary-hover);
	transform: translateY(-1px);
	border-color:     transparent;
	color:            var(--shiftora-color-on-primary);
	text-decoration:  none;
}

.shiftora-btn--primary:active:not(:disabled) {
	background: var(--shiftora-gradient-primary-active);
	box-shadow: var(--shiftora-glow-primary);
	transform: translateY(0);
	border-color:     transparent;
}

.shiftora-wrap a.shiftora-btn--primary,
.shiftora-wrap a.shiftora-btn--primary:hover,
.shiftora-wrap a.shiftora-btn--primary:focus {
	color:           var(--shiftora-color-on-primary);
	text-decoration: none;
}

/* ── Secondary, neutral surface ─────────────────────────────────────────────── */
.shiftora-btn--secondary {
	background-color: var(--shiftora-color-bg-raised);
	border-color:     var(--shiftora-color-border);
	color:            var(--shiftora-color-text);
}

.shiftora-btn--secondary:hover:not(:disabled) {
	background-color: var(--shiftora-n-50);
	border-color:     var(--shiftora-n-400);
	color:            var(--shiftora-color-text);
	text-decoration:  none;
}

/* ── Danger, destructive actions ────────────────────────────────────────────── */
.shiftora-btn--danger {
	background: linear-gradient(135deg, var(--shiftora-red-400) 0%, var(--shiftora-red-600) 100%);
	box-shadow: 0 2px 8px rgba(207, 75, 75, 0.18);
	border-color:     var(--shiftora-color-error);
	color:            var(--shiftora-color-on-primary);
}

.shiftora-btn--danger:hover:not(:disabled) {
	background: linear-gradient(135deg, var(--shiftora-red-500) 0%, var(--shiftora-red-700) 100%);
	box-shadow: 0 4px 16px rgba(207, 75, 75, 0.24);
	transform: translateY(-1px);
	border-color:     var(--shiftora-red-600);
	color:            var(--shiftora-color-on-primary);
	text-decoration:  none;
}

/* ── Ghost, minimal / contextual ────────────────────────────────────────────── */
/*
 * A button with no fill. The border stays: a ghost button with a transparent border
 * looks identical to a link, so next to a primary it reads as text, not a choice.
 */
.shiftora-btn--ghost {
	background-color: var(--shiftora-color-card-bg);
	border-color:     var(--shiftora-color-border-strong);
	color:            var(--shiftora-color-text);
}

.shiftora-btn--ghost:hover:not(:disabled) {
	background-color: var(--shiftora-color-bg-subtle);
	border-color:     var(--shiftora-color-border-strong);
}

.shiftora-btn--ghost:hover:not(:disabled) {
	background-color: var(--shiftora-n-150);
	color:            var(--shiftora-color-text);
	text-decoration:  none;
}

/* ── Outline primary ─────────────────────────────────────────────────────────── */
.shiftora-btn--outline {
	background-color: transparent;
	border-color:     var(--shiftora-color-primary-border);
	color:            var(--shiftora-color-primary);
}

.shiftora-btn--outline:hover:not(:disabled) {
	background-color: var(--shiftora-color-primary-subtle);
	border-color:     var(--shiftora-color-primary);
	color:            var(--shiftora-color-primary-hover);
	text-decoration:  none;
}

/* ── Link ─────────────────────────────────────────────────────────────────────── */
.shiftora-btn--link {
	background-color:     transparent;
	border-color:         transparent;
	color:                var(--shiftora-color-text-link);
	padding-inline:       var(--shiftora-space-1);
	block-size:           auto;
	text-decoration:      underline;
	text-underline-offset: 3px;
}

.shiftora-btn--link:hover:not(:disabled) {
	color: var(--shiftora-color-text-link-hover);
}

/* ── Sizes ───────────────────────────────────────────────────────────────────── */
.shiftora-btn--sm {
	block-size:     2rem;
	padding-inline: var(--shiftora-space-3);
	font-size:      var(--shiftora-font-size-xs);
	border-radius:  var(--shiftora-radius-md);
}

.shiftora-btn--lg {
	block-size:     2.75rem;
	padding-inline: var(--shiftora-space-6);
	font-size:      var(--shiftora-font-size-base);
}

/* Icon-only */
.shiftora-btn--icon {
	padding-inline: 0;
	inline-size:    2.375rem;
	aspect-ratio:   1;
}

.shiftora-btn--icon.shiftora-btn--sm { inline-size: 2rem; }
.shiftora-btn--icon.shiftora-btn--lg { inline-size: 2.75rem; }

/* Icon container badge inside button */
.shiftora-btn__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	inline-size:     1.2rem;
	block-size:      1.2rem;
	flex-shrink:     0;
	border-radius:   var(--shiftora-radius-sm);
	background:      rgba(0, 0, 0, 0.06);
}

.shiftora-btn__icon svg {
	display:      block;
	inline-size:  0.85rem;
	block-size:   0.85rem;
	stroke-width: 1.85;
}

/* Full width */
.shiftora-btn--full {
	inline-size: 100%;
}

/* Danger ghost (link-like destructive) */
.shiftora-btn--ghost-danger {
	background-color: transparent;
	border-color:     transparent;
	color:            var(--shiftora-color-error);
}

.shiftora-btn--ghost-danger:hover:not(:disabled) {
	background-color: var(--shiftora-color-error-bg);
	color:            var(--shiftora-color-error-text);
	text-decoration:  none;
}