/**
 * ==========================================================================
 * VERIMUS DESIGN SYSTEM - BUTTON COMPONENTS
 * ==========================================================================
 * 
 * Consolidated button styles for the Verimus theme.
 * 
 * Button Classes:
 * - .v-btn           = Base button class (NEW standardized naming)
 * - .verimus-btn     = Legacy alias (maintained for backward compatibility)
 * - .btn             = Bootstrap compatibility
 * 
 * Variants:
 * - .v-btn--primary    / .primary-verimus-btn
 * - .v-btn--secondary  / .secondary-verimus-btn
 * - .v-btn--outline    / .outline-verimus-btn
 * - .v-btn--outline-secondary / .outline-secondary-verimus-btn
 * - .v-btn--danger     / .danger-verimus-btn
 * - .v-btn--link       / .link-verimus-btn
 * - .v-btn--ghost      / (transparent, for icons)
 * 
 * Sizes:
 * - .v-btn--sm  / .verimus-btn-sm
 * - .v-btn--lg  / .verimus-btn-lg
 * 
 * States:
 * - .is-loading  / .button__loading
 * - :disabled
 * - .is-disabled
 * 
 * Depends on: _variables.css
 * ==========================================================================
 */

/* ==========================================================================
   BASE BUTTON STYLES
   ========================================================================== */

.v-btn,
.verimus-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);

  /* Sizing */
  height: var(--btn-height-md);
  padding: var(--btn-padding-y) var(--btn-padding-x);

  /* Typography */
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight) !important;
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  /* Appearance */
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--btn-border-radius);
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;

  /* Transitions */
  transition:
    background-color var(--transition-base) var(--ease-in-out),
    color var(--transition-base) var(--ease-in-out),
    border-color var(--transition-base) var(--ease-in-out),
    box-shadow var(--transition-base) var(--ease-in-out),
    transform var(--transition-fast) var(--ease-in-out);
}

/* Remove default browser button styling */
.v-btn::-moz-focus-inner,
.verimus-btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Anchor elements as buttons */
a.v-btn,
a.verimus-btn,
a.v-btn:hover,
a.verimus-btn:hover,
a.v-btn:focus,
a.verimus-btn:focus,
a.v-btn:visited,
a.verimus-btn:visited {
  text-decoration: none;
}

/* Focus state */
.v-btn:focus-visible,
.verimus-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Disabled state */
.v-btn:disabled,
.v-btn.is-disabled,
.verimus-btn:disabled,
.verimus-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}

/* Active/pressed state */
.v-btn:active:not(:disabled),
.verimus-btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* ==========================================================================
   SIZE VARIANTS
   ========================================================================== */

/* Small */
.v-btn--sm,
.verimus-btn-sm {
  height: var(--btn-height-sm);
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--font-size-xs);
  gap: var(--spacing-1);
}

/* Large */
.v-btn--lg,
.verimus-btn-lg,
.verimus-btn-size-2 {
  height: var(--btn-height-lg);
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  font-size: var(--font-size-base);
  gap: var(--spacing-3);
}

/* Full width */
.v-btn--full,
.v-btn--block {
  width: 100%;
}

/* Icon only (square button) */
.v-btn--icon {
  width: var(--btn-height-md);
  padding: 0;
  justify-content: center;
}

.v-btn--icon.v-btn--sm {
  width: var(--btn-height-sm);
}

.v-btn--icon.v-btn--lg {
  width: var(--btn-height-lg);
}

/* ==========================================================================
   COLOR VARIANTS - PRIMARY
   ========================================================================== */

.v-btn--primary,
.primary-verimus-btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.v-btn--primary:hover:not(:disabled),
.primary-verimus-btn:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--white);
}

.v-btn--primary:active:not(:disabled),
.primary-verimus-btn:active:not(:disabled) {
  background-color: var(--color-primary);
}

/* Dark mode */
.dark-mode .v-btn--primary,
.dark-mode .primary-verimus-btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.dark-mode .v-btn--primary:hover:not(:disabled),
.dark-mode .primary-verimus-btn:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* ==========================================================================
   COLOR VARIANTS - SECONDARY
   ========================================================================== */

.v-btn--secondary,
.secondary-verimus-btn {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--white);
}

.v-btn--secondary:hover:not(:disabled),
.secondary-verimus-btn:hover:not(:disabled) {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

/* Dark mode */
.dark-mode .v-btn--secondary,
.dark-mode .secondary-verimus-btn {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--color-secondary);
}

.dark-mode .v-btn--secondary:hover:not(:disabled),
.dark-mode .secondary-verimus-btn:hover:not(:disabled) {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
}

/* ==========================================================================
   COLOR VARIANTS - OUTLINE PRIMARY
   ========================================================================== */

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

.v-btn--outline:hover:not(:disabled),
.outline-verimus-btn:hover:not(:disabled) {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

/* Dark mode */
.dark-mode .v-btn--outline,
.dark-mode .outline-verimus-btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.dark-mode .v-btn--outline:hover:not(:disabled),
.dark-mode .outline-verimus-btn:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--white);
}

