/* Button Component Styles */
/* Styled to match the design system button component */

.custom-button {
  /* Base button styles */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important; /* gap-2 */
  white-space: nowrap !important;
  border-radius: var(--app-radius, 6px) !important; /* rounded-app-radius */
  font-size: 14px !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  transition: all 150ms ease-in-out !important; /* transition-all duration-150 */
  cursor: pointer !important;
  border: none !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important; /* Remove underline from anchor tags */
}

/* Ensure button element itself has proper display */
button.custom-button,
a.custom-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important; /* Remove underline from anchor tags */
}

.custom-button:active:not(:disabled) {
  transform: scale(0.95) !important; /* active:scale-95 */
}

.custom-button:disabled,
.custom-button[disabled] {
  pointer-events: none !important; /* disabled:pointer-events-none */
  opacity: 0.5 !important; /* disabled:opacity-50 */
  cursor: not-allowed !important;
}

.custom-button:disabled:active,
.custom-button[disabled]:active,
.custom-button:disabled:hover,
.custom-button[disabled]:hover {
  transform: scale(1) !important; /* disabled:hover:scale-100 disabled:active:scale-100 */
}

/* SVG icon styling */
.custom-button svg,
.custom-button [class*="lucide-icon"] {
  pointer-events: none !important;
  flex-shrink: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Ensure icons are visible */
.custom-button .button-icon,
.custom-button .button-icon svg,
.custom-button .button-icon [class*="lucide-icon"],
.custom-button .button-spinner,
.custom-button .button-spinner svg,
.custom-button .button-spinner [class*="lucide-icon"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
}

/* Size variants */
.custom-button-sm {
  height: 32px !important; /* h-8 */
  border-radius: var(--app-radius, 6px) !important; /* rounded-app-radius */
  padding: 0 12px !important; /* px-3 */
  font-size: 12px !important; /* text-xs */
}

.custom-button-md {
  height: 36px !important; /* h-9 */
  padding: 8px 16px !important; /* px-4 py-2 */
}

.custom-button-lg {
  height: 40px !important; /* h-10 */
  border-radius: var(--app-radius, 6px) !important; /* rounded-app-radius */
  padding: 0 32px !important; /* px-8 */
}

.custom-button-xl {
  height: 44px !important; /* h-11 */
  border-radius: var(--app-radius, 6px) !important; /* rounded-app-radius */
  padding: 0 32px !important; /* px-8 */
  font-size: 16px !important; /* text-base */
}

.custom-button-icon {
  height: 36px !important; /* h-9 */
  width: 36px !important; /* w-9 */
  padding: 0 !important;
}

/* Variant: default (bg-foreground text-background) */
.custom-button-default,
button.custom-button-default,
a.custom-button-default {
  background-color: hsl(var(--foreground)) !important;
  color: hsl(var(--background)) !important;
}

.custom-button-default:hover:not(:disabled) {
  background-color: hsl(var(--foreground) / 0.7) !important; /* hover:bg-foreground/70 */
}

/* Variant: destructive */
.custom-button-destructive,
button.custom-button-destructive,
a.custom-button-destructive {
  background-color: hsl(var(--destructive)) !important;
  color: hsl(var(--status-text)) !important; /* destructive-foreground maps to status-text (white) */
}

.custom-button-destructive:hover:not(:disabled) {
  background-color: hsl(var(--destructive) / 0.8) !important; /* hover:bg-destructive/80 */
}

/* Variant: outline */
.custom-button-outline,
button.custom-button-outline,
a.custom-button-outline {
  border: 1px solid hsl(var(--border)) !important; /* border border-input */
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important; /* text-foreground */
}

.custom-button-outline:hover:not(:disabled) {
  background-color: hsl(var(--accent)) !important; /* hover:bg-accent */
  color: hsl(var(--foreground)) !important; /* hover:text-accent-foreground (accent-foreground maps to foreground) */
}

/* Variant: secondary */
.custom-button-secondary,
button.custom-button-secondary,
a.custom-button-secondary {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important; /* secondary-foreground maps to foreground (dark text) */
}

.custom-button-secondary:hover:not(:disabled) {
  background-color: hsl(var(--accent)) !important; /* hover:bg-accent */
}

/* Variant: ghost */
.custom-button-ghost,
button.custom-button-ghost,
a.custom-button-ghost {
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important; /* text-foreground */
}

.custom-button-ghost:hover:not(:disabled) {
  background-color: hsl(var(--accent)) !important; /* hover:bg-accent */
  color: hsl(var(--foreground)) !important; /* hover:text-accent-foreground (accent-foreground maps to foreground) */
}

/* Variant: link */
.custom-button-link,
button.custom-button-link,
a.custom-button-link {
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important; /* text-primary (primary maps to foreground in design system) */
  text-decoration: none !important; /* No underline by default */
  text-underline-offset: 4px !important; /* underline-offset-4 */
}

.custom-button-link:hover:not(:disabled) {
  text-decoration: underline !important; /* hover:underline */
  color: hsl(var(--accent-brand)) !important; /* hover:text-accent-brand */
}

/* Variant: accent-brand */
.custom-button-accent-brand,
button.custom-button-accent-brand,
a.custom-button-accent-brand {
  background-color: hsl(var(--accent-brand)) !important;
  color: white !important;
}

.custom-button-accent-brand:hover:not(:disabled) {
  opacity: 0.8 !important; /* hover:opacity-80 */
}

/* Variant: accent-brand-outline */
.custom-button-accent-brand-outline,
button.custom-button-accent-brand-outline,
a.custom-button-accent-brand-outline {
  border: 1px solid hsl(var(--accent-brand)) !important; /* border border-accent-brand */
  background-color: transparent !important;
  color: hsl(var(--accent-brand)) !important; /* text-accent-brand */
}

.custom-button-accent-brand-outline:hover:not(:disabled) {
  background-color: hsl(var(--accent-brand) / 0.2) !important; /* hover:bg-accent-brand/20 */
}

/* Loading state - add spinner styling */
.custom-button.loading {
  position: relative !important;
}

/* Spinner animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.custom-button .button-spinner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: spin 1s linear infinite !important;
}

.custom-button .button-spinner svg,
.custom-button .button-spinner [class*="lucide-icon"] {
  width: 16px !important;
  height: 16px !important;
}

/* Icon styling */
.custom-button .button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.custom-button .button-icon svg,
.custom-button .button-icon [class*="lucide-icon"] {
  width: 16px !important;
  height: 16px !important;
}

.custom-button-sm .button-icon svg,
.custom-button-sm .button-icon [class*="lucide-icon"],
.custom-button-sm .button-spinner svg,
.custom-button-sm .button-spinner [class*="lucide-icon"] {
  width: 12px !important; /* size-3 for sm */
  height: 12px !important;
}

.custom-button-lg .button-icon svg,
.custom-button-lg .button-icon [class*="lucide-icon"],
.custom-button-xl .button-icon svg,
.custom-button-xl .button-icon [class*="lucide-icon"],
.custom-button-lg .button-spinner svg,
.custom-button-lg .button-spinner [class*="lucide-icon"],
.custom-button-xl .button-spinner svg,
.custom-button-xl .button-spinner [class*="lucide-icon"] {
  width: 20px !important; /* size-5 for lg/xl */
  height: 20px !important;
}

.custom-button-icon .button-icon svg,
.custom-button-icon .button-icon [class*="lucide-icon"] {
  width: 16px !important; /* size-4 for icon */
  height: 16px !important;
}

/* Text wrapper */
.custom-button .button-text {
  display: inline-block !important;
  color: inherit !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make sure spans inside button are visible and inherit color from button */
.custom-button span {
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure button and anchor elements display content correctly */
/* Don't set color here - variant classes will set the color */
button.custom-button,
a.custom-button {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important; /* Remove underline from anchor tags */
}

/* Ensure button content is visible and inherits color from button */
button.custom-button *,
a.custom-button * {
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important; /* Children inherit color from button element */
}

/* Ensure buttons work as anchor tags too */
.custom-button a {
  text-decoration: none !important;
  color: inherit !important;
  display: inherit !important;
  align-items: inherit !important;
  justify-content: inherit !important;
  width: 100% !important;
  height: 100% !important;
}