/* =============================================================================
   A4 - button, ported from HealthExpress by build/kit/port-css.py.

   Structure unchanged. Applied: 13 colour literal(s) -> on-accent, 18 rgb-channel
   tint(s) -> colour-mix, 0 hand-authored dark override(s) removed, 0 silent
   literal fallback(s) dropped, 0 black shadow(s) re-based on --ink,
   18 decorative glow(s) removed from bordered controls.

   No Bootstrap: these rules were already token-driven. Only the markup was ever
   coupled to it.
   ========================================================================== */

/* ============================================================================
   HealthExpress Theme - Button Component
   Filled, outline, text, icon, sizes, color variants, FAB, loading state
   ============================================================================ */

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-gap-2);
  padding-block: 0.4375rem;
  padding-inline: 1.25rem;
  font-family: var(--s-font-family-base);
  font-size: var(--s-font-size-base);
  font-weight: var(--s-font-weight-medium);
  line-height: var(--s-line-height-base);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--s-border-width) solid transparent;
  border-radius: var(--s-border-radius);
  transition: var(--s-transition-bg), var(--s-transition-color),
              var(--s-transition-border), var(--s-transition-shadow),
              var(--s-transition-transform);
  outline: none;
  position: relative;
  overflow: hidden;
}

.s-btn:focus-visible {
  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
  outline-offset: var(--s-focus-ring-offset);
}

.s-btn:active {
  transform: scale(0.97);
}

.s-btn:disabled,
.s-btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Filled Variants
   --------------------------------------------------------------------------- */

