/* ==========================================================================
   Microsoft Fluent Design 2 - Button Component (button.css)
   ========================================================================== */

/* Fluent 2 Base Button */
.fluent-button,
.btn,
button:not(.fluent-select__button):not(.toast-close):not(.fluent-select-search-clear):not(.auto-master-toggle):not(.auto-email-toggle):not(.create-primary-btn):not(.admin-system-btn):not(.sync-segment-btn):not(.sync-btn-block):not(.sync-chip-btn):not(.sync-btn-cancel):not(.sync-btn-confirm):not(.sync-import-group-toggle):not(.sync-modal-close-btn):not(.admin-users-primary-btn):not(.admin-users-secondary-btn):not(.admin-users-cancel-btn):not(.admin-users-danger-btn):not(.admin-users-filter-btn):not(.admin-users-icon-btn):not(.admin-users-page-btn):not(.previous-log-ai-btn):not(.btn-help-guide):not(.btn-filter-primary):not(.admin-table-tool-btn):not(.bulk-approve-btn):not(.bulk-reject-btn):not(.bulk-clear-btn):not(.fluent-select-trigger):not(.nkcv-date-picker-nav):not(.nkcv-date-picker-day) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacingS);
  min-height: 36px;
  padding: var(--spacingXS) var(--spacingL);
  border-radius: var(--borderRadiusMedium);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSize300);
  font-weight: var(--fontWeightSemibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  border: 1px solid var(--colorNeutralStroke1);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  transition: background-color var(--durationFast) var(--curveFluent),
              border-color var(--durationFast) var(--curveFluent),
              box-shadow var(--durationFast) var(--curveFluent),
              transform var(--durationFast) var(--curveFluent);
  box-shadow: var(--shadow2);
}

.fluent-button:focus-visible,
.btn:focus-visible,
button:focus-visible {
  box-shadow: var(--focusRing) !important;
}

.fluent-button:disabled,
.fluent-button.is-disabled,
.btn:disabled,
.btn.is-disabled,
button:disabled {
  background-color: var(--colorNeutralBackgroundDisabled) !important;
  color: var(--colorNeutralForegroundDisabled) !important;
  border-color: var(--colorNeutralStrokeDisabled) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: var(--opacity-disabled);
}

/* Primary Variant */
.fluent-button--primary,
.btn-primary,
.ds-btn-primary,
.create-primary-btn,
.manager-export-btn-primary {
  background-color: var(--colorBrandBackground) !important;
  color: var(--colorNeutralForegroundOnBrand) !important;
  border-color: var(--colorBrandStroke1) !important;
}

.fluent-button--primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.ds-btn-primary:hover:not(:disabled),
.create-primary-btn:hover:not(:disabled),
.manager-export-btn-primary:hover:not(:disabled) {
  background-color: var(--colorBrandBackgroundHover) !important;
  border-color: var(--colorBrandStroke2) !important;
  box-shadow: var(--shadow4);
}

.fluent-button--primary:active:not(:disabled),
.btn-primary:active:not(:disabled) {
  background-color: var(--colorBrandBackgroundPressed) !important;
}

/* Secondary Variant */
.fluent-button--secondary,
.btn-secondary,
.ds-btn-secondary {
  background-color: var(--colorNeutralBackground1) !important;
  color: var(--colorNeutralForeground1) !important;
  border-color: var(--colorNeutralStroke1) !important;
}

.fluent-button--secondary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.ds-btn-secondary:hover:not(:disabled) {
  background-color: var(--colorNeutralBackground1Hover) !important;
  border-color: var(--colorNeutralStroke1Hover) !important;
  box-shadow: var(--shadow2);
}

/* Subtle Variant */
.fluent-button--subtle,
.btn-ghost,
.btn-subtle {
  background-color: var(--colorNeutralBackgroundSubtle) !important;
  color: var(--colorNeutralForeground1) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.fluent-button--subtle:hover:not(:disabled),
.btn-ghost:hover:not(:disabled),
.btn-subtle:hover:not(:disabled) {
  background-color: var(--colorNeutralBackgroundSubtleHover) !important;
}

/* Outline Variant */
.fluent-button--outline,
.btn-outline {
  background-color: transparent !important;
  color: var(--colorBrandForeground1) !important;
  border-color: var(--colorBrandStroke1) !important;
  box-shadow: none !important;
}

.fluent-button--outline:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
  background-color: var(--colorBrandBackground2) !important;
}

/* Danger Variant */
.fluent-button--danger,
.btn-danger {
  background-color: var(--colorStatusDangerBackground1) !important;
  color: var(--colorStatusDangerForeground1) !important;
  border-color: var(--colorStatusDangerBorder1) !important;
}

.fluent-button--danger:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
  background-color: var(--colorStatusDangerForeground1) !important;
  color: var(--colorNeutralForegroundOnBrand) !important;
}

/* Success Variant */
.fluent-button--success,
.btn-success {
  background-color: var(--colorStatusSuccessBackground1) !important;
  color: var(--colorStatusSuccessForeground1) !important;
  border-color: var(--colorStatusSuccessBorder1) !important;
}

.fluent-button--success:hover:not(:disabled),
.btn-success:hover:not(:disabled) {
  background-color: var(--colorStatusSuccessForeground1) !important;
  color: var(--colorNeutralForegroundOnBrand) !important;
}

/* Icon Button */
.fluent-button--icon,
.btn-icon,
.action-icon-btn {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--borderRadiusCircular);
}

.fluent-button--block,
.btn-block {
  width: 100%;
}

.fluent-button--large,
.btn-large {
  min-height: var(--app-button-height-lg, 44px);
  padding: var(--spacingS, 8px) var(--spacingXXL, 24px);
}

/* Loading State */
.fluent-button.is-loading,
.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}