/* ==========================================================================
   COLOR VARIANTS - OUTLINE SECONDARY
   ========================================================================== */

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

.v-btn--outline-secondary:hover:not(:disabled),
.outline-secondary-verimus-btn:hover:not(:disabled) {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--white);
}

/* Dark mode */
.dark-mode .v-btn--outline-secondary,
.dark-mode .outline-secondary-verimus-btn {
  border-color: var(--white);
  color: var(--white);
}

.dark-mode .v-btn--outline-secondary:hover:not(:disabled),
.dark-mode .outline-secondary-verimus-btn:hover:not(:disabled) {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--color-secondary);
}

/* ==========================================================================
   COLOR VARIANTS - DANGER
   ========================================================================== */

.v-btn--danger,
.danger-verimus-btn {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--white);
}

.v-btn--danger:hover:not(:disabled),
.danger-verimus-btn:hover:not(:disabled) {
  background-color: var(--color-error-dark);
  border-color: var(--color-error-dark);
  color: var(--white);
}

.v-btn--danger:focus-visible,
.danger-verimus-btn:focus-visible {
  box-shadow: var(--shadow-focus-error);
}

/* ==========================================================================
   COLOR VARIANTS - SUCCESS
   ========================================================================== */

.v-btn--success,
.success-verimus-btn {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--white);
}

.v-btn--success:hover:not(:disabled),
.success-verimus-btn:hover:not(:disabled) {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
  color: var(--white);
}

.v-btn--success:focus-visible,
.success-verimus-btn:focus-visible {
  box-shadow: var(--shadow-focus-success);
}

/* ==========================================================================
   COLOR VARIANTS - WARNING
   ========================================================================== */

.v-btn--warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--gray-900);
}

.v-btn--warning:hover:not(:disabled) {
  background-color: var(--color-warning-dark);
  border-color: var(--color-warning-dark);
  color: var(--gray-900);
}

/* ==========================================================================
   COLOR VARIANTS - LINK
   ========================================================================== */

.v-btn--link,
.link-verimus-btn {
  height: auto;
  padding: 0;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--color-secondary);
  border-radius: 0;
  color: var(--color-secondary);
}

.v-btn--link:hover:not(:disabled),
.link-verimus-btn:hover:not(:disabled) {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.v-btn--link:active:not(:disabled),
.link-verimus-btn:active:not(:disabled) {
  transform: none;
}

/* Dark mode */
.dark-mode .v-btn--link,
.dark-mode .link-verimus-btn {
  border-bottom-color: var(--white);
  color: var(--white);
}

.dark-mode .v-btn--link:hover:not(:disabled),
.dark-mode .link-verimus-btn:hover:not(:disabled) {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   COLOR VARIANTS - GHOST (Transparent)
   ========================================================================== */

.v-btn--ghost,
.ghost-verimus-btn {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.v-btn--ghost:hover:not(:disabled),
.ghost-verimus-btn:hover:not(:disabled) {
  background-color: var(--gray-100);
  color: var(--text-primary);
}

/* Dark mode */
.dark-mode .v-btn--ghost,
.dark-mode .ghost-verimus-btn {
  color: var(--dark-text-secondary);
}

.dark-mode .v-btn--ghost:hover:not(:disabled),
.dark-mode .ghost-verimus-btn:hover:not(:disabled) {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

/* ==========================================================================
   COLOR VARIANTS - INACTIVE (Toggle)
   ========================================================================== */

.v-btn--inactive,
.inactive-verimus-btn {
  background-color: var(--gray-200);
  border-color: var(--gray-200);
  color: var(--color-secondary);
}

.v-btn--inactive:disabled,
.inactive-verimus-btn:disabled {
  background-color: var(--gray-200);
  color: var(--color-secondary);
  opacity: 1;
}

.v-btn--inactive:not(:disabled),
.inactive-verimus-btn:not(:disabled) {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.v-btn--inactive:not(:disabled):hover,
.inactive-verimus-btn:not(:disabled):hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Dark mode */
.dark-mode .v-btn--inactive:disabled,
.dark-mode .inactive-verimus-btn:disabled {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-bg-tertiary);
  color: var(--white);
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.v-btn.is-loading,
.verimus-btn.is-loading,
.button__loading {
  position: relative;
  pointer-events: none;
}

.v-btn.is-loading>*,
.verimus-btn.is-loading>* {
  visibility: hidden;
}

/* Loading spinner with color set to transparent on text */
.button__loading {
  color: transparent !important;
}

.v-btn.is-loading::after,
.verimus-btn.is-loading::after,
.button__loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: v-btn-spin 0.8s linear infinite;
}

/* Spinner color for outline/light buttons */
.v-btn--outline.is-loading::after,
.v-btn--outline-secondary.is-loading::after,
.v-btn--link.is-loading::after,
.v-btn--ghost.is-loading::after,
.outline-verimus-btn.button__loading::after,
.outline-secondary-verimus-btn.button__loading::after,
.link-verimus-btn.button__loading::after {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: var(--color-primary);
}

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

/* ==========================================================================
   BUTTON WITH ICON
   ========================================================================== */

.v-btn__icon,
.verimus-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon sizing based on button size */
.v-btn--sm .v-btn__icon,
.verimus-btn-sm .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.v-btn__icon,
.verimus-btn .icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.v-btn--lg .v-btn__icon,
.verimus-btn-lg .icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

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

.v-btn-group {
  display: inline-flex;
  gap: 0;
}

.v-btn-group>.v-btn,
.v-btn-group>.verimus-btn {
  border-radius: 0;
}

.v-btn-group>.v-btn:first-child,
.v-btn-group>.verimus-btn:first-child {
  border-top-left-radius: var(--btn-border-radius);
  border-bottom-left-radius: var(--btn-border-radius);
}

.v-btn-group>.v-btn:last-child,
.v-btn-group>.verimus-btn:last-child {
  border-top-right-radius: var(--btn-border-radius);
  border-bottom-right-radius: var(--btn-border-radius);
}

.v-btn-group>.v-btn:not(:last-child),
.v-btn-group>.verimus-btn:not(:last-child) {
  border-right-width: 0;
}

/* ==========================================================================
   SPECIAL BUTTON CLASSES (Legacy Support)
   ========================================================================== */

/* Document table button - moved to components/tables.css */

/* Create button */
.btn-create {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
}

/* Quick actions button */
.quick-actions__btn-create {
  font-weight: var(--font-weight-bold) !important;
  padding: var(--btn-padding-y) var(--btn-padding-x) !important;
  border-radius: var(--btn-border-radius) !important;
}

/* Transparent/None button */
.button-none,
.button-none:hover {
  background-color: transparent;
  border: none;
}

/* Cancel button for form actions */
.v-btn--cancel,
.form-actions .cancel-btn {
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: underline;
  color: var(--text-secondary);
  height: auto;
}

.v-btn--cancel:hover,
.form-actions .cancel-btn:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   BOOTSTRAP BUTTON OVERRIDES
   ========================================================================== */

/* Ensure Bootstrap buttons use our variables */
.btn {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  transition:
    background-color var(--transition-base) var(--ease-in-out),
    color var(--transition-base) var(--ease-in-out),
    border-color var(--transition-base) var(--ease-in-out);
}

.btn-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

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

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--white);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

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

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

.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--white);
}

.btn-danger {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--white);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--color-error-dark);
  border-color: var(--color-error-dark);
  color: var(--white);
}