.s-btn-primary {
  background-color: var(--s-primary);
  border-color: var(--s-primary);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-primary:hover {
  background-color: var(--s-primary-hover);
  border-color: var(--s-primary-hover);
  box-shadow: none;
}

.s-btn-secondary {
  background-color: var(--s-secondary);
  border-color: var(--s-secondary);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-secondary:hover {
  background-color: var(--s-secondary-hover);
  border-color: var(--s-secondary-hover);
  box-shadow: none;
}

.s-btn-success {
  background-color: var(--s-success);
  border-color: var(--s-success);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-success:hover {
  background-color: var(--s-success-hover);
  border-color: var(--s-success-hover);
  box-shadow: none;
}

.s-btn-danger {
  background-color: var(--s-danger);
  border-color: var(--s-danger);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-danger:hover {
  background-color: var(--s-danger-hover);
  border-color: var(--s-danger-hover);
  box-shadow: none;
}

.s-btn-warning {
  background-color: var(--s-warning);
  border-color: var(--s-warning);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-warning:hover {
  background-color: var(--s-warning-hover);
  border-color: var(--s-warning-hover);
  box-shadow: none;
}

.s-btn-info {
  background-color: var(--s-info);
  border-color: var(--s-info);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-info:hover {
  background-color: var(--s-info-hover);
  border-color: var(--s-info-hover);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Outline Variants
   --------------------------------------------------------------------------- */

.s-btn-outline-primary {
  border-color: var(--s-primary);
  color: var(--s-primary);
  background-color: transparent;
}

.s-btn-outline-primary:hover {
  background-color: var(--s-primary);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-outline-secondary {
  border-color: var(--s-secondary);
  color: var(--s-secondary);
  background-color: transparent;
}

.s-btn-outline-secondary:hover {
  background-color: var(--s-secondary);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-outline-success {
  border-color: var(--s-success);
  color: var(--s-success);
  background-color: transparent;
}

.s-btn-outline-success:hover {
  background-color: var(--s-success);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-outline-danger {
  border-color: var(--s-danger);
  color: var(--s-danger);
  background-color: transparent;
}

.s-btn-outline-danger:hover {
  background-color: var(--s-danger);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-outline-warning {
  border-color: var(--s-warning);
  color: var(--s-warning);
  background-color: transparent;
}

.s-btn-outline-warning:hover {
  background-color: var(--s-warning);
  color: var(--on-accent);
  box-shadow: none;
}

.s-btn-outline-info {
  border-color: var(--s-info);
  color: var(--s-info);
  background-color: transparent;
}

.s-btn-outline-info:hover {
  background-color: var(--s-info);
  color: var(--on-accent);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Text / Ghost Variants (no border, no bg)
   --------------------------------------------------------------------------- */

.s-btn-text-primary   { color: var(--s-primary);   background: transparent; border-color: transparent; box-shadow: none; }
.s-btn-text-secondary { color: var(--s-secondary); background: transparent; border-color: transparent; box-shadow: none; }
.s-btn-text-success   { color: var(--s-success);   background: transparent; border-color: transparent; box-shadow: none; }
.s-btn-text-danger    { color: var(--s-danger);    background: transparent; border-color: transparent; box-shadow: none; }
.s-btn-text-warning   { color: var(--s-warning);   background: transparent; border-color: transparent; box-shadow: none; }
.s-btn-text-info      { color: var(--s-info);      background: transparent; border-color: transparent; box-shadow: none; }

.s-btn-text-primary:hover   { background-color: var(--s-primary-light); }
.s-btn-text-secondary:hover { background-color: var(--s-secondary-light); }
.s-btn-text-success:hover   { background-color: var(--s-success-light); }
.s-btn-text-danger:hover    { background-color: var(--s-danger-light); }
.s-btn-text-warning:hover   { background-color: var(--s-warning-light); }
.s-btn-text-info:hover      { background-color: var(--s-info-light); }

/* ---------------------------------------------------------------------------
   Sizes
   --------------------------------------------------------------------------- */

.s-btn-sm {
  padding-block: 0.25rem;
  padding-inline: 0.875rem;
  font-size: var(--s-font-size-sm);
  border-radius: var(--s-border-radius-sm);
}

.s-btn-lg {
  padding-block: 0.5625rem;
  padding-inline: 1.5rem;
  font-size: var(--s-font-size-lg);
  border-radius: var(--s-border-radius-lg);
}

.s-btn-xl {
  padding-block: 0.75rem;
  padding-inline: 2rem;
  font-size: var(--s-font-size-xl);
  border-radius: var(--s-border-radius-lg);
}

/* ---------------------------------------------------------------------------
   Icon Button (square)
   --------------------------------------------------------------------------- */

.s-btn-icon {
  inline-size: 2.375rem;
  block-size: 2.375rem;
  padding: 0;
  font-size: 1.125rem;
}

.s-btn-icon.s-btn-sm {
  inline-size: 1.875rem;
  block-size: 1.875rem;
  font-size: 0.875rem;
}

.s-btn-icon.s-btn-lg {
  inline-size: 3rem;
  block-size: 3rem;
  font-size: 1.375rem;
}

.s-btn-icon-round {
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Block (full width)
   --------------------------------------------------------------------------- */

.s-btn-block {
  display: flex;
  inline-size: 100%;
}

/* ---------------------------------------------------------------------------
   Floating Action Button (FAB)
   --------------------------------------------------------------------------- */

.s-fab {
  position: fixed;
  inset-block-end: 2rem;
  inset-inline-end: 2rem;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.5rem;
  box-shadow: var(--s-shadow-lg);
  z-index: var(--s-z-fixed);
  transition: var(--s-transition-bg), var(--s-transition-shadow), var(--s-transition-transform);
}

.s-fab:hover {
  transform: scale(1.08);
  box-shadow: var(--s-shadow-xl);
}

.s-fab-sm {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  font-size: 1.125rem;
}

.s-fab-lg {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  font-size: 1.75rem;
}

/* Extended FAB (with text) */
.s-fab-extended {
  inline-size: auto;
  border-radius: var(--s-border-radius-pill);
  padding-inline: 1.5rem;
  gap: var(--s-gap-2);
}

/* ---------------------------------------------------------------------------
   Loading State
   --------------------------------------------------------------------------- */

.s-btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.s-btn-loading::after {
  content: '';
  position: absolute;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: s-btn-spin 0.6s linear infinite;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  margin-block-start: -0.5625rem;
  margin-inline-start: -0.5625rem;
  color: var(--on-accent);
}

/* Fix loading spinner color for outline & text variants */
.s-btn-outline-primary.s-btn-loading::after   { color: var(--s-primary); }
.s-btn-outline-secondary.s-btn-loading::after  { color: var(--s-secondary); }
.s-btn-outline-success.s-btn-loading::after    { color: var(--s-success); }
.s-btn-outline-danger.s-btn-loading::after     { color: var(--s-danger); }
.s-btn-outline-warning.s-btn-loading::after    { color: var(--s-warning); }
.s-btn-outline-info.s-btn-loading::after       { color: var(--s-info); }

.s-btn-text-primary.s-btn-loading::after   { color: var(--s-primary); }
.s-btn-text-secondary.s-btn-loading::after { color: var(--s-secondary); }
.s-btn-text-success.s-btn-loading::after   { color: var(--s-success); }
.s-btn-text-danger.s-btn-loading::after    { color: var(--s-danger); }
.s-btn-text-warning.s-btn-loading::after   { color: var(--s-warning); }
.s-btn-text-info.s-btn-loading::after      { color: var(--s-info); }

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

/* ---------------------------------------------------------------------------
   Button Group
   --------------------------------------------------------------------------- */

.s-btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.s-btn-group > .s-btn {
  border-radius: 0;
}

.s-btn-group > .s-btn:first-child {
  border-start-start-radius: var(--s-border-radius);
  border-end-start-radius: var(--s-border-radius);
}

.s-btn-group > .s-btn:last-child {
  border-start-end-radius: var(--s-border-radius);
  border-end-end-radius: var(--s-border-radius);
}

.s-btn-group > .s-btn:not(:first-child) {
  margin-inline-start: calc(-1 * var(--s-border-width));
}

.s-btn-group-vertical {
  flex-direction: column;
}

.s-btn-group-vertical > .s-btn {
  border-radius: 0;
}

.s-btn-group-vertical > .s-btn:first-child {
  border-start-start-radius: var(--s-border-radius);
  border-start-end-radius: var(--s-border-radius);
}

.s-btn-group-vertical > .s-btn:last-child {
  border-end-start-radius: var(--s-border-radius);
  border-end-end-radius: var(--s-border-radius);
}

.s-btn-group-vertical > .s-btn:not(:first-child) {
  margin-block-start: calc(-1 * var(--s-border-width));
}