/* ==========================================================================
   WOOCOMMERCE BUTTON OVERRIDES
   ========================================================================== */

button.woocommerce-Button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y-lg) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  transition: background-color var(--transition-base) var(--ease-in-out);
}

button.woocommerce-Button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--white);
}

/* ==========================================================================
   GRAVITY FORMS BUTTON OVERRIDES
   ========================================================================== */

.gform_button {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y-lg) var(--btn-padding-x);
  font-weight: var(--btn-font-weight);
  transition: background-color var(--transition-base) var(--ease-in-out);
}

.gform_button:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* ==========================================================================
   DISABLED BUTTON STATES (Specific Overrides)
   ========================================================================== */

/* Primary button disabled - maintains brand color with reduced opacity */
.v-btn--primary:disabled,
.primary-verimus-btn:disabled,
button[type="submit"]:disabled {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
  opacity: 0.65;
}

/* ==========================================================================
   REMOVE/DESTRUCTIVE LINK BUTTON
   ========================================================================== */

.remove-document {
  color: var(--color-error) !important;
  text-decoration: underline;
  text-decoration-color: var(--color-error);
  transition: text-decoration-color var(--transition-base);
}

.remove-document:hover {
  text-decoration-color: transparent !important;
}

/* ==========================================================================
   BUTTON BLUE/OUTLINE VARIANTS (Legacy)
   ========================================================================== */

.verimus-btn.button-blue {
  background-color: var(--color-secondary);
  font-weight: var(--btn-font-weight);
}

.verimus-btn.button-blue:hover {
  background-color: var(--color-secondary-hover, #1F2937bb);
}

.verimus-btn.button-outline {
  background-color: transparent;
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  padding: calc(var(--btn-padding-y) - 1px) var(--btn-padding-x);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
}

.verimus-btn.button-outline:hover {
  background-color: var(--color-secondary);
  color: var(--white);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media screen and (max-width: 767px) {
  .button-title-table {
    width: 100%;
  }

  /* Stack button groups on mobile */
  .v-btn-group--mobile-stack {
    flex-direction: column;
  }

  .v-btn-group--mobile-stack>.v-btn {
    border-radius: 0;
    border-right-width: var(--btn-border-width);
    border-bottom-width: 0;
  }

  .v-btn-group--mobile-stack>.v-btn:first-child {
    border-radius: var(--btn-border-radius) var(--btn-border-radius) 0 0;
  }

  .v-btn-group--mobile-stack>.v-btn:last-child {
    border-radius: 0 0 var(--btn-border-radius) var(--btn-border-radius);
    border-bottom-width: var(--btn-border-width);
  }
}